Что делает атрибут «for» в теге HTML <label>?

382

Интересно, в чем разница между следующими двумя фрагментами кода:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

а также

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Я уверен, что он что-то делает, когда вы используете специальную библиотеку JavaScript, но кроме этого, проверяет ли он HTML или требуется по какой-то другой причине?

html forms input label Джефф
источник

Ответы:

578

<label>Тег позволяет нажать на этикетке, и он будет рассматриваться как нажав на соответствующий вход элемента. Есть два способа создания этой ассоциации:

Один из способов - обернуть элемент метки вокруг элемента ввода:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

Другой способ - использовать forатрибут, присвоив ему идентификатор связанного ввода:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Это особенно полезно для использования с флажками и кнопками, поскольку это означает, что вы можете установить флажок, щелкнув соответствующий текст, вместо того, чтобы нажимать на сам флажок.

Узнайте больше об этом элементе в MDN .

Barmar
источник
107
Обратите внимание, что атрибут for связан со входом атрибутом id, а атрибут name не должен совпадать. <label for = "theinput"> Введите здесь: </ label> <input type = 'text' name = 'notmatching' id = 'theinput'> По-прежнему будет работать
Glo
4
Нажатие на ярлык не всегда обрабатывается точно так же, как нажатие на связанный элемент. Например, в Chrome и Safari, щелкнув метку, которая связана selectтолько с меткой, фокусируется на выборе, а не на расширении параметров.
Эмиль Пелс
2
@EmilePels Что касается модели событий браузера, они эквивалентны. То, что вы описываете, - это больше об интерфейсе пользователя, обеспечиваемом обработкой выпадающих меню операционной системой, которая связана с самой мышью.
Бармар
3
Кажется важным упомянуть, что это очень важно для специальных возможностей и экранных ридеров, зачем активно их использовать.
coyotte508
1
Последние два часа я боролся с тем, чтобы каждый раз, когда я нажимал на ярлык в форме с атрибутом «for» для поля ввода, дважды щелкало тело. Я наконец понимаю, почему, даже если я использую stopPropagation по щелчку метки, почему щелчок тела все еще был поднят ... из-за щелчка, вызванного полем ввода после поведения, которое вы описали.
Самуил
53

forАтрибут связывает метку с элементом управления, как определено в описании labelв HTML 4.01 спецификации. Это подразумевает, среди прочего, что когда labelэлемент получает фокус (например, по нажатию), он передает фокус на связанный с ним элемент управления. Ассоциация между меткой и элементом управления также может использоваться речевыми пользовательскими агентами, которые могут дать пользователю возможность спросить, что такое ассоциированная метка, когда имеешь дело с элементом управления. (Ассоциация может быть не такой очевидной, как при визуальной визуализации.)

В первом примере в вопросе (без for) использование labelразметки не имеет логического или функционального значения - оно бесполезно, если вы ничего не делаете с ним в CSS или JavaScript.

Спецификации HTML не обязывают связывать метки с элементами управления, как это делают Рекомендации по доступности веб-контента (WCAG) 2.0. Это описано в техническом документе H44: Использование меток элементов для преобразования текста этикеток с элементами управления формой , что также объясняет , что неявные ассоциации (по вложенности , например , inputвнутри label) не так широко , как явное объединение с помощью forи idатрибуты,

Юкка К. Корпела
источник
10
+1 за разговор о семантических отношениях и о том, что они означают за пределами функциональных кликающих отношений.
ulty4life
Привет, у меня есть два элемента с одинаковым идентификатором, но в другом div, я добавил событие фокуса, используя label для, но во втором элементе он фокусируется на первом элементе. <html> <body> <div id = "first_div"> <label for = "name"> Name </ label> <input type = "text" id = "name"> </ div> <div id = "second_div "> <label for =" name "> Name </ label> <input type =" text "id =" name "> </ div> </ body> </ html>
LoveToCode
14

Короче говоря, это относится к idвходным данным, вот и все:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">
Уве Кейм
источник
6
Добавление for важно, даже если они смежные. Кажется, я вспоминаю, что у некоторых программ чтения с экрана для слабовидящих есть проблемы. Поэтому, если вы хотите быть дружелюбным к тем, кто, возможно, использует альтернативные браузеры / программы чтения с экрана, используйте этот метод.
bean5
3

Атрибут for <label>тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе.

Рахул Трипати
источник
7
Да, но что вы подразумеваете под "связать их вместе"? Они уже являются соседями по структуре HTML. Это то, что я не понимаю.
Джефф
1
FOR Указывает, к какому элементу формы привязана метка
Rahul Tripathi
2
@CengizFrostclaw jsfiddle.net/DmSGh --- попробуйте нажать на оба текста «Введите здесь» и посмотрите, что произойдет.
JJJ
1
@CengizFrostclaw: - Метка может быть привязана к элементу с помощью атрибута «for»
Рахул Трипати
1
Есть несколько приятных функций, например, когда вы используете радио-кнопки. Нажатие на ярлык фактически переключит переключатель. Это хорошая функция, когда вы пытаетесь использовать переключатели с пользовательским интерфейсом.
Алекс
0

Атрибут for показывает, что эта метка обозначает связанное поле ввода, либо флажок или переключатель, либо любое другое поле ввода данных, связанное с ним. например

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>
Pax
источник
0

Он обозначает любой входной параметр для forатрибута.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>
Развернуть фрагмент

pythag0ras_
источник