Label, Fieldset dan Legend pada Organisasi Elemen Form

ORGANISASI ELEMEN FORM

Pada postingan sebelumnya yaitu Cara Membuat Form dan Tipe-Tipenya di HTML, Cara Membuat RadioButton dan ChecBox di HTML, dan Cara Mudah Membuat Dropdown List di HTML semua itu tentang Masukan/Input yang jika tidak menampilkan informasi tambahan menjadi tidak berguna, karena pengguna tidak dapat mengetahui data apa yang harus diisikan kedalam form-form tersebut. Oleh karena itu, HTML menyediakan elemen-elemen yang bisa dijadikan penanda dari elemen masukkan form yaitu diantaranya Label, Fieldset dan Legend. Mari kita bahas satu persatu dibawah ini.

1. Label
   
   Label berfungsi untuk menambahkan teks pada elemen masukan form. Label diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan. Atribut for ditambahkan dalam Label yang memiliki nilai sama dengan id pada elemen form. Sehingga pengguna dapat langsung mengisikan nilai dari form dengan meng-klik teks yang dihasilkan dari Label ini.
   Contoh :
   
   <label for="username">Username</label>
<input type="text" name="username" id="username">
   
   Username
   
   
   
2. Fieldset
   
   

   Fieldset digunakan untuk mengelompokkan beberapa elemen masukan form, yang memberikan tanda bahwa elemen-elemen tersebut masih satu grup yang sama atau saling terkait/berhubungan. Secara standar Fieldset akan memberikan border disekitar elemen-elemen yang dijadikan satu grup yang dapat diubah menggunakan CSS.

   Contoh :
   
   <fieldset>
        <label for="username">Username</label>
        <input type="text" name="username" id="username">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
   </fieldset>
   
   
   
   Username
   
   
   Password
   
   
3. Legend
   
   Legend digunakan untuk memberikan judul pada sebuah Fieldset. Penggunaannya cukup mudah hanya dengan menambahkan elemen sebagai anak pertama dari Fieldset.
   Contoh :
   
   
   <fieldset>
        <legend>LOGIN</legend>
        <label for="username">Username</label>
        <input type="text" name="username" id="username">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
   </fieldset>
   
   
   LOGIN
   

   
   Username
   
   
   Password
   
   

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.