Что такое атрибут HTML for = «» в <label>?

Я видел это в jQuery - для чего он нужен?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Для того, чтобы ассоциировать <label>с <input>элементом, вы должны дать <input>в idатрибут. <label>Тогда нужен forатрибут, valueтакой же , как вход - х id:

<label for="username">Click me</label>
<input type="text" id="username">

forАтрибут ассоциирует <label>с <input>элементом; что дает некоторые основные преимущества:
1. Текст метки не только визуально связан с соответствующим вводом текста; он тоже программно связан с ним. Это означает, что, например, программа чтения с экрана будет считывать метку, когда пользователь сосредоточен на вводе формы, что упрощает пользователю вспомогательных технологий понимание того, какие данные следует ввести.
2. Вы можете щелкнуть соответствующую метку, чтобы сфокусировать / активировать ввод, а также сам ввод. Эта увеличенная область действия дает преимущество любому, кто пытается активировать ввод, включая тех, кто использует устройство с сенсорным экраном.

В качестве альтернативы , вы можете гнездо <input>непосредственно внутри <label>, в этом случае forи idатрибуты не нужны , потому что ассоциация неявная:

<label>Click me <input type="text"></label>

Примечания:
Один inputможет быть связан с несколькими ярлыками.
Когда <label>щелкают или касаются элемента и он связан с элементом управления формы, результирующее событие щелчка также возникает для связанного элемента управления.

Проблемы доступности

Не размещайте интерактивные элементы, такие как якоря или кнопки, внутри метки. Это затрудняет активацию ввода формы, связанной с меткой.

Заголовки

Размещение элементов заголовка в элементе <label>мешает работе со многими видами вспомогательных технологий, поскольку заголовки обычно используются в качестве средства навигации. Если текст метки необходимо изменить визуально, используйте <label>вместо этого классы CSS, примененные к элементу.
Если форме или разделу формы нужен заголовок, используйте <legend>элемент, помещенный в <fieldset>.

Кнопки

<input>Элемент с type="button"декларацией и действительного значения атрибута не нужен ярлык , связанный с ним. Это может фактически повлиять на то, как вспомогательные технологии анализируют ввод кнопок. То же самое и с <button>элементом.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

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

Например:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

Теперь, когда пользователь щелкает мышью по usernameтексту, браузер автоматически переводит фокус в соответствующее inputполе. Это также работает с другими элементами ввода, такими как <textbox>и <select>.

Цитата из спецификации :

Этот атрибут явно связывает определяемую метку с другим элементом управления. Если он присутствует, значение этого атрибута должно быть таким же, как значение атрибута id какого-либо другого элемента управления в том же документе. При отсутствии определяемая метка связана с содержимым элемента.

Что касается того, почему ваш вопрос помечен jQuery и где вы видели, что он используется в jQuery, я не могу ответить, потому что вы не предоставили много информации.

Возможно, он использовался в селекторе jQuery для поиска соответствующего элемента ввода с учетом экземпляра метки:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Я чувствую необходимость ответить на этот вопрос. У меня было такое же замешательство.

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Я изменил атрибут for на ярлыке «мужской» на «женский». Теперь, если вы нажмете «мужской», будет проверено «женское» радио.

Просто как тот.

быстрый пример:

<label for="name">Name:</label>
<input id="name" type="text" />

for=""тег LET фокус ввода при нажатии на ярлык , а также.

Вы используете его с ярлыками, чтобы сказать, что два объекта принадлежат друг другу.

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

Это также означает, что нажатие на эту метку изменит значение флажка.

FYI - если вы находитесь в среде машинописного текста, например,

<label for={this.props.inputId}>{this.props.label}</label>

вам нужно использовать htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</label>

он используется для <label>элемента

он используется с флажком типа ввода или повторением для выбора при нажатии на ярлык

рабочая демонстрация

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

используется в <label>тексте для html

например.

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

Он связывает метку с элементом ввода. Теги HTML предназначены для передачи особого значения пользователям различных категорий. Вот для чего предназначена этикетка:

1. Для людей с двигательными нарушениями (также для обычных пользователей мыши) : можно щелкнуть правильно используемые теги меток, чтобы получить доступ к соответствующему элементу управления формы. Например. Вместо того, чтобы специально устанавливать флажок, пользователь может щелкнуть ярлык, который будет легче нажимать, и переключить флажок.
2. Для пользователей с ослабленным зрением : пользователи с ослабленным зрением используют средства чтения с экрана, которые считывают связанный тег ярлыка всякий раз, когда элемент управления формы находится в фокусе. Это помогает пользователям узнать этикетку, которая в противном случае была бы для них невидимой.

Подробнее о маркировке -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Это атрибут <label>тега: http://www.w3schools.com/tags/tag_label.asp