Basic HTML - Form Part 2

Pada sesi kali ini kita akan melanjutkan pembahasan element form pada HTML. Jika kamu belum membaca tutorial sebelumnya, lebih baik pahami dulu penjelasan form pada part 1. Sekarang kita akan mempelajari element apa saja yang dapat kita gunakan pada form.

Element Form

Seperti yang di jelaskan sebelumnya bahwa tag <form> merupakan sebuah kertas kosong. lalu di dalam kertas tersebut terdapat field input yang akan di isi oleh user. Berikut daftar element yang dapat kita gunakan di dalam tag <form>:

1. <input>
2. <label>
3. <select>
4. <textarea>
5. <button>
6. <fieldset>
7. <legend>
8. <datalist>
9. <optgroup>

Ada 9 tag yang akan kita bahas di dalam tag <form>, untuk attribute nya akan kita bahas pada part selanjutnya. Agar artikel ini tidak terlalu panjang untuk kalian baca. Lansung saja kita akan bahas satu per satu element tersebut.

1. Tag <input>

Tag <input> ini sangat sering kita jumpai pada saat mengisi sebuah form. Tag memiliki banyak jenis type yang dapat kita gunakan. Pembahasan ini kita akan bahas pada form part 3, Karna pembahasannya cukup panjang. Lalu bagaimana cara membuat tag <input>. Berikut scriptnya :

<form>
    <input type="text" id="nama" name="name">
</form>

Secara default attribute type pada tag <input> adalah text, untuk attribute id dan name memiliki fungsi untuk mendefenisikan nama dari input tersebut.

2. Tag <label>

Tag ini digunakan untuk mendefenisikan beberapa tag pada form. Tag <label> akan memudahkan dalam pengisian form juga, dan juga untuk mempermudah user mengenali dari field yang akan di isi. berikut cara untuk membuat sebuah tag <label>:

<form>
    <label for="nama">Nama :</label>
    <input type="text" id="nama" name="name">
</form>

Pada bagian attribute for pada tag <label> berfungsi untuk mengarahkan pointer pada input yang di tandai. Attribute for harus sama nilainya dengan attribute id jika fungsi tersebut dapat berjalan.

Pada contoh tersebut saat kita mengklik text nama yang tadi kita buat dengan tag <label> maka fokus pengisian akan mengarah ke input yang sudah kita tandai dengan attribute id.

3. Tag <select>

Tag <select> ini berfungsi untuk memilih salah satu dari beberapa opsi atau pilihan. Tag ini mendefenisikan sebuah drop-down list. Berikut cara menggunakan tag <select>:

<form>
    <label for="makanan">makanan</label>
    <select name="menu-makanan" id="makanan">
        <option value="sate">Sate</option>
        <option value="bakso">Bakso</option>
        <option value="mie ayam">Mie Ayam</option>
    </select>
</form>

Tag <select> memiliki item yang akan di pilih secara drop-down list. Item tersebut di defenisikan oleh tag <option>. Tag <option> harus memiliki attribute value, agar saat mengirim data dapat terisi sesuai dengan value tersebut.

Kita juga bisa memilih beberapa item pada tag <select> dengan menambahkan attribute multiple dan attribute size untuk jumlah item yang akan di tampilkan. Agar lebih jelasnya coba salin script berikut dan cobakan pada text editor kamu.

<form>
    <label for="makanan">makanan : </label>
    <select name="menu-makanan" id="makanan" size="2" multiple>
        <option value="sate">Sate</option>
        <option value="bakso">Bakso</option>
        <option value="mie ayam">Mie Ayam</option>
    </select>
</form>

Untuk memilih item kita bisa menahan tombol ctrl + klik kiri.

4. Tag <textarea>

Menggunakan tag <textarea> dapat mendefenisikan beberapa baris text. Biasanya kita sering menjumpainya untuk menulis kolom komentar atau text yang panjang.

