Proper use of labels with the elements above will benefit:
Screen reader users (will
read out loud the label, when the user is focused on the element)
Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the element, it toggles the input (this increases the hit area).
Tips and Notes
Tip: The for attribute of must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the
element inside the element.
Browser Support
Element
Yes
Yes
Yes
Yes
Yes
Attributes
Attribute
Value
Description
for
element_id
Specifies the id of the form element the label should be bound to
form
form_id
Specifies which form the label belongs to
Global Attributes
The tag also supports the Global Attributes in HTML.
Event Attributes
The tag also supports the Event Attributes in HTML.
Related Pages
HTML DOM reference:
Label Object
Default CSS Settings
Most browsers will display the element with the following default values:
HTML element tag
Jika di dalam suatu formulir terdapat label, pasti ada yang sesuatu yang diberi label. Hal ini yang disebut sebagai asosiasi. HTML elemen tag memiliki keterkaitan (asosiasi) dengan elemen input lainnya di dalam suatu bidang formulir. Elemen tag dituliskan secara berpasangan dengan elemen tersebut ().
Metode Penulisan Tag
Penggunaan tag label sebenarnya dapat digantikan dengan HTML elemen tag
lainnya seperti P (paragraf), maupun SPAN. Namun secara struktural HTML, hal tersebut sudah berbeda fungsi dan manfaat adanya elemen tag tertentu. Penulisan tag yang benar harus berasosiasi dengen elemen tag input lainnya.
Metode Pertama :
Penggunaan HTML element tag yang baik dapat menyertakan atribut for. Atribut ini merupakan deskripsi bagi elemen yang akan dipasangkan. Atribut FOR adalah rujukan bagi atribut ID pada
elemen . Jadi, nilai atribut FOR pada dan atribut ID pada harus sama.
1 2 3 4 5 6 7 8
Masukkan Nama Anda :
Masukkan Password Anda :
Kode di atas akan menghasilkan :
Masukkan Nama Anda :
Masukkan Password Anda :
Metode Kedua :
Pada metoda penulisan kedua ini atribut for tidak disertakan. Metode yang digunakan adalah dengan membungkus HTML elemen secara langsung.
Ini artinya HTML element tag merupakan kontainer bagi HTML element .
for Menentukan id pada elemen lain (form control) yang akan dikaitkan bagi elemen label. Nilai : id_elemen
form Menentukan id elemen form yang akan dikaitkan bagi elemen label. Nilai : id_form
Browser Pendukung :
Global Attributes :
Tag mendukung Global Atribut di dalam
HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML. Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan
wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya. Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen pada HTML :