Какой тег используют для разметки форм

Как структурировать HTML-формы

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

Уровень подготовки:	Основы компьютерной грамотности, и базовые знания HTML.
Цель:	Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.

Гибкость HTML форм делает их одной из самых сложных структур в HTML; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и доступность.

Элемент

Мы уже встречались с этим в предыдущей статье.

Предупреждение: Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера.

Элементы и

form> fieldset> legend>Fruit juice sizelegend> p> input type="radio" name="size" id="size_1" value="small" /> label for="size_1">Smalllabel> p> p> input type="radio" name="size" id="size_2" value="medium" /> label for="size_2">Mediumlabel> p> p> input type="radio" name="size" id="size_3" value="large" /> label for="size_3">Largelabel> p> fieldset> form> 

Примечание: вы можете найти этот пример в fieldset-legend.html (также посмотрите на результат).

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

Элемент

label for="name">Name:label> input type="text" id="name" name="user_name" /> 

При правильно связанном элементе с элементом через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».

Если не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

Обратите внимание на то, что виджет формы может быть вложен в элемент , как на примере:

label for="name"> Name: input type="text" id="name" name="user_name" /> label> 

Однако даже в таких случаях лучше всё равно указывать атрибут for , так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.

Лейблы тоже кликабельны!

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

form> p> label for="taste_1">I like cherrylabel> input type="checkbox" id="taste_1" name="taste_cherry" value="1" /> p> p> label for="taste_2">I like bananalabel> input type="checkbox" id="taste_2" name="taste_banana" value="2" /> p> form> 

Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).

Несколько лейблов

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

Рассмотрим этот пример:

p>Required fields are followed by abbr title="required">*abbr>.p> div> label for="username">Name:label> input type="text" name="username" /> label for="username">abbr title="required">*abbr>label> div> div> label for="username"> span>Name:span> input id="username" type="text" name="username" /> abbr title="required">*abbr> label> div> div> label for="username">Name: abbr title="required">*abbr>label> input id="username" type="text" name="username" /> div> 

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

• В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы могут быть неправильно интерпретированы программой чтения с экрана.
• Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
• Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».

Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

Часто используемые с формами HTML-структуры

Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.

В добавок к элементу часто используют HTML-заголовки (например, (en-US), (en-US)) и секционирование (например, ) для структурирования сложных форм.

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

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами (en-US) ). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента :

link href="payment-form.css" rel="stylesheet" /> 

form>form> 

h1>Payment formh1> p> Required fields are followed by strong>abbr title="required">*abbr>strong >. p> 

section> h2>Contact informationh2> fieldset> legend>Titlelegend> ul> li> label for="title_1"> input type="radio" id="title_1" name="title" value="M." /> Mister label> li> li> label for="title_2"> input type="radio" id="title_2" name="title" value="Ms." /> Miss label> li> ul> fieldset> p> label for="name"> span>Name: span> strong>abbr title="required">*abbr>strong> label> input type="text" id="name" name="username" /> p> p> label for="mail"> span>E-mail: span> strong>abbr title="required">*abbr>strong> label> input type="email" id="mail" name="usermail" /> p> p> label for="pwd"> span>Password: span> strong>abbr title="required">*abbr>strong> label> input type="password" id="pwd" name="password" /> p> section> 

section> h2>Payment informationh2> p> label for="card"> span>Card type:span> label> select id="card" name="usercard"> option value="visa">Visaoption> option value="mc">Mastercardoption> option value="amex">American Expressoption> select> p> p> label for="number"> span>Card number:span> strong>abbr title="required">*abbr>strong> label> input type="number" id="number" name="cardnumber" /> p> p> label for="date"> span>Expiration date:span> strong>abbr title="required">*abbr>strong> em>formatted as mm/yyem> label> input type="date" id="date" name="expiration" /> p> section> 

p>button type="submit">Validate the paymentbutton>p> 

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

Протестируйте себя!

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure (en-US) .

Заключение

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

Смотрите также

• A List Apart: Sensible Forms: A Form Usability Checklist

• Назад
• Обзор: Forms
• Далее

В этом разделе

• Ваша первая HTML форма
• Как структурировать HTML-формы
• Стандартные виджеты форм
• The HTML5 input types (en-US)
• Other form controls (en-US)
• Стили HTML-форм
• Advanced form styling (en-US)
• UI pseudo-classes (en-US)
• Проверка данных формы
• Отправка данных формы

Дополнительные темы

