label в HTML

HTML тег

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

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

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора >id должно быть эквивалентно значению атрибута for элемента :

При втором способе элемент формы помещается внутрь контейнера :

HTML тег label

Тег определяет метку для элемента .

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

Атрибут for тега должен иметь такое же значение, что и атрибут id соответствующего контрольного элемента. Это позволяет связать их друг с другом.

Метка может быть связана с контрольным элементом либо при помощи атрибута for, либо вложив этот контрольный элемент в тег .

Разница между HTML 4.01 и HTML5

Общие атрибуты

HTML пример

Две кнопки выбора с текстовыми метками:

CSS стили по умолчанию

Большинство браузеров будут отображать тег со следующими стилями

HTML :: Универсальный тег , назначение тега

Тег и его атрибуты

Как говорилось выше, элемент ‘form’ является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент ‘input’ , поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом (от англ. input – ввод), а его назначение определяется его атрибутом type , который может принимать целый ряд значений:

• «button» – создает кнопку;
• «checkbox» – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
• «file» – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
• «hidden» – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
• «image» – создает графическую кнопку для отправки данных формы на сервер;
• «password» – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
• «radio» – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
• «reset» – создает кнопку ‘Сброс’ для возврата всех данных формы в исходное состояние;
• «submit» – создает обычную текстовую кнопку для отправки данных формы на сервер;
• «text» – создает текстовое поле для ввода символов с клавиатуры.

Использование некоторых из перечисленных разновидностей элемента ‘input’ показано в примере 6.3.

Пример 6.3. Использование элемента ‘input’

Как видим, элемент ‘input’ действительно универсальный. И это без учета того, что в HTML 5 был добавлен еще целый ряд значений для атрибута type , которые можно посмотреть в нашем справочнике здесь.

Кроме атрибута type у элемента ‘input’ присутствует весьма внушительное количество дополнительных атрибутов. Перечислим их.

• accept – используется для поля отправки файлов на сервер ( type=»file» ) и устанавливает для него фильтр на типы отправляемых файлов. В качестве значений принимает через запятую список MIME -типов разрешенных для отправки файлов. Если файл не соответствует фильтру, то пользователь не увидит его в окне выбора файлов. Если атрибут не применяется, то в окне выбора файлов будут показываться все файлы, доступные для просмотра.
• autocomplete – его действие аналогично действию одноименного атрибута элемента ‘form’ и переопределяет его в случае необходимости.
• autofocus – автоматически устанавливает фокус в данное поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
• checked – применяется для переключателей и предварительно активирует их. Для радиокнопок ( type=»radio» ) атрибут можно использовать только для одного элемента группы, для переключателей в виде флажков ( type=»checkbox» ) атрибут можно использовать хоть для всех элементов сразу. Атрибут по умолчанию выключен и значений не принимает.
• disabled – блокирует доступ к полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
• form – связывает данное поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута >formnovalidate – его действие аналогично действию одноименного атрибута элемента ‘form’.
• formaction – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• formenctype – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• formmethod – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• formtarget – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• src – в качестве значения принимает абсолютный или относительный путь к файлу изображения. Используется для графической кнопки ( type=»image» ).
• height – задает высоту графической кнопки ( type=»image» ).
• width – задает ширину графической кнопки ( type=»image» ).
• alt – устанавливает альтернативный текст для графической кнопки ( type=»image» ).
• list – связывает данное поле с элементом ‘datalist’ по ее идентификатору, позволяя подключить к полю варианты автодополнения. В качестве значения принимает соответствующее значение атрибута >’datalist’ , с которым необходимо связать данное поле.
• maxlength – устанавливает максимально допустимое число символов, которые можно ввести в поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
• minlength – устанавливает минимальное число символов, которые нужно ввести в поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
• multiple – позволяет выбрать для отправки на сервер сразу несколько значений, например, файлов для поля с type=»file» . Атрибут по умолчанию выключен и значений не принимает.
• name – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение (см. пример 6.4).
• placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
• readonly – указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
• required – устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
• size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение «20» . Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
• value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей ( type=»radio» и type=»checkbox» ), а для кнопок устанавливает текстовую надпись.