<form>
    <textarea name="komentar" id="komentar" cols="30" rows="10">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis reiciendis blanditiis nobis quam debitis dolores corporis sunt eum praesentium quas!
    </textarea>
</form>

Terdapat beberapa attribute yang dapat digunakan di tag <textarea> yaitu cols dan rows.

• cols - menentukan lebar dari text area
• rows - menentukan jumlah baris yang terlihat di text area

Kita juga dapat mengatur ukuran aslinya dengan cara menahan klik dan tarik pada bagian ujung kanan bawah.

5. Tag <button>

Tag ini digunakan untuk mendefenisikan sebuah tombol. Tombol inilah yang akan mengirim data setelah form di isi, dengan syarat tag <button> di bungkus oleh tag <form>. Berikut cara untuk membuat sebuah scriptnya.

<button type="button">Submit</button>

6. Tag <fieldset> dan <legend>

Tag <fieldset> digunakan untuk mengelompokkan data terkain formulir. dan tag <legend> digunakan untuk mendefenisikan sebuah caption atau keterangan dari tag <fieldset>. Sekarang mari kita cobakan.

<form>
    <fieldset>
        <legend>Kontak</legend>

        <label for="nama">Nama : </label>
        <input id="nama" name="nama" type="text"> <br><br>

        <label for="no">No :</label>
        <input id="no" name="no" type="text"><br><br>

        <label for="jk">Jenis Kelamin :</label>
        <select name="jk" id="jk">
            <option value="laki-laki">Laki-laki</option>
            <option value="perempuan">Perempuan</option>
        </select>
        <br><br>
        <label for="motto">Motto :</label>
        <br>
        <textarea name="motto" id="motto" cols="30" rows="10"></textarea>
    </fieldset>
    <fieldset>
        <legend>Jurusan</legend>
        <label for="jurusan">Jurusan : </label>
        <select name="jurusan" id="jurusan">
            <option value="PTIK">Pendidikan Teknik Informatika dan Komputer</option>
            <option value="SKom">Sistem Komputer</option>
            <option value="Sim">Sistem Informasi</option>
        </select>
        <button type="button">Kirim</button>
    </fieldset>
</form>

Berikut hasilnya 🌐

7. Tag <datalist>

Tag <datalist> berfungsi untuk menentukan daftar urutan item yang sudah ditentukan. tag ini akan menampilkan item secara dropdown. Membuat datalist harus menggunakan tag <input> dengan menambahkan attribute list. attribute list pada tag <input> harus sama nilainya dengan attribute id pada tag <datalist>.

Contoh:

<label for="label-makanan">Makanan</label>
<input type="text" id="label-makanan" list="item-makanan">
<datalist id="item-makanan">
    <option value="Bakso">
    <option value="sate">
    <option value="nasigoreng">
</datalist>

8. Tag <optgroup>

Tag <optgroup> digunakan untuk mengelompokkan pilihan yang terkait dengan tag <select>. Jika kita memiliki kasus seperti pilihan yang panjang atau memiliki pilihan yang akan di bagi menjadi beberapa bagian, maka tag <optgroup> adalah solusinya. Berikut contohnya:

<label for="menu">Menu</label>
<select name="menus" id="menus">
    <optgroup label="Makanan">
        <option value="bakso">Bakso</option>
        <option value="sate">Sate</option>
        <option value="nasigoreng">Nasi Goreng</option>
    </optgroup>
    <optgroup label="Minuman">
        <option value="teh">Teh</option>
        <option value="kopi">Kopi</option>
        <option value="juice">Juice</option>
    </optgroup>
</select>

Pada tag <optgroup> ada attribute yang nama label. Attribute ini berfungsi untuk memberikan penamaan pada tag <option>

Kesimpulan

Pahami skrip yang telah di pelajari pada materi kali ini. Ulangi terus agar dapat mengenal lebih dekat lagi tentang tag yang kita bahas pada sebelumnya.