Label html input: Тег | htmlbook.ru

Leave a Comment / Html / By /

HTML/Элемент label

Синтаксис

(X)HTML

<label> ... </label>

Описание

Элемент label (от англ. «label» ‒ «метка, надпись») устанавливает связь между меткой (текст, изображение) и элементом формы. В случае установления такой связи, например между содержимым данного элемента, и полем ввода, нажатие левой кнопки мыши на содержимое приводит к получению фокуса связанным элементом формы.

Примечание

Метки располагаемые внутри элемента label можно связать с элементом формы двумя различными способами:

  1. Вложив элемент формы в элемент label.
    <label>
 ...
 <input type="...">
 ...
</label>
  2. Присоединив элемент label к элементу формы с помощью переметра «for».
    <label for="IDname"> ... </label>
. ..
<input type="...">

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0—
3.2—
4.0117.9.1 The LABEL element
DTD: Transitional Strict Frameset
5.04.10.4 The label element
5.
1		4.10.4. The label element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

for
Связывает содержимое label элемента с элементом формы.
form
Присоединяет элемент к форме.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент label</title>
</head>
<body>
<h2>Пример использования элемента «label»</h2>
<form action=»/examples/php-scripts/coffee. php» method=»post»>
<fieldset> <legend><b>Какой кофе вы любите?</b></legend>
<label><input type=»radio» name=»coffee» value=»without»> просто кофе (без всего)</label>
<label><input type=»radio» name=»coffee» value=»milk»> с молоком</label><br>
<label><input type=»checkbox» name=»coffee_value» value=»сахаром»>с сахаром</label>
</fieldset>
<p><input type=»reset»> <input type=»submit»></p>
</form>

</body>
</html>

Элемент label

Всегда используйте label — Блог HTML Academy

Это перевод статьи Адама Сильвера — «Always use a label».

Иногда дизайнеры слишком сильно упрощают форму, убирая подпись к полю (примечание переводчика: здесь и далее имеется в виду тег label). Проблема в том, что минимализм не всегда означает простоту в использовании, а это, безусловно, и происходит с подписями.

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

1) Зрячие пользователи смогут видеть инструкции и будут знать, что делать. Без подписей к полям в лучшем случае это будет сложно.

Подпись к полю помогает зрячим пользователям понять, что нужно вводить

2) Незрячие пользователи смогут услышать инструкции благодаря использованию скринридеров. Без подписей к полям это будет невозможно.

Поле «Username» доступно для чтения скринридерами

3) Пользователи с моторными нарушениями смогут легче найти и активировать элементы с помощью мышки или пальца благодаря увеличению размеров активной области. Это происходит потому, что клик и нажатие пальцем по подписи работает так, будто пользователь кликнул по самому элементу управления.

Большая площадь поля помогает пользователям с моторными нарушениями активировать элемент

Но для меню выбора вида/размера/цвета/количества не нужны подписи, не так ли?

Нужны, и, к сожалению, довольно часто подписей нет в формах выбора товаров. ASOS страдает этой проблемой, как вы видите.

Форма выбора товаров на ASOS пренебрегает подписями у раскрывающихся списков

Вместо подписей здесь используется первое значение из раскрывающегося списка. Пока значение не выбрано это допустимо для хорошо видящих пользователей, но создаёт трудности для пользователей с нарушением зрения или моторных функций. Если значение выбрано, как в примере выше с выбором цвета, сложности возникают уже у всех типов пользователей.

House of Fraser показывает подпись к раскрывающемуся списку выбора количества вещей, улучшая удобство использования всем пользователям.

House of Fraser имеет подпись у поля с выбором количества вещей

Простая форма поиска не нуждается в подписях, не так ли?

Нуждается, но, к сожалению, формы поиска часто разрабатываются без подписей. В качестве примера можно посмотреть на Selfridges.

Форма поиска Selfridges пренебрегает подписью к полю

Чтобы объяснить назначение формы, вместо подписи здесь используется подсказка для поля и кнопка отправки (иконка лупы). Но это чересчур сложно для использования людьми с ограниченными возможностями — и, конечно — подсказки полей не должны использоваться как замена подписям.

Smashing Magazine показывает, как использование подписей может быть красивым и функциональным одновременно.

Форма поиска Smashing Magazine использует подпись у поля

Итог

Использование подписей к полям может нести дополнительные сложности в дизайне, но уход от этих проблем — это не решение. Принимайте этот вызов, и не стоит чересчур упрощать. И конечно, всегда используйте тег label.

HTML-форма label Атрибут

❮ HTML-тег

Пример

Элемент


 


 

 
 



Попробуйте сами »

Определение и использование

Атрибут формы определяет форму, которой принадлежит метка.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

Поддержка браузера

Атрибут
форма Да Да Да Да Да

Синтаксис

Значение Описание
form_id Указывает элемент формы, которому принадлежит элемент

❮ Тег HTML


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры0092 Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
3 9002 FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Простое руководство с примером кода »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент
Учебное пособие по веб-формам HTML для начинающих кодировать
Что означает Что делает в HTML: простое руководство с примером кода делать?
Элемент
Display
inline

Contents

  • 1 Code Example
  • 2 Using Labels Properly
  • 3 Labels and Usability
  • 4 Browser Support for label
  • 5 Attributes of label

Code Example 

 <форма>

Любимое животное

Правильное использование меток

Элемент является одним из нескольких элементов, которые существуют и имеют смысл только по отношению к другому элементу.

В случае метка должна быть связана с полем формы (обычно это элемент того или иного вида.

Чтобы работал правильно, он должен включать атрибут for , который идентифицирует , с которым он связан. Значение атрибута для должно соответствовать id (не name ) элемента .

(Отправка формы зависит от имени , а сопряжение меток зависит от id . Вот почему вы часто будете видеть элементов с одинаковым значением в обоих атрибутах. И если — это флажок, вы можете увидеть то же значение в атрибуте value и в содержимом элемента .)

Имя

 
Вы согласны с условиями?

Вы согласны с условиями?

Согласен

Метки и удобство использования

Конечно, возможно не использовать элемент , а просто поместить немаркированный текст поверх или рядом с полем формы. Но это не очень хорошая идея. Наличие парной метки — это больше, чем просто хорошая семантика, это хорошее удобство использования. С правильно размеченной меткой пользователь может щелкнуть (или коснуться) метки, чтобы перевести фокус на элемент или выбрать его. Это умеренно полезно на обычных настольных компьютерах и ноутбуках, но на мобильных телефонах с сенсорным экраном это имеет огромное значение.

 





 Можете ли вы щелкнуть этот ярлык, чтобы выбрать?

<

div class=»render»> Щелкните по этой метке, чтобы выбрать.

Можете ли вы щелкнуть эту метку, чтобы выбрать?

Таким образом, помимо простого удобства использования, вы также хотите активно работать над тем, чтобы сделать свой веб-сайт доступным для слепых и слабовидящих — или для всех, кто может использовать программу чтения с экрана для работы в Интернете.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *