Label untuk form HTML

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

Username:

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

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

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

Username:

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

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

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 by Sekolah Koding (@sekolahkoding) on CodePen.

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