Как сделать чтобы label был над input
Тег (от англ. label — метка, ярлык) устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ).
Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента . При втором способе элемент формы помещается внутрь контейнера .
Демо¶
Синтаксис¶
1 2 3 4
input id="" />label for="" >Текстlabel > label>input /> Текстlabel> Закрывающий тег обязателен.
Атрибуты¶
Идентификатор элемента, с которым следует установить связь.
Также для этого элемента доступны универсальные атрибуты.
for¶
Синтаксис
label for="">. label> Значения
Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента .
Значение по умолчанию
Спецификации¶
- WHATWG HTML Living Standard
- HTML 5
- HTML 4.01 Specification
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
html> head> meta charset="utf-8" /> title>LABELtitle> head> body> form action="handler.php"> p>b>Выберите напитокb>p> p> input type="checkbox" id="check1" />label for="check1" >Коньякlabel >br /> input type="checkbox" id="check2" />label for="check2" >Арманьякlabel >br /> input type="checkbox" id="check3" />label for="check3" >Кальвадосlabel >br /> p> form> body> html> Как сделать чтобы label был над input
Тег устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .
Синтаксис
Текст Атрибуты
accesskey Доступ к элементам формы с помощью горячих клавиш. for Идентификатор элемента, с которым следует установить связь.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег LABEL Браузеры
IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега .
IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.
Как сделать чтобы label был над input
**HTML-элемент **представляет собой подпись к элементу пользовательского интерфейса.
| Категории контента | Общий поток, текстовый контент, интерактивный контент, элемент формы, ощутимый контент. |
|---|---|
| Допустимый контент | Текстовый контент, но без вложенных элементов label . Недопустимы другие оборачиваемые в label элементы помимо целевого. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, разрешающий текстовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLLabelElement (en-US) |
Атрибуты
ID labelable-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута for , становится labeled-* контролом для данного label .
Примечание: Элемент label может иметь как атрибут for, так и отдельный элемент управления, если атрибут for указывает на содержащийся элемент управления.
Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.
Примечание: Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения HTMLLabelElement.form (en-US); он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.
Примечания по использованию
- можно связать с элементом управления, поместив элемент управления внутри элемента или используя атрибут for . Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
- Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.
Как сделать label над input css
Для формированию подписи к текстовому полю ввода input обычно используется тэг label. Рассмотрим вариант в котором подпись поля смещена на границу. Пример на фото:
Исходный HTML файл:
class="input-box"> label name type="text"> .input-box /* родительский блок относительно которого будем формировать положение тега label */ position: relative; > input background: #fff; padding: 10px; /* закруглим края у поля ввода */ border-radius: 11px; width: 200px; > label position: absolute; /* смещение относительно родительского элемента 10px вверх от верхнего края и 10px влево */ top: -10px; left: 10px; background: #fff; padding: 0 5px; >