Что нестить внутрь label, а что нет?

Question

[dhat]

Встречаю советы, типо того, что "чекбоксы не нестить внутри label", или "label должен быть после чекбокса или радиобатона".
Где прочитать четко собранные в одном месте правила создания этих форм?
Документация это какая-то адская простыня, учитывая что мне нужен десяток четких правил, если они есть.
Может попадались статьи на эту тему?

Answer 1

[iBird Rose]

в плане валидации нет разницы, но когда label расположен после чекбокса - это дает стилизацию кастомных чекбосков в css без использования js. потому что можно обратиться через:
input:checked+label { ... }
а если чекбокс будет внутри label - ты не сможешь к нему обратиться.

Comments

[Андрей Верх]

Никто не мешает обернуть текст в span внутри label и обращаться к span'у

[dhat]

Спасибо за советы, буду пробывать оба варианта.

[dom1n1k]

Андрей Верх: Вариант с дополнительным спаном намного универсальнее. Как будто бы избыточность, но на практике никуда от нее не деться, потому что если сайт содержит хоть мало-мальски сложные формы, в них непременно встретится случай, когда label будет стоять до или его не будет вообще. Соответственно, минималистичный вариант не сработает.

Answer 2

[dom1n1k]

Вкладывать чекбокс или радио-баттон внутрь тэга label не только можно, но и нужно по возможности - тогда они связываются автоматически и label обретает кликабельность без атрибута for. Конечно, на практике это не всегда получается, приходится разносить в разные контейнеры и использовать for. В целом оба варианта совершенно нормальные и корректные - разница только в некотором удобстве.
Что касается порядка (до или после) - это вопрос дизайна и гайдлайнов, а не верстки. Как нарисовано (условно будем считать, что дизайнер у нас нормальный), так и нужно верстать.