Tag label

Tag label menetapkan label untuk bidang input tipe input, textarea, select dan sebagainya.

Label ditautkan ke bidang input tertentu dengan menggunakan atribut for. Di dalamnya harus ditentukan nilai atribut id dari bidang input yang ditautkan dengan label. Juga label akan tertaut ke elemen jika elemen tersebut ditempatkan di dalam tag label. Dalam hal ini atribut for tidak perlu ditentukan. Lihatlah contoh untuk pemahaman yang lebih baik.

Dengan mengklik label, kotak centang atau tombol radio yang tertaut padanya akan mengubah statusnya dari tercentang menjadi tidak tercentang dan sebaliknya. Label dalam hal ini diperlukan untuk kenyamanan: sulit untuk mengarahkan kursor ke elemen formulir yang kecil, sedangkan ke label panjang dengan teks - jauh lebih mudah.

Bidang input teks yang tertaut ke label tipe input dan textarea akan mendapatkan fokus input. Fokus - adalah ketika kursor berkedip di bidang input, dalam hal ini, jika Anda mengetik sesuatu pada keyboard - teks akan masuk ke bidang ini (lihat pseudokelas focus untuk pemahaman lanjutan tentang fokus).

Label label dapat digunakan untuk mensimulasikan kotak centang atau tombol radio. Ini diperlukan untuk membuat checkbox atau radio dengan desain sendiri (yang dilarang di CSS, tetapi dengan trik-trik cerdas mungkin dilakukan).

Atribut

Atribut	Keterangan
for	Pada atribut ini harus ditentukan nilai atribut id dari bidang input yang ditautkan dengan label label.
accesskey	Menetapkan tombol pintas, yang dapat digunakan untuk beralih ke elemen formulir yang tertaut ke label (melalui atribut for). Untuk lebih detail lihat atribut accesskey.

Contoh . Kotak Centang

Mari kita tautkan label ke kotak centang checkbox menggunakan atribut for. Cobalah klik label dan Anda akan melihat perubahan status kotak centang dari tercentang menjadi tidak tercentang dan sebaliknya:

:

Contoh . Di Dalam label

Dan sekarang mari kita tidak menautkan label melalui atribut for, tetapi menempatkan elemen langsung di dalam tag label, dalam hal ini dengan mengklik teks label juga akan mengaktifkan elemen:

:

Contoh . Bidang Input Teks

Mari kita tautkan label ke tag input menggunakan atribut for. Mengklik label akan menyebabkan bidang input mendapatkan fokus. Pada saat yang sama, teks yang terkandung di dalam bidang (kami tambahkan menggunakan atribut value) akan menjadi terpilih. Jika mulai mengetik sesuatu pada keyboard - teks ini akan terhapus. Untuk menghilangkan pemilihan, tanpa menghapus teks, dapat dilakukan dengan mengklik mouse pada bidang input: fokus pada saat itu tidak akan hilang, tetapi pemilihan akan hilang:

:

Lihat Juga