И даже сейчас некоторые атрибуты элемента ‘input’ не были перечислены. Полный список атрибутов можно посмотреть в нашем справочнике здесь.

Если для элемента ‘form’ указаны атрибуты novalidate , action , enctype , method , target и др., то соответствующие атрибуты элементов формы в случае применения переопределяют их.

Использование некоторых из перечисленных атрибутов элемента ‘input’ показано в примере 6.4. А попрактиковаться с ними можно в нашем задачнике.

HTML тег

Тег определяет текстовую метку для тега . Метка представляет собой обычный текст, кликнув по которому, пользователь может выбрать элемент формы. Она облегчает использование формы, так как в элементы формы не всегда удобно попасть курсором.

Синтаксис

Тег парный, текст размещается между открывающим ( ) и закрывающим ( ) тегами.

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

Связать текстовую метку и форму, к которой она относится, можно двумя способами:

1. установить идентификатор id внутри элемента и указать его имя в качестве атрибута for тега .

Для чего тег label в html?

Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст.

По второму предложению существует какой-то пример? Я не понимаю на какой текст надо нажимать и что при этом должно происходить? На какие значения должны меняться элементы формы?

• Вопрос задан более года назад
• 270 просмотров

простым языком коротко:

у каждого label есть аттрибут for, который должен совпадать с id инпута или селектора
если этот аттрибут совпадает, то пользователю не нужно целиться в чекбокс, достаточно нажать на текст, заключенный в тегах label, и значение чекбокса сменится на противоположный

в HTML

Тег — элемент языка html, который является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:

Если элемент LABEL и другой элемент находятся отдельно, используется атрибут for , значение которого должно совпадать со значением атрибута id соответствующего элемента:

Для каждого элемента LABEL создается один элемент формы. Иногда элементы удобно распределить по ячейкам таблицы, обеспечив тем самым выравнивание данных в форме.

accesskey . . Доступ к элементам формы с помощью горячих клавиш.

for . Идентификатор элемента, с которым следует установить связь.

Полезности тега LABEL

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

Для связывания элемента формы и текста в теге используется параметр for , аргументом для которого служит идентификатор элемента, задаваемого атрибутом id (пример 15.1).

Пример 1. Синтаксис тега

Результат данного примера показан ниже.

Обязательно требуется, чтобы имя идентификатора ( id ) и значение параметра for совпадали. Именно в этом случае и осуществляется связь между текстом и элементом формы. Причем, не имеет значение, насколько близко они располагаются между собой на веб-странице. При нажатии на текст в окне браузера происходит переход к элементу формы. Исключением является браузер Opera, который игнорирует эту особенность, и переход при активизации текста не реализовывает.

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

Пример 2. Использование тега

Результат данного примера показан ниже.

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

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

Горячие клавиши

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

Пример 3. Использование параметра accesskey

Результат данного примера показан ниже.

Учтите, что параметр accesskey корректно работает только в браузере Internet Explorer. Кроме того, некоторые горячие клавиши уже используются браузером для своих целей.

в HTML

Тег — элемент языка html, который является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:

Если элемент LABEL и другой элемент находятся отдельно, используется атрибут for , значение которого должно совпадать со значением атрибута id соответствующего элемента:

Для каждого элемента LABEL создается один элемент формы. Иногда элементы удобно распределить по ячейкам таблицы, обеспечив тем самым выравнивание данных в форме.

accesskey . . Доступ к элементам формы с помощью горячих клавиш.

for . Идентификатор элемента, с которым следует установить связь.

в HTML

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

Фактически — можно ассоциировать с любыми элементами формы, например: , , и т.д. А так как он является инлайн-тегом, то его не обязательно размещать внутри формы, а можно просто указать внутри любого элемента, который может содержать данный тип.

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

Атрибуты

• for — Ассоциирует элемент формы с содержимым тега .

• accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
• class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
• dir — указывает направление текста внутри элемента.
• id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
• lang — указывает язык, на котором написан текст внутри HTML-элемента.
• style — необходим для применения встроенных стилей CSS к тегу.
• tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
• title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Не может содержать: другие теги на любом уровне вложенности.

