С помощью какого тега нужно задавать подписи к полям формы

С помощью какого тега нужно задавать подписи к полям формы

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

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

Синтаксис

Текст  Текст

Атрибуты

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

Закрывающий тег

HTML5 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet. 





 
Lorem Ipsum Dolor Sit amet





 
  

Браузеры

IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега .

IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.

С помощью какого тега нужно задавать подписи к полям формы

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

Основной атрибут тега , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ) и кнопка с изображением ( image ). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

Атрибуты

accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. accesskey Переход к элементу с помощью комбинации клавиш. align Определяет выравнивание изображения. alt Альтернативный текст для кнопки с изображением. autocomplete Включает или отключает автозаполнение. autofocus Устанавливает фокус в поле формы. border Толщина рамки вокруг изображения. checked Предварительно активированный переключатель или флажок. disabled Блокирует доступ и изменение элемента. form Связывает поле с формой по её идентификатору. formaction Определяет адрес обработчика формы. formenctype Устанавливает способ кодирования данных формы при их отправке на сервер. formmethod Сообщает браузеру каким методом следует передавать данные формы на сервер. formnovalidate Отменяет встроенную проверку данных на корректность. formtarget Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. list Указывает на список вариантов, которые можно выбирать при вводе текста. max Верхнее значение для ввода числа или даты. maxlength Максимальное количество символов разрешенных в тексте. min Нижнее значение для ввода числа или даты. multiple Позволяет загрузить несколько файлов одновременно. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. pattern Устанавливает шаблон ввода. placeholder Выводит подсказывающий текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. size Ширина текстового поля. src Адрес графического файла для поля с изображением. step Шаг приращения для числовых полей. tabindex Определяет порядок перехода между элементами с помощью клавиши Tab. type Сообщает браузеру, к какому типу относится элемент формы. value Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx6

       
Ваше имя: 
Каким браузером в основном пользуетесь:  Internet Explorer  Opera  Firefox 
Комментарий 

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

Рис. 1. Вид элементов формы в браузере

Статьи по теме

• Адрес электронной почты
• Блокирование элементов форм
• Ввод чисел
• Веб-адрес
• Выбор цвета
• Загрузка файлов
• Защита от дурака
• Календарь
• Кнопки
• Однострочное текстовое поле
• Отправка данных формы
• Переключатели
• Подсказывающий текст
• Поле для пароля
• Поле для поиска
• Поле для телефона
• Поле с изображением
• Ползунок
• Проверка технологий HTML5
• Скрытое поле
• Сумасшедшие формы
• Флажки
• Шаблон ввода данных

Формы / Подпись для поля ввода

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег .

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег , вот так:

 Подпись

Надо отметить, что при оборачивании текста в тег он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Тег HTML метка, подпись элемента

Тег в HTML определяет метку (подпись) элемента формы.

Чаще всего с помощью тега HTML реализуется подпись таких элементов формы как чек-бокс и радио-кнопка , однако, при необходимости тег label можно применять и к другим элементам формы.

Клик на контент HTML тега приведет к вызову события клика по связанному элементу.

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

Тег относится к группе form. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

текст метки

элемент и текст метки

Отображение в браузере

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

 
 
 
  
Диаметр пиццы:
 
 
 
 
28 см 
 
 42 см 

 
 
Двойная порция сыра 

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

Тег
	Да	Да	Да	Да	Да

Атрибуты тега label

id элемента

Связывает метку с элементом.

Атрибут необходим только в случае расположения элемента вне HTML кода метки.

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

Указывает на форму, к которой относится метка. Используется, если тег находится вне HTML кода формы.

Если метка находится внутри тега , то использовать атрибут form не нужно.