Untuk apa label dalam html?

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

<. DOCTYPE html>

Keterampilan yang harus saya kuasai untuk menjadi desainer web.

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

value="skillhtml"/> 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

<. DOCTYPE html>

Keterampilan yang harus saya kuasai untuk menjadi desainer web.

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

Apa yang dimaksud dengan label label?

Apa yang dimaksud dengan memilih label masukan dalam HTML?

Apa itu dalam HTML?

Apa fungsi dari tag kuat?