Открывающий тег: необходим. Закрывающий тег: необходим.

HTML :: Универсальный тег , назначение тега

Тег и его атрибуты

Как говорилось выше, элемент ‘form’ является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент ‘input’ , поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом (от англ. input – ввод), а его назначение определяется его атрибутом type , который может принимать целый ряд значений:

• «button» – создает кнопку;
• «checkbox» – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
• «file» – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
• «hidden» – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
• «image» – создает графическую кнопку для отправки данных формы на сервер;
• «password» – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
• «radio» – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
• «reset» – создает кнопку ‘Сброс’ для возврата всех данных формы в исходное состояние;
• «submit» – создает обычную текстовую кнопку для отправки данных формы на сервер;
• «text» – создает текстовое поле для ввода символов с клавиатуры.

Использование некоторых из перечисленных разновидностей элемента ‘input’ показано в примере 6.3.

Пример 6.3. Использование элемента ‘input’

Как видим, элемент ‘input’ действительно универсальный. И это без учета того, что в HTML 5 был добавлен еще целый ряд значений для атрибута type , которые можно посмотреть в нашем справочнике здесь.

Кроме атрибута type у элемента ‘input’ присутствует весьма внушительное количество дополнительных атрибутов. Перечислим их.

• accept – используется для поля отправки файлов на сервер ( type=»file» ) и устанавливает для него фильтр на типы отправляемых файлов. В качестве значений принимает через запятую список MIME -типов разрешенных для отправки файлов. Если файл не соответствует фильтру, то пользователь не увидит его в окне выбора файлов. Если атрибут не применяется, то в окне выбора файлов будут показываться все файлы, доступные для просмотра.
• autocomplete – его действие аналогично действию одноименного атрибута элемента ‘form’ и переопределяет его в случае необходимости.
• autofocus – автоматически устанавливает фокус в данное поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
• checked – применяется для переключателей и предварительно активирует их. Для радиокнопок ( type=»radio» ) атрибут можно использовать только для одного элемента группы, для переключателей в виде флажков ( type=»checkbox» ) атрибут можно использовать хоть для всех элементов сразу. Атрибут по умолчанию выключен и значений не принимает.
• disabled – блокирует доступ к полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
• form – связывает данное поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута >formnovalidate – его действие аналогично действию одноименного атрибута элемента ‘form’.
• formaction – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• formenctype – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• formmethod – его действие аналогично действию одноименного атрибута элемента ‘form’ . Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• formtarget – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image» .
• src – в качестве значения принимает абсолютный или относительный путь к файлу изображения. Используется для графической кнопки ( type=»image» ).
• height – задает высоту графической кнопки ( type=»image» ).
• width – задает ширину графической кнопки ( type=»image» ).
• alt – устанавливает альтернативный текст для графической кнопки ( type=»image» ).
• list – связывает данное поле с элементом ‘datalist’ по ее идентификатору, позволяя подключить к полю варианты автодополнения. В качестве значения принимает соответствующее значение атрибута >’datalist’ , с которым необходимо связать данное поле.
• maxlength – устанавливает максимально допустимое число символов, которые можно ввести в поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
• minlength – устанавливает минимальное число символов, которые нужно ввести в поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
• multiple – позволяет выбрать для отправки на сервер сразу несколько значений, например, файлов для поля с type=»file» . Атрибут по умолчанию выключен и значений не принимает.
• name – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение (см. пример 6.4).
• placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
• readonly – указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
• required – устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
• size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение «20» . Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
• value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей ( type=»radio» и type=»checkbox» ), а для кнопок устанавливает текстовую надпись.

И даже сейчас некоторые атрибуты элемента ‘input’ не были перечислены. Полный список атрибутов можно посмотреть в нашем справочнике здесь.

Если для элемента ‘form’ указаны атрибуты novalidate , action , enctype , method , target и др., то соответствующие атрибуты элементов формы в случае применения переопределяют их.

Использование некоторых из перечисленных атрибутов элемента ‘input’ показано в примере 6.4. А попрактиковаться с ними можно в нашем задачнике.