Вопрос:

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

html forms input label

168406 просмотра

5 ответа

5155 Репутация автора

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

<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 или требуется по какой-то другой причине?

Автор: jeff Источник Размещён: 25.08.2013 06:40

Ответы (5)


4 плюса

135579 Репутация автора

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

Автор: Rahul Tripathi Размещён: 25.08.2013 06:42

547 плюса

479232 Репутация автора

Решение

<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 Размещён: 25.08.2013 06:46

47 плюса

160695 Репутация автора

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

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

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

Автор: Jukka K. Korpela Размещён: 25.08.2013 07:17

14 плюса

0 Репутация автора

Короче говоря, это относится к 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">
Автор: user4133690 Размещён: 13.10.2014 08:40

0 плюса

38 Репутация автора

Атрибут 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 Размещён: 04.11.2019 12:28
Вопросы из категории :
32x32