HTML & CSS: как не надо
Почему? # Инпуты, спрятанные таким образом, становятся полностью недоступны для скринридеров и навигации с клавиатуры Как это увидеть? # Установите фокус в первое поле и перемещаясь по форме с помощью Tab и стрелок попробуйте выбрать цвет кота: Ничего не получится, с клавиатуры выбор цвета недоступен. А как надо? # Для скрытия инпутов используйте класс .visuallyhidden :
.visuallyhidden position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; >Итого
- Не используйте для разметки групп инпутов div и h1-h6 , есть более подходящие теги: fieldset и legend .
- Не используйте legend вместо label для одиночного поля, ему не нужны fieldset и legend , достаточно div и label .
- Не используйте display: none для скрытия инпутов, они становятся недоступны для скринридеров и навигации с клавиатуры. Скрывайте с помощью .visuallyhidden
Верстаем формы :: Хранитель заметок
Красивые и ровные формы очень легко сверстать без использования таблиц.
Предположим, что все поля будут выровнены по левому краю, а надписи к ним располагаются слева и выровнены по правому краю.
Структура HTML, например, может быть такой:
Не важно где будут находиться надписи в коде — до или после поля, так как они будут абсолютно позиционироваться с левой стороны. Задать отступ, где расположиться надпись можно либо с помощью свойства margin-left у элемента input, либо с помощью свойства padding-left у элемента div . Второй способ, на мой взгляд, предпочтительнее, так как комментарии к полю (элемент p ) будут естественным образом выравниваться относительно него и не потребуется дополнительного оформления.
div.singleline < white-space: nowrap; >label < line-height: 1em; text-align: right; width: 160px; left: 0; top: 2px; position: absolute; >input, textarea < width: 200px; >input.short < width: 6em; >input.compact < width: 3em; >input.checkbox < width: auto; margin: 0; border: 0 none; >label.checkbox < width: 260px; top: 0; left: 190px; text-align: left; >div < padding-bottom: 0.3em; padding-left: 170px; position: relative; >p
Для таких элементов как checkbox или radio естественно будет расположение надписи справа от него. По этому для таких случаев элементу label нужно добавить класс checkbox . В качестве альтернативного варианта, можно назначить ему стиль position: relative. В этом случае будет важно, чтобы в коде надпись следовала после поля.
Напоминаю, что форма отправляет только поля, у которых указан атрибут name. А элементы label ссылаются на поля по id.
Ещё заметки со схожей тематикой
- Подключение Яндекс.Карт после загрузки страницы
- Подсветка области клика на iOS
- Нелинейная шкала слайдера
Категории
Коментарии к заметке
Владимир Старков , 24 июл 2012
Можно уменьшить количество кода и используемых идентификаторов если обернуть одиночный input в label : Например так:
Владимир Кузнецов , 24 июл 2012
Если я правильно понял, то div ты предлагаешь заменить на label , а label , в свою очередь, на span ? А в чём тут выигрыш? У меня периодически возникает желание оборачивать в label поле ввода вместе с подписью, но почему-то всегда возникают аргументы против. Скорее всего тегу придётся назначить display: block , чтобы поля были на разных строках. Это позволит кликом по любому месту блока, а не только по надписи, устанавливать фокус в поле ввода. Где-то это может оказаться «фичей», но по факту это скорее будет «багом».
Владимир Старков , 25 июл 2012
«Если я правильно понял, то div ты предлагаешь заменить на label, а label, в свою очередь, на span? А в чём тут выигрыш?»
Отпадает необходимость использовать идентификаторы для полей ввода и синхронизировать их с аттрибутом for , а также уменьшается вероятность дублирования идентификаторов.
«Скорее всего тегу придётся назначить display: block, чтобы поля были на разных строках. Это позволит кликом по любому месту блока, а не только по надписи, устанавливать фокус в поле ввода. Где-то это может оказаться «фичей», но по факту это скорее будет «багом».
Так как в вёрстке форм очень часто используется float , то одним из решений будет как раз использование этого факта в своих целях решения описанной проблемы: HTML:
CSS:
form < overflow: hidden; >label < float: left; clear: both; >input < vertical-align: middle; >.label < float: left; display: block; width: 100px; text-align: right; padding-right: 10px; >.label::after
Владимир Кузнецов , 25 июл 2012
Соглашусь, годное решение вышло. Я в то время, когда писал эту заметку, пытался сделать некоторое универсальное решение для любых форм в панеле управления хостингом. От этого появилась избыточность в разметке. Кстати, для форм, которым нужна валидация, я там добавляю ещё одну обёртку, чтобы показать иконку результата. Похоже, твоё решение с плавающими лейблами очень хорошо подходит для этого и дополнительная обёртка так же становится не нужна.
Отпадает необходимость использовать идентификаторы для полей ввода и синхронизировать их с аттрибутом for , а также уменьшается вероятность дублирования идентификаторов.
По-моему, это надуманная проблема. Если id вставляется руками, то можно придумать правила именования, аналогичные БЭМу, например. Если разметка формируется каким-то шаблонизатором, то обеспечить уникальность значений вообще легче лёгкого.
© 2009–2023 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.
Копирование материалов данного блога допускается только с разрешения автора.
Зачем input оборачивать в label
Тег устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .
Синтаксис
Текст Атрибуты
accesskey Доступ к элементам формы с помощью горячих клавиш. for Идентификатор элемента, с которым следует установить связь.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег LABEL Браузеры
IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега .
IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.
Когда стоит вкладывать input в label, а когда нет?
Не раз замечал у различных it ютуберов, что кто-то вкладывает в label сам input, кто-то нет и оборачивает оба тэга в div, дак как же все же верно? Если оба варианта правильно, то в каких случаях надо вкладывать, а в каких нет
- Вопрос задан более двух лет назад
- 9283 просмотра
Комментировать
Решения вопроса 2
Валерий Кулаков @KulakovAngel
Full Stack Developer (Node.JS)
В целом, с точки зрения правильности/валидности кода, как заметил Danny Arty, разницы нет. В примитивных случаях верстки визуальной разницы тоже особо не наблюдается.
Но если нужно сверстать что-то посложнее, сделать более интересное оформление, разница появляется, поскольку нам нужно взаимодействовать с разным порядком и вложенностью различных тегов. Сравните:
1. В таком варианте у нас имеется два рядом расположенных тега. Чтобы выбрать второй, идущий после первого, можно использовать «соседский» селектор «+» (Label идет сразу после Input). Данный вариант более «независимый», так как мы можем менять местами input и label, и даже разносить их на удаленное расстояние.
input + label - input плохо стилизуется
- label обычно ничем не примечателен в отличие от input, который информативен (содержит, например, атрибут type).
label > input 
А теперь представим, что нам нужно сверстать нечто подобное на основе (см. картинку):
Как это реализовать? Для label соорудим «:before» и «:after», которым дадим форму скругленного прямоугольника и круга (который, к тому же будет перемещаться).
Здесь второй вариант нам явно не подойдет, так как мы бы хотели в зависимости от состояния checkbox (.checkbox:checked) изменять родственный ему label:before (изменять цвет, перемещать).
Если хотите взглянуть подробнее на код, пожалуйста:
- input и label могут быть разнесены физически (находится в разных местах документа)
- label может идти после input, что дает нам возможность обратиться в CSS от второго к первому