Tag label

Tag label menetapkan label untuk medan input jenis input, textarea, select dan sebagainya.

Label dikaitkan dengan medan input tertentu menggunakan atribut for. Di dalamnya perlu dinyatakan nilai atribut id medan input yang dikaitkan dengan label itu. Juga label dikaitkan dengan elemen jika elemen itu diletakkan di dalam tag label. Dalam kes ini, atribut for tidak perlu dinyatakan. Lihat contoh untuk pemahaman yang lebih baik.

Dengan mengklik pada label, kotak semak atau butang radio yang dikaitkan dengannya akan menukar statusnya dari ditanda kepada tidak ditanda dan sebaliknya. Label dalam kes ini adalah untuk kemudahan: sukar untuk mengarah kursor ke elemen borang yang kecil, manakala ke label panjang dengan teks - jauh lebih mudah.

Medan input teks yang dikaitkan dengan label jenis input dan textarea akan mendapat fokus input. Fokus - ialah apabila kursor berkelip dalam medan input, dalam kes ini, jika anda menaip sesuatu pada papan kekunci - teks akan masuk ke medan ini (lihat pseudokelas focus untuk pemahaman lanjut tentang fokus).

Label label boleh digunakan untuk mengimitasi kotak semak atau butang radio. Ini diperlukan untuk membuat checkbox atau radio dengan reka bentuk sendiri (yang dilarang dalam CSS, tetapi dengan menggunakan helah yang bijak adalah mungkin).

Atribut

Atribut	Keterangan
for	Dalam atribut ini, nyatakan nilai atribut id medan input yang dikaitkan dengan label label.
accesskey	Menetapkan kekunci panas, yang boleh digunakan untuk pergi ke elemen borang yang dikaitkan dengan label (melalui atribut for). Untuk maklumat lanjut, lihat atribut accesskey.

Contoh . Kotak semak

Mari kita kaitkan label kepada kotak semak checkbox menggunakan atribut for. Klik pada label dan anda akan melihat pertukaran status kotak semak dari ditanda kepada tidak ditanda dan sebaliknya:

:

Contoh . Di dalam label

Sekarang, mari kita tidak mengaitkan label melalui atribut for, tetapi letakkan elemen terus di dalam tag label, dalam kes ini dengan mengklik pada teks label juga akan mengaktifkan elemen:

:

Contoh . Medan input teks

Mari kita kaitkan label kepada tag input menggunakan atribut for. Mengklik pada label akan menyebabkan medan input mendapat fokus. Pada masa yang sama, teks yang terkandung dalam medan (kami tambahkan menggunakan atribut value) akan menjadi terpilih. Jika mula menaip sesuatu pada papan kekunci - teks ini akan dipadam. Untuk menghilangkan pemilihan, tanpa memadam teks, boleh dilakukan dengan mengklik pada medan input: fokus pada masa itu tidak akan hilang, tetapi pemilihan akan hilang:

:

Lihat juga