Должен ли я поместить элементы ввода внутри элемента метки?

Question

Есть ли лучшая практика относительно вложенности элементов HTML label и input?

классическим способом:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

или

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

Answer 1

Я предпочитаю оборачивать элементы внутри моего <label>, потому что мне не нужно генерировать идентификаторы.

Я разработчик Javascript, и React или Angular используются для создания компонентов, которые могут быть использованы мной или другими пользователями Тогда будет легко дублировать идентификатор на странице, что приведет к странному поведению.

Answer 2

Ссылаясь на WHATWG ( Написание пользовательского интерфейса формы ), это не является неправильным, чтобы поместить поле ввода внутри метки. Это экономит ваш код, потому что атрибут for из label больше не нужен.