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.
