Logo Komodo Koding /Koding

Label untuk form HTML

Setiap elemen form bisa diikuti dengan tag label yang berguna sebagai penanda dari elemen tersebut

Seperti yang kamu lihat di halaman sebelumnya, tag input hanya menampilkan form isiannya tanpa ada tulisan yang jelas.

Untuk membantu pengguna situs mengerti apa yang harus diisi kita bisa menggunakan tag <label>.

Contoh tag label

Berikut contoh kode tag label

<label> Username: </label> <br>
<input type="text">

Hasilnya


Sekarang kotaknya tidak berdiri sendiri! tapi sudah ada text penandanya.

😲 Info sampingan

Tag label, bukan hanya bisa digunakan pada input-text saja, nanti kita bisa gunakan ke berbagai type input lainnya.

Atribut for pada label

Untuk menghubungkan sebuah label dengan input, kita bisa menggunakan atribut for pada label dan atribut id pada input.

Contoh penggunaan

<label for="username"> Username: </label> <br>
<input id="username" type="text">

Hasilnya


Sekarang coba klik text “Username:” , secara otomatis input akan terpilih agar kamu bisa mulai mengetik tanpa perlu klik kotaknya terlebih dahulu.

🧐 Penting!

Pastikan nilai pada atribut for dan id sama. Untuk mendapatkan efek ini.

Gabungkan dengan tag lain

Di sebuah form, kamu tidak dibatasi dengan tag input atau text saja, kita bisa menggabungkan dengan tag lain yang sudah kita pelajari.

See the Pen sample P and h1 tag by Sekolah Koding (@sekolahkoding) on CodePen.

Di atas, kita memasukkan tag <p> di dalam tag <form> untuk membantu user menjelaskan form sebelumnya.