Что делает атрибут "for" в теге HTML <label>?
168406 просмотра
5 ответа
Интересно, в чем разница между следующими двумя фрагментами кода:
<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 Источник Размещён: 13.11.2019 11:33Ответы (5)
547 плюса
<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:4647 плюса
for
Атрибут связывает метку с элементом управления, как определено в описании label
в HTML 4.01 спецификации. Это подразумевает, среди прочего, что, когда label
элемент получает фокус (например, по нажатию), он передает фокус на связанный с ним элемент управления. Ассоциация между меткой и элементом управления может также использоваться речевыми пользовательскими агентами, которые могут дать пользователю возможность спросить, что такое ассоциированная метка при работе с элементом управления. (Ассоциация может быть не такой очевидной, как при визуальной визуализации.)
В первом примере в вопросе (без for
) использование label
разметки не имеет логического или функционального значения - оно бесполезно, если вы ничего не делаете с ним в CSS или JavaScript.
Спецификации HTML не обязывают связывать метки с элементами управления, как это делают Рекомендации по доступности веб-контента (WCAG) 2.0. Это описано в техническом документе H44: использование элементов меток для связи текстовых меток с элементами управления формой , что также объясняет, что неявная ассоциация (например, вложенность input
внутри label
) не так широко поддерживается, как явная ассоциация через for
и id
атрибуты,
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">
Автор: user4133690
Размещён: 13.10.2014 08:40
4 плюса
Атрибут for <label>
тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе.
0 плюса
Атрибут for показывает, что эта метка обозначает связанное поле ввода или флажок или переключатель или любое другое поле ввода данных, связанное с ним. например
<li>
<label>{translate:blindcopy}</label>
<a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a>  
<input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
</li>
Автор: Pax
Размещён: 04.11.2019 12:28
Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- forms Как установить фокус на первый элемент ввода в форме HTML независимо от идентификатора?
- forms Как построить строку запроса с Javascript
- forms В форме Django как сделать поле доступным только для чтения (или отключенным), чтобы его нельзя было редактировать?
- forms Как получить ответ формы.
- forms Когда я должен использовать метод GET или POST? Какая разница между ними?
- input Пользовательский ввод и аргументы командной строки
- input Определить количество строк в текстовом файле
- input Канонический и неканонический ввод с терминала
- input Python читает один символ от пользователя
- input Автоматически использовать весь ввод в WPF
- label Почему «Система не может найти указанную метку партии» выбрасывается, даже если метка существует?
- label Find html label associated with a given input
- label Как использовать тег <label> в ASP.NET?
- label Как остановить Tkinter Frame от сжатия, чтобы соответствовать его содержанию?
- label Обновить метку при обработке в Windows Forms