Лучше обернуть тег label вокруг элемента формы или использовать атрибут "for" в HTML?
Я знаю, что вы можете использовать оба, но лучше ли использовать один поверх другого? Если так, то почему?
Пример атрибута "for":
<input type="text" id="male"><label for="male">Male</label>
Пример обтекания:
<label>Age:<input type="text"></label>
6 ответов
Семантически обе возможности одинаковы. Но в зависимости от того, какой макет вы хотите, у этих двух возможностей есть свои преимущества и недостатки. Например, если вы хотите, чтобы метка находилась в совершенно другом месте, не имеет смысла помещать ввод в метку. Но если вы хотите иметь возможность создавать эффект наведения с помощью css, который устанавливает, например, фон как для метки, так и для области вокруг ввода, было бы лучше поместить ввод в метку.
В соответствии с http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
некоторые вспомогательные технологии неправильно обрабатывают неявные метки
Поэтому, когда вы переносите текст, вы также можете указать атрибут for для элемента label.
Обертка позволяет бросить for атрибут, который, в свою очередь, позволяет опустить атрибут `id'в элементе ввода. Отлично подходит для шаблонов или любых форм, которые необходимо использовать в нескольких экземплярах на странице.
Это не важно Оба выполняют одни и те же вещи с точки зрения определения отношений между меткой и полем.
Внедрение ввода в метку также влияет на поведение обтекания. <label><checkbox/>Value with spaces</label> будет упакован как единое целое по умолчанию. В то время как <checkbox id="check"/><label for="check">Value with spaces</label> будет переносить текст с пробелами на пробелы и переносить метку на новую строку, но оставьте флажок выше.
Если это что-то значит, фреймворки вроде ASP.NET ставят label элемент рядом с input/select/textarea элементы и использовать label"s for приписывать.