Тег label

Тегот label задава етикета за поле за внес од тип input, textarea, select и така натаму.

Етикетата се поврзува со одредено поле за внес со помош на атрибутот for. Во него треба да се наведе вредноста на атрибутот id на полето за внес, до кое е поврзана етикетата. Исто така етикетата се поврзува со елементот, ако тој елемент се стави внатре во тегот label. Во овој случај не треба да се наведува атрибутот for. Погледнете ги примерите за подобро разбирање.

При кликнување на етикетата, поврзаните со неа чекбокси или радио копчиња ќе ја менуваат својата состојба од означено на неозначено и обратно. Етикетата во овој случај е потребна за погодност: во малите елементи на формата е тешко да се погоди со курсорот, а во долгата етикета со текст - за ред полесно.

Поврзаното со етикетата текстуално поле за внес од тип input и textarea ќе го добие фокусот за внес. Фокус - е кога курсорот трепка во полето за внес, во овој случај, ако напишете нешто на тастатурата - текстот ќе се внесе во ова поле (вид. псевдо-класа focus за напредно разбирање на фокусот).

Етикетата label може да се користи за имитација на чекбокс или радио копче. Ова е потребно за да се направи checkbox или radio со сопствен дизајн (што во CSS е забрането, но со помош на паметни методи е можно).

Атрибути

Атрибут	Опис
for	Во овој атрибут треба да се наведе вредноста на атрибутот id на полето за внес, до кое е поврзана етикетата label.
accesskey	Задава копче за брз пристап, со помош на кое може да се премине до поврзаниот со етикетата (преку атрибутот for) елемент на формата. Повеќе детали вид. атрибут accesskey.

Пример . Чекбокс

Ајде да го поврземе флажерот checkbox со етикета со помош на атрибутот for. Кликнете на етикетата и ќе видите промена на состојбата на флажерот од означено на неозначено и обратно:

:

Пример . Внатре во label

А сега ајде да не ја поврзуваме етикетата преку атрибутот for, туку да ги вметнеме елементите директно во тегот label, во овој случај кликнувајќи на текстот на label исто така ќе доведе до активирање на елементот:

:

Пример . Текстуално поле за внес

Ајде на тегот input да му поврземе етикета со помош на атрибутот for. Кликнувањето на етикетата ќе доведе до добивање на фокусот од полето за внес. При тоа содржината во полето (додадена со помош на атрибутот value) ќе биде селектирана. Ако започнете да пишувате нешто на тастатурата - овој текст ќе се избрише. Можете да се ослободите од селекцијата, без да го избришете текстот, со кликнување со глувчето на полето за внес: фокусот во овој случај нема да исчезне, но селекцијата ќе исчезне:

:

Погледнете исто така