Как сделать чтобы label был над input
Как без JS и таблиц сделать несколько input с label над ними?
Как при помощи блочных элементов прилепить лейблы к input полям?
Как на примере, но ровнее �� 
Если использовать <br /> и свойство float и закрепить поля внутри <label> , то следующий блок начинается на уровне <input> , а хотелось бы на уровне лейбла.
Простой лейбл с инпутом
Если вы пишите лейбл с инпутом только так, статья для вас.
Предлагаю заверстать форму, где инпутов много.
Фильтр компьютеров в юлмарте
Готов поспорить, что вы устанете придумывать айди шестидесяти семи инпутам. Еще придется следить, чтобы айди не повторялись, иначе будет ошибка:
Делайте проще
Айди придумывать не надо. А чтобы добавить новый инпут, достаточно просто скопировать код.
Подход удобен, чтобы стилизовать радиобаттоны или чекбоксы.
Чтобы написать конструкцию с помощью эммета, напишите label >input . Строка развернется так:
Но при нажатии на текст инпут не сработает. Это потому, что у лейбла стоит атрибут for . Даже если for пустой, он будет искать инпут с таким же айди. Чтобы сработало, удалите for .
label>input хороший прием, но смотрите по ситуации. Например, если делаете слайдер на CSS, смело отделяйте.
placeholder, ::placeholder и :placeholder-shown
Исчезающая подсказка в <input> и <textarea> HTML
Внутри пустого поля ввода <input> или <textarea> , то есть пока атрибут value пустой или отсутствует, показывается надпись приглушенного цвета из атрибута placeholder , которая пропадает при вводе первого символа. Она может быть образцом значения или кратким описанием ожидаемого формата. [whatwg.org]
Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег <label> заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить <label> непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]
Стилизация: изменить цвет placeholder CSS
Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder . Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition .
Поменять стиль поля ввода с placeholder CSS
Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder .
Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder .
Подсказка пропадает при получении фокуса <input type > и <textarea></textarea>
В конце длинного обрезанного подсказывающего текста поставить многоточие
Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.
<label>
Элемент <label> используется для создания подписи к элементу формы:
Пример
Скопировать ссылку «Пример» Скопировано
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Как понять
Скопировать ссылку «Как понять» Скопировано
На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент <label> .
Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан <label> , скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.
Чтобы связать <label> с элементом формы можно пойти двумя путями:
- Задаём элементу формы атрибут id . Такое же значение задаём атрибуту for тега <label> .
- Оборачиваем элемент формы в тег <label> . В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for , становится связанным с нашим <label> . Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button> , <input> , <meter> , <output> , <progress> , <select> и <textarea> .
Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id , то он уже не будет учитываться.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Один элемент формы может быть связан с несколькими <label> , но один <label> может быть связан ровно с одним элементом формы.
�� При клике на <label> событие клика вызывается также и на связанном элементе формы.
�� По умолчанию <label> является строчным элементом и стилизуется аналогично <span> или <a> .
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
�� Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label> , то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! ��
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.
�� При нажатии на лейбл, связанный с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Какая разница между legend , caption и label с точки зрения доступности? Что между ними общего?
Скопировать ссылку «Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Плавающие метки
Создавайте красивые простые метки для полей формы, плавающие над полями ввода.
Пример
Оберните пару элементов <input > и <label> в .form-floating , чтобы включить плавающие метки с полями текстовой формы Bootstrap. placeholder требуется для каждого <input> , поскольку наш метод плавающих меток только для CSS использует псевдоэлемент :placeholder-shown . Также обратите внимание, что <input> должен идти первым, чтобы мы могли использовать селектор-брат (например,
Когда уже определено значение value , <label> автоматически подстраиваются под свое плавающее положение.
Стили проверки формы также работают должным образом.
Текстовые области
По умолчанию, <textarea> с .form-control будет той же высоты, что и <input> .
Чтобы установить произвольную высоту для Вашего <textarea> , не используйте атрибут rows . Вместо этого установите явную height (встроенную или через собственный CSS).
Элемент выбора
За исключением .form-control , плавающие метки доступны только для .form-select . Они работают таким же образом, но в отличие от <input> , они всегда будут показывать <label> в плавающем состоянии. Выборки с size и multiple не поддерживаются.
Открытый текст только для чтения
Плавающие метки также поддерживают .form-control-plaintext , который может быть полезен для переключения с редактируемого <input> на значение открытого текста, не влияя на макет страницы.
Как оформить поле ввода: советы и техники
Поле ввода HTML — простой и удобный элемент. Оно содержит более 30 вариантов атрибутов и является одним из самых надежных и заслуживающих изучения HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, приходится прилагать множество усилий, чтобы сделать их максимально удобными. Однако по ходу дела могут возникнуть различные сложности.
Базовая разметка
Помечать поля — отличная CSS-практика. В статье мы будем использовать вложенное поле внутри разметки метки, которое связывает метку и входной тег и устраняет необходимость указывать атрибут for для метки и id для ввода. К тому же это значительно упрощает стилизацию поля.
Другой альтернативой может послужить тег div в качестве обертки для таких элементов, как позиционирование, чтобы у них был общий родитель. Тег fieldset также может быть полезен в некоторых случаях. Данный метод позволяет расположить метку и ввод рядом и рассматривать их как единое целое.
Еще более короткая и допустимая альтернатива — использовать тег label с полем ввода внутри, но с атрибутом aria-label для читателей экрана, а затем применить псевдоэлемент CSS after для создания заполнителя.
Все три альтернативы подойдут для типа стиля, который будет использоваться в данной статье, поэтому выберите любой из них по своему предпочтению. Ниже показано, что все три параметра отображают одно и то же на странице. Результат отображен в браузере Chrome.
Для чего мы ставим метку после ввода? Данный шаг дает возможность использовать такие состояния ввода, как focus и т. д. Таким образом мы сможем настроить метку и контролировать ее внешний вид и анимацию. В качестве альтернативы можно использовать Javascript, но это выходит за рамки данного руководства.
Начальная настройка
Если вы не используете CSS-нормализаторы, вам все же стоит добавить такие элементы CSS, как border-box и box-sizing — они важны для данного руководства. Если в конечном итоге готовое поле выглядит не так, как в статье, то, скорее всего, вам понадобится следующий фрагмент кода:
Базовый стиль
Придадим данной области очень простой и минималистичный вид. Мы cможем улучшить его по ходу работы.
Для этого поля размер текста составит 14 пикселей. Элемент placeholder будет располагаться над полем ввода, поэтому необходимо установить относительное ( relative ) положение.
Стиль поля ввода в основном предназначен для его сброса, например для удаления внешнего вида и границ. Обратите внимание, что ширина поля ввода определяет размер элемента custom-field . Следующей важной деталью здесь является заполнение, которое нужно сопоставить при размещении элемента-заполнителя наверху.
Мы расположили заполнитель слева от 12 пикселей, чтобы он соответствовал заполнению ввода. Мы также использовали преобразование для выравнивания по вертикали -50% с верхней частью — 22 пикселя. Такое количество пикселей необходимо для создания идеально центрированного преобразования. Верхняя часть 50% также работает, но из-за сообщения об ошибке мы используем пиксели.
Чтобы текст заполнителя не был слишком длинным, ограничиваем его ширину максимальным 100%-значением минус 24 пикселя (сумма входных левых и правых отступов). Затем устанавливаем переполнение в виде многоточия.
Вы можете использовать переменную CSS, но, если вы измените заполнение ввода позже, это также повлияет на заполнитель.
Эффект всплывающей метки
Если нажать на поле, заполнитель уменьшиться и переместится в верхний левый угол над полем.
Чтобы добавить этот переход, нужно обозначить пространство над полем, куда будет перемещаться заполнитель. Оно также пригодится, если перед полем появится другой элемент. 20 пикселей на верхней границе — отличный вариант: метка остается центрированной, а граница выступает внешней частью.
Далее нужно узнать, когда ввод получает фокус, чтобы анимировать заполнитель. Воспользуемся сиблинг-комбинатором, чтобы выбрать заполнитель, а затем уменьшить шрифт, установить темный цвет и поднять его на 10 пикселей.
При наличии значения заполнитель должен оставаться в таком положении, даже если фокус отсутствует. Достичь этой цели можно несколькими способами. Например, использовать псевдокласс ввода :valid вместе с атрибутом required . Однако стоит учитывать, что это работает только для обязательных полей.
Другой альтернативой является использование Javascript для определения класса, вне зависимости от наличия значения. Однако данное руководство предназначено только для CSS, поэтому laceholder-shown вместе с атрибутом заполнителя может послужить отличным решением.
Чтобы получить хорошую анимацию, можно добавить переход наверх, размер шрифта и цвет в элемент-заполнитель.
Отображение сообщения об ошибке
В зависимости от формы, вам может потребоваться отобразить сообщение об ошибке. Для тега метки можно включить другой элемент для ошибки.
Важно помнить, что поле ошибки по ширине равно полю ввода и располагается под ним. Вы также можете проверить наличие ошибки и отобразить элемент сообщения об ошибке.
Вежливое значение показывает то, как следует сообщить пользователю об ошибке. Для данного сценария необходим такой атрибут, чтобы помочь с текстом mix ox внутри тега label.
Вывод
Данные техники можно применять для создания полей, при этом не затрагивая доступность и SEO. Разобраться в них более подробно вам поможет исходный код.