Що означає атрибут "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 чи потрібна ще з якоїсь причини?

— Джефф
джерело

577

The <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 .

— Вармар
джерело

106

Зауважте, що атрибут for прив'язаний до вводу атрибутом id, а атрибут name не повинен відповідати. <label for = "theinput"> Введіть сюди: </label> <type type = 'text' name = 'notmatching' id = 'theinput'> Ще працюватиме

— Glo

4

Клацання мітки не завжди трактується так, як натискання на пов'язаний елемент. Наприклад, у Chrome та Safari, натискання мітки, яка асоціюється selectлише, зосереджує увагу на виборі, а не на розширенні параметрів.

— Еміль Пелс

2

@EmilePels Що стосується моделі подій браузера, вони є рівнозначними. Те, що ви описуєте, стосується більше інтерфейсу користувача, який забезпечується керуванням ОС, що випадає, яке прив'язується до самої миші.

— Бармар

3

Здається, важливо згадати, що це дуже актуально для доступності та читачів екранів, чому активно ним користуватися.

— coyotte508

1

Останні дві години я боровся з натисканням на тіло, що піднімається вдвічі щоразу, коли натискаю на мітку у формі з атрибутом "для" для поля введення. Я нарешті розумію, чому навіть якщо я використовую stopPropagation при натисканні ярлика, чому натискання тіла все ж було підняте ... через натискання, підняте полем введення, слідуючи описаній вами поведінці.

— Самуїл

52

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"> Ім'я </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label for =" 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

Додавання а є важливим, навіть якщо вони суміжні. Здається, я пам'ятаю, що у деяких читачів екрану для людей із вадами зору виникають проблеми в іншому випадку. Тож якщо ви хочете бути привітними для тих, хто, можливо, використовує альтернативні браузери / зчитувачі екранів, використовуйте цей метод.

— bean5

3

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

— Рахул Трипаті
джерело

7

Так, але що ви маєте на увазі під "зв'язувати їх разом"? Вони вже є сусідами в структурі HTML. Це я не розумію.

— jeff

1

FOR Вказує, до якого елемента форми пов’язана мітка

— Rahul Tripathi,

2

@CengizFrostclaw jsfiddle.net/DmSGh --- спробуйте натиснути обидва тексти "Введення сюди" і побачити, що відбувається.

— JJJ

1

@CengizFrostclaw: - Мітку можна прив’язати до елемента або за допомогою атрибута "для"

— Рахул Трипатхі

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>

Розгорніть фрагмент

— піфаг0рас_
джерело