HTML тег
Элемент (от англ. «label» ‒ «метка, надпись») устанавливает связь между определённой меткой и элементом формы ( , ,
По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента , а не по самому элементу формы.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора >id должно быть эквивалентно значению атрибута for элемента :
При втором способе элемент формы помещается внутрь контейнера :
HTML тег label
Тег определяет метку для элемента .
Элемент на пользовательском уровне ничего особенного не генерирует. Тем не менее, он позволяет улучшить взаимодействие пользователя со страницей, так как при нажатии мышкой на метку активируется связанный с ней контрольный элемент.
Атрибут for тега должен иметь такое же значение, что и атрибут id соответствующего контрольного элемента. Это позволяет связать их друг с другом.
Метка может быть связана с контрольным элементом либо при помощи атрибута for, либо вложив этот контрольный элемент в тег .
Разница между HTML 4.01 и HTML5
Атрибут | Описание |
---|---|
for | Определяет к какому элементу относится метка |
form | Определяет к какой форме относится данный элемент |
Общие атрибуты
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 тег
Тег определяет текстовую метку для тега . Метка представляет собой обычный текст, кликнув по которому, пользователь может выбрать элемент формы. Она облегчает использование формы, так как в элементы формы не всегда удобно попасть курсором.
Синтаксис
Тег парный, текст размещается между открывающим ( ) и закрывающим ( ) тегами.
Тег также используется для определения горячих клавиш на клавиатуре и перехода на активный элемент подобно ссылкам.
Связать текстовую метку и форму, к которой она относится, можно двумя способами:
- установить идентификатор id внутри элемента и указать его имя в качестве атрибута for тега .
Для чего тег label в html?
Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст.
По второму предложению существует какой-то пример? Я не понимаю на какой текст надо нажимать и что при этом должно происходить? На какие значения должны меняться элементы формы?
- Вопрос задан более года назад
- 270 просмотров
простым языком коротко:
у каждого label есть аттрибут for, который должен совпадать с id инпута или селектора
если этот аттрибут совпадает, то пользователю не нужно целиться в чекбокс, достаточно нажать на текст, заключенный в тегах label, и значение чекбокса сменится на противоположный
Тег — элемент языка 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, который является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:
Если элемент LABEL и другой элемент находятся отдельно, используется атрибут for , значение которого должно совпадать со значением атрибута id соответствующего элемента:
Для каждого элемента LABEL создается один элемент формы. Иногда элементы удобно распределить по ячейкам таблицы, обеспечив тем самым выравнивание данных в форме.
accesskey . . Доступ к элементам формы с помощью горячих клавиш.
for . Идентификатор элемента, с которым следует установить связь.
Тег применяется для связывания (ассоциирования) своего содержимого с элементом формы. Обычно, чтобы активировать элемент формы или сфокусироваться на нем — необходимо нажать его мышкой или перейти с помощью клавиш быстрого доступа или табуляции (клавиша 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. А попрактиковаться с ними можно в нашем задачнике.