Етикет label

Етикетът label задава маркер за поле за въвеждане от тип input, textarea, select и така нататък.

Маркерът се свързва към определено поле за въвеждане с помощта на атрибута for. В него трябва да се посочи стойността на атрибута id на полето за въвеждане, към което е свързан маркерът. Също така маркерът се свързва към елемент, ако този елемент се постави вътре в етикета label. В този случай не е необходимо да се посочва атрибутът for. Вижте примерите за по-добро разбиране.

При натискане върху маркера, свързаните към него чекбоксове или радио бутони ще променят състоянието си от отметнато на неотметнато и обратно. Маркерът в този случай е необходим за удобство: в малките елементи на формата е трудно да се попадне с курсора, а в дълъг маркер с текст - много по-лесно.

Свързаното към маркера текстово поле за въвеждане от тип input и textarea ще получава фокус за въвеждане. Фокусът - това е, когато курсорът мига в полето за въвеждане, в този случай, ако пишете нещо на клавиатурата - текстът ще попадне в това поле (вижте псевдоклас focus за напреднало разбиране на фокуса).

Маркерът label може да се използва за имитиране на чекбокс или радио бутон. Това е необходимо, за да се направи checkbox или radio със собствен дизайн (което в CSS е забранено, но с помощта на хитри техники е възможно).

Атрибути

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

Нека към квадратчето за отметка checkbox свържем маркер с помощта на атрибута for. Натискайте върху маркера и ще видите промяна на състоянието на квадратчето от отметнато на неотметнато и обратно:

html<input type="checkbox" id="checkbox">
<label for="checkbox">Аз съм свързан към чекбокс с id checkbox.</label>

Результат:

Пример . Вътре в label

А сега нека не свързваме маркера чрез атрибута for, а поставим елементите точно в етикета label, в този случай при натискане на текста на label също ще се активира елементът:

html<label><input type="checkbox"> маркер</label>

Результат:

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

Нека към етикета input свържем маркер с помощта на атрибута for. Натискането върху маркера ще доведе до получаване на фокус от полето за въвеждане. При това съдържащият се в полето текст (добавен с помощта на атрибута value) ще стане маркиран. Ако започнете да пишете нещо на клавиатурата - този текст ще бъде заместен. Можете да се отървете от маркирането, без да изтриете текста, като кликнете с мишката върху полето за въвеждане: фокусът няма да изчезне, но маркирането ще изчезне:

html<input type="text" id="input1" value="някакъв текст">
<label for="input1">Аз съм свързан към input с id input1.</label>

Результат:

Вижте също