• Как создавать пользовательские виджеты форм
• Sending forms through JavaScript
• Property compatibility table for form widgets (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Какой тег используют для разметки форм

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

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

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега . Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET , то адресная строка может принимать следующий вид.

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

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

Синтаксис

Атрибуты

accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. action Адрес программы или документа, который обрабатывает данные формы. autocomplete Включает автозаполнение полей формы. enctype Способ кодирования данных формы. method Метод протокола HTTP. name Имя формы. novalidate Отменяет встроенную проверку данных формы на корректность ввода. target Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

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

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

HTML5 IE Cr Op Sa Fx

       
Как по вашему мнению расшифровывается аббревиатура "ОС"?
 
Офицерский состав Операционная система Большой полосатый мух
  

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

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

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

• Защита от дурака
• Отправка данных формы
• Создание формы
• Сумасшедшие формы

Разметка форм в HTML5

Эта статья – первая из цикла статей об онлайн-формах HTML5, всего их будет 3. До перехода к стилевому оформлению и API проверке со стороны клиента в Java Script, в данной статье мы рассмотрим базовые понятия о разметке. Я советую вам прочитать об этом, даже если вы уже имеете представление о формах, так как в этой статье будут описаны многие новые атрибуты и подводные камни их использования.

Формы HTML могут показаться обычным делом, но они имеют большое значение при разработке как веб-сайтов, так и приложений. В версии HTML4 список доступных полей ввода включал только следующие виды:

• input type=»text»
• input type=»checkbox»
• input type=»radio»
• input type=»password»
• input type=»hidden» — для ввода данных, которые не видны юзеру
• input type=»file» — для загрузки
• textarea — для ввода объемных текстов
• select — для выпадающих списков
• button — как правило применяется для отправки формы, как альтернативу можно применять и input type=»submit» и input type=»image» .

Другие ограничения:

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

Новые виды полей ввода в HTML5

В арсенале HTML5 появился целый ряд новых видов полей ввода. Они сами по себе помогают при вводе данных и обеспечивают валидацию без кода Java Script…

вид поля	применение
email	для ввода электронного адреса
tel	для ввода номера телефона – строгий порядок написания необязателен, но переносы строк будут удалены
url	для ввода URL
search	поисковое поле с автоматически удаляющимися переносами строк
number	для ввода чисел с плавающей точкой
range	для создания элемента управления, позволяющего вводить примерные значения, обычно для этого используется слайдер
date	для ввода даты (день, месяц и год)
datetime	для ввода даты (день, месяц, год) и времени (час, минута, секунда, микросекунда) в соответствии с текущим часовым поясом UTC.
datetime-local	для ввода даты и времени без учета местного времени
month	для ввода месяца и года без учета местного времени
week	для ввода порядкового номера недели без учета местного времени
time	для ввода времени без учета местного времени
color	задать цвет

Атрибуты полей ввода

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

Хотя вы можете и добавить значения, если предпочитаете более строгий порядок как в XHTML. Например:

определяет метод ввода данных. Наиболее важными являются следующие методы:

• verbatim — не текстовый контент, например, имя юзера
• latin — латинский шрифт, такой как поля поиска
• latin-name — имена собственные, т.е. первая буква является заглавной
• latin-prose — обычный текстовый контент, например, сообщения, твиты и так далее
• numeric — ввод числовых значений, к которым не подходят атрибуты number или range, например, для ввода номеров кредитных карт

Учитывайте, что тип поля date всегда использует формат ГГГГ-ММ-ДД для атрибутов value , min и max .
В примере, указанном ниже, мы видим поле для ввода обязательного e-mail с окончанием @mysite.com с фокусировкой на нем при первой загрузке страницы:

Datalist

datalist содержится набор подходящих опций для любого вида поля. Например:

Если datalist поддерживается, браузер выводит список возможных значений на выбор для автозаполнения, когда пользователь начинает печатать текст. Целый список выводится при двойном клике мышкой на элемент управления или при нажатии на стрелку «вниз» (если она отображается). Если сравнивать с выпадающим списком с атрибутом select , в этом случае пользователь может ввести собственный вариант.

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

Internet Explorer 

Но имейте в виду, что реализаций отличаются в зависимости от браузеров.

Списки значений могут заполняться и с помощью Java Script, если вы хотели бы выбирать опции через Ajax.

Остановка валидации

Остановить проверку всей формы можно, если установить для элемента form атрибут novalidate . Как альтернативный способ, можно установить атрибут formnovalidate для кнопки или изображения подтверждения отправки.

Также помнете, что установление атрибута disabled для поля ввода отменит проверку данного поля.

Поля вывода

До этого мы рассматривали виды полей ввода, но в арсенале HTML5 также есть поля для вывода:

• output — результат вычисления или последствия действия юзера
• progress — индикатор процесса выполнения операции (состояние определяют атрибуты value и max )
• meter — поле вывода в виде шкалы, цвет которой может становиться красным, желтым или зеленым в зависимости от значений, установленных для атрибутов value, low , high , min , max и optimum .

Отделение и маркировка полей

Спецификация формы на сайте whatwg.org form specification устанавливает, что

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

.

Интересно. В основном я использую для этого div , хотя не думаю, что есть какая-либо разница в значении. Тэг

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

Учтите, что маркировки следует устанавливать или вокруг, или рядом с самим полем ввода с атрибутом for , который идентифицирует поле ввода, например:

 
 
First name 





 
Last name 
 
Email address 
 
  Sign up for our newsletter 
 

Нестандартные элементы управления

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

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

Далеко не все поля ввода данных и их атрибуты поддерживаются всеми браузерами. Как правило, основная часть современных браузеров начиная с IE10+ предоставляют возможность создания полей для ввода e-mail и чисел. Однако на момент написания этой статьи виды полей для ввода времени и дат были доступны только в браузерах Webkit и Blink.

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

Всегда нужно использовать правильный вид поля!

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

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

1 — Стандартное поле для ввода дат всегда преобразовывает вводимые значения в формат ГГГГ-ММ-ДД вне зависимости от принятого формата даты принят в вашей местности.

2 — Firefox и IE вернутся к стандартному текстовому полю, а юзерам возможно нужно ввести даты в формате ММ-ДД-ГГГГ, принятом в США, или формате ДД-ММ-ГГГГ, принятом в европейских странах.

3 — Инструмент для выбора даты в Java Script и в jQuery UI дает возможность установить персонализованный формат вводимой даты – или даже ГГГГ-ММ-ДД для корректности – но нет гарантии, что на устройстве пользователя будет доступен Java Script.

Самое простое решение в этом случае – отказаться от применения поля ввода date в HTML5, возвратиться к текстовому полю и создать собственное управление датой. Не стоит этого делать. Вряд ли вы когда-нибудь сможете создать собственный элемент управления датой, который будет действовать на любых устройствах и со всеми экранными разрешениями, будет совместим с клавиатурой, мышью и сенсорами и будет продолжать работать при отсутствии Java Script. Так, в частности, браузеры для мобильных телефонов часто опережают обычные браузеры по набору доступных инструментов и обладают отличными элементами для сенсорного управления.

Виды полей HTML5 – это будущее в сайтостроении. Применяйте их и при необходимости добавляйте полизаполнители Java Script в случаях, когда вам требуется надежная кроссбраузерная поддержка. Но обратите внимание, что будет требоваться…

Проверка со стороны сервера

Ну нужно надеяться на проверку со стороны браузера. Даже если вы смогли заставить всех в обязательном порядке обновить Chrome до последней версии, вы не сможете предотвратить:

• баги браузера или ошибки Java Script, которые будут разрешать недействительные данные
• случаев, когда пользователь изменит ваш HTML, и когда скрипты будут использовать инструменты браузера
• переписывание данных из систем, находящихся вне контроля
• перехват данных во время их перемещения между браузером и сервером (как это бывает по HTTP)

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

И, последнее, знайте, что даты можно получить в формате ГГГГ-ММ-ДД или в ином формате, который вы установили для пользователя (ММ-ДД-ГГГГ, ДД-ММ-ГГГГ и так далее) Проверяйте цифры в первых 4 символах или, в случае необходимости, используйте собственные методы анализа языка и оболочки даты.

В данной статье мы охватили большой объем материала. Следующая статья будет посвящена свойствам CSS, которые относятся к формам.

• Урок подготовлен: командой DwStroy.ru
• Источник:http://www.sitepoint.com/html5-forms-markup/
• Продолжение:Обзор форм HTML5: CSS (вторая статья)
• Продолжение:Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Форма в HTML. Тег

Тег используется для создания HTML-формы. В нём находится всё содержимое формы: поля для ввода, подписи к этим полям и кнопка отправки.

Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST . Если использовать метод GET , параметры формы будут отображаться в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.

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

• action — адрес, на который будут отправлены данные формы.
• method — метод отправки данных: GET или POST .
• target — окно или фрейм, в котором будет открыт результат отправки данных формы.
• name — имя формы, которое используется для её идентификации при отправке данных на сервер.
• autocomplete — может ли браузер запоминать введённые пользователем данные для автозаполнения.
• enctype — способ кодирования данных формы при отправке на сервер.
• novalidate — указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.Пример использования атрибутов тега :

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.