Пример обтекания:" />

Лучше обернуть тег label вокруг элемента формы или использовать атрибут «for» в HTML?

html label

21269 просмотра

6 ответа

Я знаю, что вы можете использовать оба, но лучше ли использовать один поверх другого? Если так, то почему?

Пример атрибута "for":

<input type="text" id="male"><label for="male">Male</label>

Пример обтекания:

<label>Age:<input type="text"></label>
Автор: James Gardiner Источник Размещён: 12.11.2019 09:49

Ответы (6)


30 плюса

Решение

Семантически обе возможности одинаковы. Но в зависимости от того, какой макет вы хотите, у этих двух возможностей есть свои преимущества и недостатки. Например, если вы хотите, чтобы метка находилась в совершенно другом месте, не имеет никакого смысла помещать ввод в метку. Но если вы хотите иметь возможность создавать эффект наведения с помощью css, который устанавливает, например, фон как для метки, так и для области вокруг ввода, было бы лучше поместить ввод в метку.

Автор: matthias.p Размещён: 16.08.2012 05:02

14 плюса

в соответствии с http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html

некоторые вспомогательные технологии неправильно обрабатывают неявные метки

Поэтому, когда вы переносите текст, вы также можете указать атрибут for для элемента label.

Автор: raycohen Размещён: 08.07.2015 07:54

5 плюса

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

Автор: frequent Размещён: 24.06.2013 09:29

2 плюса

Это не важно Оба выполняют одни и те же вещи с точки зрения определения отношений между меткой и полем.

Автор: DA. Размещён: 16.08.2012 04:57

1 плюс

Внедрение ввода в метку также влияет на поведение обтекания. <label><checkbox/>Value with spaces</label>будет упакован как единое целое по умолчанию. Принимая во внимание <checkbox id="check"/><label for="check">Value with spaces</label>, что текст будет переноситься с пробелами в пробелах, а метка будет переноситься на новую строку, но оставьте флажок выше

Автор: Adam Размещён: 10.05.2014 05:13

0 плюса

Если это что-то значит, фреймворки, такие как ASP.NET, помещают labelэлемент рядом с элементами input/ select/ textareaи используют атрибут labels for.

Автор: Tim S. Van Haren Размещён: 16.08.2012 05:01
Вопросы из категории :
32x32