Cara menggunakan css for label

Example

Three radio buttons with labels:

 
  HTML

 
  CSS

 
  JavaScript


 

Try it Yourself »

Definition and Usage

The tag defines a label for several elements:

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

Attributes

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 merupakan tag pada HTML yang digunakan untuk memberikan label dalam bentuk teks dan tulisan terhadap HTML elemen lainnya seperti element , , ataupun . HTML element tag berguna untuk memberitahukan kepada pengguna mengenai data yang akan dimasukkan pada suatu formulir. HTML element tag akan memperjelas data yang akan dimasukkan sehingga kesalahan input oleh pengguna dalam memasukkan data akan terhindari.

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 .

1
2
3
4
5
6

   Masukkan Nama Anda : 


   Masukkan Password Anda : 

Kode di atas akan menghasilkan :

Masukkan Nama Anda :

Masukkan Password Anda :

Berikut ini contoh penggunaan pada HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

   Belajar Menggunakan HTML Element Tag LABEL


Latihan Menggunakan HTML Element Tag LABEL


   

     Masukkan Nama Anda : 
     
   

   

     Masukkan Password Anda : 
     
   

   

     
     
   

Jika dijalankan akan menghasilkan tampilan :

Atribut Khusus

Atribut khusus pada elemen diantaranya :

• 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 :

1
2
3

label{
   cursor : default;
}