Belajar Element HTML: <label>

Tag <label> mewakili keterangan judul atau penamaan tampilan control (biasanya untuk form control seperti <input>, <select>, dll.).

Elemen <label> memungkinkan kamu untuk melampirkan keterangan/label pada kontrol form, sehingga pengguna tahu untuk apa kontrol itu.

Misalnya, bidang input yang menerima nama depan pengguna bisa diberi nama label “Nama Depan”.

Syntax

Tag <label> ditulis seperti <label></label> dengan teks label disisipkan diantara tag pembuka dan penutup.

Tag <label> ini bisa digunakan dengan dua cara. Yaitu dengan menyertakan kontrol terkait didalam tag pembuka dan penutup elemen label.

Seperti ini:

<label>Nama Awal: <input type="text" id="fname"></label>

Dan yang kedua yaitu dengan cara mereferensikan elemen terkait dengan ID menggunakan atribut for.

Cara ini dilakukan jika elemen kontrol terkait diletakkan diluara elemen <label>.

Seperti ini:

<label for="fname">Nama Awal: </label>
<input type="text" id="fname">

<label for="first_name">Nama awal</label>
<br>
<input type="text" name="first_name" id="nama_awal">

<label>
  <input type="checkbox" name="terms">
  I agree to the terms
</label>

<p>Subscribe to the newsletter?</p>
<label>
  <input type="radio" name="newsletter" value="yes"> Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no"> No
</label>

<label for="last_name">Last name</label>
<br>
<input type="text" name="last_name" id="last_name">

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <label> dengan pengaturan CSS:

label {
  cursor: default;
}