Главная HTML Форма Элемент label

Элемент формы <label>

Элементы формы

<label>...</label> является семантическим (!) элементом формы.

Синтаксис: 
<label for="идентификатор">Текст</label><input id="идентификатор">

<label><input type="...">Текст</label>

Атрибут <label>

Атрибут Значение Описание

for

="id_элемента"

Идентификатор элемента, с которым следует установить связь.

Задаёт уникальный идентификатор, определяемый с помощью атрибута id элемента <input>, с которым следует установить связь. Атрибут for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <input> размещается внутри контейнера <label>, то применять атрибут for не требуется..

С помощью элемента <label>...</label> создаются надписи к элементам формы - текстовые метки (от англ. label - метка). Элемент <label> устанавливает связь между текстовой меткой и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши не на "значок переключателя", а на сам текст.

Существует два способа связывания объекта и метки.

  1. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента <label>.
  2. При втором способе элемент формы помещается внутрь контейнера <label>...</label> и в этом случае атрибут for указывать не нужно.

1
С элементом <label> + атрибут for 
<input type="checkbox" id="check1"><label for="check1"> Пиво</label> 
<input type="checkbox" id="check2"><label for="check2"> Чай</label> 
<input type="checkbox" id="check3"><label for="check3"> Кофе</label>

Выбор напитка(ов) - клик на переключатель или текст.

2
Без элемента <label> 
<input type="checkbox" name="checkbox1"> Пиво 
<input type="checkbox" name="checkbox2"> Чай 
<input type="checkbox" name="checkbox3"> Кофе
Пиво Чай Кофе
Выбор напитка(ов) - клик строго на переключатель.

3 
<form name="zakaz" action="test.php" method="post">
<fieldset>    
  <legend>Форма заказа</legend>   
  Выберите размер:<br>
  <!-- label привязанный через атрибут for к элементу checkbox -->
  <input type="checkbox" id="small_size" name="size1" value="1" checked="checked">
  <label for="small_size"> 48-50</label><br>

  <!-- label в виде обвертки для checkbox -->
  <label><input type="checkbox" name="size2" value="2"> 52-54</label>
  <label><input type="checkbox" name="size3" value="3"> 56-58</label>

  <!-- label в виде обвертки для radio -->
  <p><label><input type="radio" name="srok" value="10" checked="checked"> Обычная доставка</label><br>

  <!-- без обертки label  выбор через клик по переключателю, а не по тексту -->
  <input type="radio" name="srok" value="11"> Срочная доставка</p>

  <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p>
</fieldset>           
</form>

Форма заказа Выберите размер:



Срочная доставка