Клавиша / esc

Атрибут for

Когда двум тегам нужно почувствовать связь 👉👈

Время чтения: меньше 5 мин

Кратко

Скопировано

Атрибут for связывает текст в <label> или тег <output> с контролами формы.

Пример

Скопировано

Попробуйте нажать на текст в примере ниже.

        
          
          <label for="number">Ваше любимое число:</label><input id="number">
          <label for="number">Ваше любимое число:</label>
<input id="number">

        
        
          
        
      
Открыть демо в новой вкладке

Поле <input> становится активным, хотя мы его не трогали. Так получается, потому что текст связан с этим полем. Благодаря for они словно одно целое 😊

Как пишется

Скопировано

Связь устанавливается парой атрибутов for-id, где for одного элемента ссылается на id другого (или других).

А ещё не каждый элемент подойдёт для связи, годятся только из категории «связываемых»:

Это значит, что элементам из списка выше можно задать уникальный id, на который сможет сослаться атрибут for в <label> или <output>.

        
          
          <input id="name"><input id="age"><output for="name age"></output>
          <input id="name">
<input id="age">
<output for="name age"></output>

        
        
          
        
      

Значения атрибута for не должны повторяться на одной и той же странице. Дело в том, что благодаря ему поля связываются не только визуально, но и программно. Так пользователи скринридеров и других вспомогательных технологий знают, что от них хочет поле.

Подсказки

Скопировано

💡 Связь между <label> и <input> возможно установить без атрибута for — достаточно обернуть один другим:

        
          
          <label>Ваше любимое число: <input id="number"></label>
          <label>Ваше любимое число: <input id="number"></label>