SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик

Когда стоит вкладывать input в label, а когда нет?

Не раз замечал у различных it ютуберов, что кто-то вкладывает в label сам input, кто-то нет и оборачивает оба тэга в div, дак как же все же верно? Если оба варианта правильно, то в каких случаях надо вкладывать, а в каких нет
  • Вопрос задан
  • 102 просмотра
Решения вопроса 2
DanArst
@DanArst
Э, Ойboy!
Значения не имеет.
Просто есть два способа связи тега label с элементом формы/объектом:
1 - помещение объекта внутрь тега
<label><input type="text"> Пример 1</label>

2 - при помощи id
<input id="example-2" type="text"><label for="example-2">Пример 2</label>
Ответ написан
KulakovAngel
@KulakovAngel
Full Stack Developer (Node.JS)
В целом, с точки зрения правильности/валидности кода, как заметил Danny Arty, разницы нет. В примитивных случаях верстки визуальной разницы тоже особо не наблюдается.

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

1. В таком варианте у нас имеется два рядом расположенных тега. Чтобы выбрать второй, идущий после первого, можно использовать "соседский" селектор "+" (Label идет сразу после Input). Данный вариант более "независимый", так как мы можем менять местами input и label, и даже разносить их на удаленное расстояние.
<style>
  input + label {
    color: #ff0000;
  }
</style>

<input type="checkbox" id="checkbox" />
<label for="checkbox">чекбокс</label>


2. И второй вариант. Здесь мы не можем только средствами html/css обратиться "от input к label", так как не существует способа обратиться от ребенка к родителю (это можно, конечно, легко сделать через JS). Существуют селекторы потомков и соседей, но не родителей. Можно обратиться только от label к input, что дает мало преимуществ, так как
  1. input плохо стилизуется
  2. label обычно ничем не примечателен в отличие от input, который информативен (содержит, например, атрибут type).

<style>
  label > input  {
    outline-color: #ff0000;
    outline-style: double;
  }
</style>

<label>
  <input type="checkbox" />
  чекбокс
</label>


А теперь представим, что нам нужно сверстать нечто подобное на основе (см. картинку):
5ffea6239c1da641320430.png

Как это реализовать? Для label соорудим ":before" и ":after", которым дадим форму скругленного прямоугольника и круга (который, к тому же будет перемещаться).

Здесь второй вариант нам явно не подойдет, так как мы бы хотели в зависимости от состояния checkbox (.checkbox:checked) изменять родственный ему label:before (изменять цвет, перемещать).
Если хотите взглянуть подробнее на код, пожалуйста:

Таким образом, принципиальной разницы нет, но первый вариант (с id) более универсален, так как
  1. input и label могут быть разнесены физически (находится в разных местах документа)
  2. label может идти после input, что дает нам возможность обратиться в CSS от второго к первому

Надеюсь, ответил на Ваш вопрос.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы