Обязателен ли атрибут «for» в метке HTML, если целевой ввод вложен в метку?

Question

Я заметил, что тег HTML-метки не нуждается в атрибуте 'for', когда вы помещаете свой элемент ввода в элемент метки:

<label><input type="text">Last name</label>

Но мне было интересно, какова лучшая практика. Кто-нибудь может мне помочь с этим?

Спасибо!

Answer 1

Используется для удобства чтения с экрана и т. Д., Т. Е.

use_the_label_element_to_make_your_html_forms_accessible

Так что вы должны использовать это. А вот ссылка , чтобы убедить вас в важности доступа.

И вот небольшая история - обеспечение доступности вашего сайта может принести пользу всем пользователям - меня всегда удивляло количество усилий, которые гражданские власти предпринимали для обеспечения инвалидности на инвалидной коляске, пока у меня не появилась дочь и я не использовал коляску. Я думаю, что сайты следуют одному и тому же правилу - все выигрывают.

Извинения за полемику

Answer 2

Как W3 HTML 5.2 стандарт , так и WhatWG Living Standard (почти точно, цитата из последнего):

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

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

Answer 3

Вы можете включить input в свой label, и он связан с label, или, если по какой-то причине вам нужен элемент label в другом месте в DOM, вы можете указать его значение с помощью атрибут for. Использование атрибута for никогда не повредит, но в любом случае:)

Answer 4

Атрибут for не имеет большого значения при вводе текста, но очень полезен при вводе флажка, так как позволяет пользователям нажимать на ярлык и сам флажок:

<label for="chk">Checkbox</label><input type="checkbox" id="chk" />

Кроме того, ваш HTML-код нуждается в некоторой очистке - входной тег должен быть закрыт, и он не должен находиться внутри метки:

<label>Last Name</label><input type="text" />

или если вы хотите метку справа, то:

<input type="text" /><label>Last Name</label>