Атрибут for

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

• <button>;
• <input>;
• <meter>;
• <progress>;
• <select>;
• <textarea>;
• И даже сам <output>.

Это значит, что элементам из списка выше можно задать уникальный 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать