Що таке HTML для атрибута = “” в <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>, в цьому випадку атрибути forand idне потрібні, оскільки асоціація неявна:

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

Примітки.
Одну inputможна пов’язати з кількома мітками.
Коли <label>клацається або натискається a , і воно пов'язане з елементом керування формою, результуюча подія кліку також піднімається для пов'язаного елемента керування.

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

Не розміщуйте інтерактивні елементи, такі як кріплення або кнопки всередині ярлика. Це заважає людям активувати введення форми, пов’язане з міткою.

Заголовки

Розміщення елементів заголовка всередині <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>

Це також означає, що натискання на цю мітку змінить значення прапорця.

він використовується для <label>елемента

він використовується з прапорцем типу введення або повторним вибором для клацання ярлика

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

forАтрибут <label>тега повинен бути рівний атрибутом ідентифікатора відповідного елемента , щоб зв'язати їх разом.

FYI - якщо ви перебуваєте в середовищі машинопису, наприклад, наприклад

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

вам потрібно використовувати htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</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