Pada dasarnya HTML memiliki banyak sekali jenis tag dan atribut dan pada kesempatan selanjutnya kita akan mempelajari lebih lanjut tentang tag dan atribut pada HTML
Fungsi tag label dalam pembuatan form HTML
Label tag dalam HTML setidaknya memiliki 2 fungsi yaitu
1. Deskripsi tambahan untuk beberapa objek form seperti radio atau checkbox.
2. Lebih mudah digunakan dalam memasukkan data [membuat form user friendly].
Secara visual, tag label tidak akan mempengaruhi apa pun di formulir [kecuali jika Anda mengubahnya menggunakan CSS]. Jadi tanpa atau dengan tag label, Anda tidak akan melihat perbedaannya
Untuk memahami penggunaan tag label, silakan jalankan contoh kode formulir HTML berikut
Pelajari Tag Label HTML
Keterampilan yang harus saya kuasai untuk menjadi desainer web.
keterampilan HTML
CSS Keterampilan
Keterampilan Javascript
Kode Hasil
Ketika kode HTML di atas dijalankan di web browser, maka akan muncul kotak "checklist". Dengan ukuran kotak yang kecil, hal ini akan menyulitkan pengguna untuk mengklik kotak putih pada kotak centang
Cara yang dapat dilakukan untuk memudahkan pengguna adalah dengan mengisi kotak centang dengan mengklik deskripsi kotak centang
Ini adalah fungsi menggunakan tag label
Cara Menggunakan tag label HTML
Ada 3 cara menggunakan tag label, antara lain
1. Masukkan atau lampirkan semua tag input kotak centang ke dalam tag label
Perhatikan kode berikut
keterampilan HTML
Dapat diamati pada contoh di atas bahwa tag labil digunakan dengan melampirkan tag input di dalamnya
Silakan ubah kode kami sebelumnya, dan tambahkan tag label
2. Menggunakan atribut "untuk".
Perhatikan kode berikut
CSS Keterampilan
Perhatikan bahwa tag label ditempatkan setelah tag input kotak centang. Pada tag label ini terdapat atribut for yang nilainya adalah id dari tag masukan. Dalam contoh ini saya membuat atribut id=”skillcss” di tag input kotak centang. Sampai pada pembuatan label, saya memberikan nilai atribut =”skillcss”
3. Gabungkan kedua cara di atas
Perhatikan kode berikut
keterampilan Javascript
Dalam contoh saya menggabungkan penggunaan atribut for untuk tag label, tetapi juga "mengunci" tag input kotak centang dengan tag label
Sebagai contoh lengkap form kita, berikut adalah contoh form sebelumnya dengan penambahan tag label
Pelajari Tag Label HTML
Keterampilan yang harus saya kuasai untuk menjadi desainer web.
keterampilan HTML
CSS Keterampilan
keterampilan Javascript
Kode Hasil
Silakan coba jalankan kodenya, dan jika Anda mengklik deskripsi kotak centang, maka kotak centang akan langsung terisi. Hal seperti ini akan memudahkan pengguna untuk mengisi form yang kita rencanakan
[Untuk Lebih Jelasnya Sobat Silahkan Coba Sendiri Dan Tonton Video Penjelasannya Di Atas]
Itulah tutorial kita kali ini tentang Fungsi dan Cara Menggunakan Tag Label dalam membuat form HTML. Menggunakan tag label untuk mendesain formulir akan memudahkan pengguna untuk mengisi formulir yang dibuat
Selanjutnya pada tutorial form HTML, saya akan membahas fungsi dan cara menggunakan tag fieldset dan tag legend untuk mengelompokkan objek form