Membuat Form pada HTML

Halo semuanya, pada kali kesempatan kali kita akan latihan membuat form pada HTML seperti yang biasa ada pada halaman kontak. Form / formuliar biasa digunakan ketika kita ingin menerima input dari user lalu mengolah data yang diinput tersebut.

Membuat form

• Pertama tama, kita akan menambahkan tag <form>
• Tag <form> ini merupakan tempat untuk menampung berbagai elemen input pada form
• Element elemen pada form yaitu seperti input text dan button submit

<form>
    .
    elemen elemen form
    .
</form>

Tag <input>

• Tag <input> dapat kita gunakan untuk membuat elemen form
• Yang perlu teman teman perhatikan adalah atribut type pada tag ini
• Contoh penggunaan atribut type yaitu <input type="text"> yang akan menghasilkan input bentuk teks singkat
• Terdapat cukup banyak input type yang ada pada HTML, namun untuk pembahasan pada artikel ini kita akan menggunakan 3 type input berikut:

Type	Penjelesan
text	Input dalam bentuk teks singkat hanya 1 baris saja.
email	Input bentuk teks yang dikhususkan untuk email
submit	Button (tombol) untuk submit nilai yang telah di input pada form

Text Field

• Untuk membuat input Text Field singkat kita dapat menggunakan tag <input>
• Kemudian tambahkan atribut type dengan value "text"
• Kita juga dapat menambahkan atribut placeholder sebagai hint / petunjuk pengisian
• Pada contoh dibawah kita akan membuat input untuk nama dan alaman email

<form>
    <input type="text" placeholder="Your name">
    <br>
    <input type="email" placeholder="yourname@mail">
</form>

• Dikarenakan tag <input> termasuk inline element kita perlu menambahkan tag <br> untuk membuat baris baru
• Baca disini jika belum mengetahui apa itu block & inline element

Maka hasilnya akan seperti berikut:

Tag <label> serta atribur for & id

• Kita telah berhasil membuat input sederhana
• Tetapi bagaimana jika ingin menambahkan keterangan sebelum / di luar kolom input?
• Kita dapat menggunakan tag <p> atau lebih disarankan menggunakan tag <label>
• Tag <label> juga termasuk kedalam inline element, jadi jika teman teman ingin menambahkan jarak (enter) maka gunakan <br>

<form>
    <label for="input_nama">Nama: </label> <br>
    <input id="input_nama" type="text" placeholder="Your name">
    <br>

    <label for="input_email"> Email: </label> <br>
    <input id="input_email" type="email" placeholder="your@email.com">
    <br>
</form>

• Tag <label> berfungsi untuk menambahkan keterangan kolom input
• Perhatikan atribut pada tag <label>
• Terdapat atribut for yang berisi id tag input dibawahnya
• Atribut for digunakan untuk membuat label ketika ditekan mengarah ke input tertentu
• Dengan syarat atribut for diisi dengan id dari elemen yang dituju

maka hasilnya akan seperti berikut:

Nama:

Email:

Text Area

• Ketika kita memerlukan user untuk memasukkan teks yang lebih banyak misalkan Saran, maka kita memerlukan text area
• Berbeda dengan sebelumnya, untuk membuat input dengan tipe text area kita menggunakan tag <textarea> bukan tag <input>
• Pada tag <textarea> kita menggunakan atribut cols dan rows untuk menggantikan height dan width

<form>
    <label for="input_pesan">Pesan</label>
    <br>
    <textarea 
        id="input_pesan"
        placeholder="Tulis pesan anda disini" 
        cols="50" 
        rows="5"></textarea>
</form>

Maka hasilnya akan seperti berikut:

Pesan:

Tombol Submit

• Setelah membuat form, kita tentu akan memerlukan button untuk menyimpan value yang telah diinput user
• Untuk membuat tombol submit kita dapat menggunakan tag <input> atau tag <button>
• Yang perlu diperhatikan adalah kita perlu menambahkan atribut type dengan value submit type="submit"

Bagaimana untuk memproses data yang disubmit?

• Untuk memprosesnya kita memerlukan yang namanya Form Handler
• Form Handler merupakan file yang berisi logika untuk mengolah data yang diinput
• Kita dapat menghubungkan form ke form handler dengan menambahkan atribut action pada tag <form>
• Form Handler ini tidak kita bahas disini, karena kita fokus pada materi HTML nya terlebih dahulu

<form action="form_handler.php">
    <label>Nama:</label>
    <br>
    <input type="text" placeholder="nama anda" required">
    <br> <br>
    <input type="submit" value="Kirim">
    <button type="submit">Button Kirim</button>
</form>

Note: ketika anda mengklik button maka akan diarahkan ke halaman home, karena tidak ada aksi yang ditetapkan untuk button tersebut

Berikut adalah hasilnya:

Nama:


Button Kirim

Grouping dengan fieldset

• Kita dapat mengelompokkan seluruh bagian form atau bagian tertentu pada form menggunakan tag <fieldset>
• Fieldset akan memberikan garis kotak pada luar form
• Kemudian kita dapat menggunakan tag <legend> untuk memberikan judul group tersebut

<form action="form_handler.php">
    <fieldset>
        <legend>Form Saran dan Masukan</legend>
        <label for="input_nama">Nama: </label> <br>
        <input id="input_nama" type="text" placeholder="Your name" required>
        <br>

        <label for="input_email"> Email: </label> <br>
        <input id="input_email" type="email" placeholder="your@email.com" required>
        <br>

        <label for="input_pesan">Saran / Masukan:</label>
        <br>
        <textarea id="input_pesan" placeholder="Tulis pesan anda disini" cols="50" rows="5"></textarea>
    </fieldset>

    <br>
    <button type="submit">Kirim</button>
</form>

Maka beginilah penampakan form yang telah berhasil kita buat: