Введение в формы HTML
Этот раздел не является нормативным.
Форма HTML — это компонент веб-страницы, который имеет элементы управления формы, такие как текстовые поля, кнопки, флажки, элементы управления диапазоном или палитры цветов. Пользователь может взаимодействовать с такой формой, предоставляя данные, которые затем могут быть отправлены на сервер для дальнейшей обработки (например, для возврата результатов поиска или вычисления). Во многих случаях не требуется никаких сценариев на стороне клиента, хотя доступен API, так что сценарии могут расширять возможности пользователя или использовать формы для целей, отличных от отправки данных на сервер.
Написание формы состоит из нескольких этапов, которые можно выполнить в любом порядке:
- написание пользовательского интерфейса
- реализация обработки на стороне сервера
- настройка пользовательского интерфейса для связи с сервером
Написание пользовательского интерфейса формы HTML
Этот раздел не является нормативным.
Для этого краткого введения мы создадим форму заказа пиццы.
Любая форма начинается с элемента формы <form> , внутри которого размещены элементы управления. Большинство элементов управления представлены элементом ввода <input>, который по умолчанию содержит однострочное текстовое поле. Для маркировки элемента управления используется элемент метки <label> . Один из способов связать метку с элементом управления — это вставить текст метки и сам элемент управления в элемент метки. Каждая область внутри формы обычно представлена с использованием элемента <div>. Собрав все это вместе, вот как можно спросить имя клиента:
<form>
<div>
<label>
Имя покупателя: <input>
</label>
</div>
</form>
Для альтернативного метода связывания метки <label> с элементом управления формы, пожалуйста, обратитесь к метке атрибутом for.
Чтобы помочь пользователям вводить свои имена, к входу можно добавить атрибут autocapitalize со значением «words», чтобы агентам пользователей было предложено автоматически использовать заглавные буквы первых символов введенного пользователем имени.
<form>
<div>
<label>
Customer name: <input autocapitalize="words">
</label>
</div>
</form>
Чтобы позволить пользователю выбрать размер пиццы, мы можем использовать набор переключателей. Радиокнопки также используют элемент ввода <input>, но с атрибутом type со значением radio.
Чтобы переключатели работали как группа, каждому из них присваивается общее имя с использованием атрибута name.
Чтобы сгруппировать пакет элементов управления вместе, таких как, в данном случае, переключатели, можно использовать элемент <fieldset>. Название такой группы элементов управления задается первым элементом в наборе полей <fieldset>, который должен быть элементом легенды <legend>.
<form> <div> <label> Customer name: <input autocapitalize="words"> </label> </div> <fieldset> <legend>Pizza Size</legend> <ul> <li> <label> <input type="radio" name="size"> Small </label> </li> <li> <label> <input type="radio" name="size"> Large </label> </li> </ul> </fieldset> </form>
Чтобы выбрать начинки, флажки могут быть добавлены к этой форме. Флажки используют элемент <input> с атрибутом type с значением checkbox:
<form>
<div>
<label>
Customer name: <input autocapitalize="words">
</label>
</div>
<fieldset>
<legend>Pizza Size</legend>
<ul>
<li>
<label>
<input type="radio" name="size"> Small
</label>
</li>
<li>
<label>
<input type="radio" name="size"> Large
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Pizza Toppings</legend>
<ul>
<li>
<label>
<input type="checkbox"> Bacon
</label>
</li>
<li>
<label>
<input type="checkbox"> Onion
</label>
</li>
<li>
<label>
<input type="checkbox"> Mushroom
</label>
</li>
</ul>
</fieldset>
</form>
В случае возникновения проблемы с заказом клиента, пиццерии необходим способ сбора контактной информации клиента. Для этой цели можно добавить элементы управления формы для телефонных номеров (элементы ввода <input> с атрибутом type, установленным на tel) и адресов электронной почты (элементы ввода <input> с атрибутом type, установленным на code> email):
<form>
<div>
<label>
Customer name: <input autocapitalize="words">
</label>
</div>
<div>
<label>
Telephone: <input type="tel">
</label>
</div>
<div>
<label>
E-mail: <input type="email">
</label>
</div>
...
</form>
Чтобы позволить клиентам запрашивать конкретное время доставки, можно использовать элемент ввода <input> с атрибутом типа type, установленным на время time. Многие элементы управления формой имеют атрибуты, помогающие авторам определять значения, которые может ввести пользователь; в этом случае три атрибута, представляющих особый интерес, — это min, max и step. Соответственно, они устанавливают минимальное время, максимальное время и интервал между допустимыми значениями (в секундах).
В этом примере пиццерия работает только с 11:00 до 21:00 и позволяет пользователям выбирать окно доставки с шагом 15 минут. Поскольку атрибуты min, max принимают значения в течение 24 часов, это означает, что минимальное значение будет равно «11:00», а максимальное значение будет равно «21:00». Поскольку атрибут шага step задается в секундах, чтобы элемент управления формы мог принимать значения с шагом 15 минут, эти 15 минут необходимо будет преобразовать в секунды (900 секунд).
<form>
...
<div>
<label>
Preferred delivery time:
<input type="time" min="11:00" max="21:00" step="900">
</label>
</div>
</form>
Элемент <textarea> может использоваться для предоставления текстового поля в свободной форме. В этом случае это позволит клиентам предоставить инструкции по доставке:
<form>
...
<div>
<label>
Delivery instructions:
<textarea></textarea>
</label>
</div>
</form>
Наконец, чтобы сделать форму отправляемой, добавьте элемент кнопки <button>:
<form>
<div>
<label>
Customer name: <input autocapitalize="words">
</label>
</div>
<div>
<label>
Telephone: <input type="tel">
</label>
</div>
<div>
<label>
E-mail: <input type="email">
</label>
</div>
<fieldset>
<legend>Pizza Size</legend>
<ul>
<li>
<label>
<input type="radio" name="size"> Small
</label>
</li>
<li>
<label>
<input type="radio" name="size"> Large
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Pizza Toppings</legend>
<ul>
<li>
<label>
<input type="checkbox"> Bacon
</label>
</li>
<li>
<label>
<input type="checkbox"> Onion
</label>
</li>
<li>
<label>
<input type="checkbox"> Mushroom
</label>
</li>
</ul>
</fieldset>
<div>
<label>
Preferred delivery time:
<input type="time" min="11:00" max="21:00" step="900">
</label>
</div>
<div>
<label>
Delivery instructions:
<textarea></textarea>
</label>
</div>
<div>
<button>Submit order</button>
</div>
</form>
Реализация серверной обработки для формы
Этот раздел не является нормативным.
Точные детали написания серверного процессора не входят в сферу применения данной спецификации.
В целях данного введения мы будем предполагать, что скрипт на https://pizza.example.com/order настроен для приема заявок в формате application/x-www-form-urlencoded, ожидая, что следующие параметры будут отправлены в Тело HTTP POST:
custname
Имя клиента
custtel
Номер телефона клиента
custemail
Электронная почта клиента
size
Размер пиццы, маленький или большой
topping
Топпинг, определенный один раз для каждого выбранного топинга, с допустимыми значениями: бекон, лук и гриб
delivery
Запрашиваемое время доставки
comments
Инструкция по доставке
Настройка формы для связи с сервером
Этот раздел не является нормативным.
Отправка форм предоставляется серверам различными способами, чаще всего в виде запросов HTTP GET или HTTP POST. Чтобы указать точный используемый метод, атрибут method указывается в элементе формы <form>. Это не определяет, как данные формы кодируются; чтобы указать это, вы используете атрибут enctype. Вы также должны указать URL-адрес службы, которая будет обрабатывать отправленные данные, используя атрибут action.
Для каждого элемента управления формы, который вы хотите отправить, вам необходимо указать имя, которое будет использоваться для ссылки на данные в представлении. Мы уже указали название группы переключателей; этот же атрибут (name) также указывает имя представления. В представлении переключатели можно отличить друг от друга, задав для них разные значения, используя атрибут value.
Несколько элементов управления могут иметь одинаковое имя; например, здесь мы присваиваем всем флажкам одно и то же имя, и сервер различает, какой флажок был установлен, проверяя, какие значения передаются с этим именем — подобно переключателям, им также присваиваются уникальные значения с атрибутом value.
Учитывая настройки в предыдущем разделе, это все становится:
<form method="post" enctype="application/x-www-form-urlencoded" action="https://pizza.example.com/order">
<div>
<label>
Customer name: <input name="custname">
</label>
</div>
<div>
<label>
Telephone: <input type="tel" name="custtel">
</label>
</div>
<div>
<label>
E-mail: <input type="email" name="custemail">
</label>
</div>
<fieldset>
<legend>Pizza Size</legend>
<ul>
<li>
<label>
<input type="radio" name="size"> Small
</label>
</li>
<li>
<label>
<input type="radio" name="size"> Large
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Pizza Toppings</legend>
<ul>
<li>
<label>
<input type="checkbox"> Bacon
</label>
</li>
<li>
<label>
<input type="checkbox"> Onion
</label>
</li>
<li>
<label>
<input type="checkbox"> Mushroom
</label>
</li>
</ul>
</fieldset>
<div>
<label>
Preferred delivery time:
<input type="time" min="11:00" max="21:00" step="900" name="delivery">
</label>
</div>
<div>
<label>
Delivery instructions:
<textarea name="comments"></textarea>
</label>
</div>
<div>
<button>Submit order</button>
</div>
</form>
Например, если клиент ввел «Дениз Лоуренс» в качестве своего имени, «555-555-8642» в качестве своего номера телефона, не указал адрес электронной почты, попросил маленькую пиццу, выбрал начинки из лука и грибов, ввел время доставки 19:00 и оставив текстовое поле с инструкциями по доставке пустым, пользовательский агент отправит в веб-службу следующее:
custname=Denise+Lawrence&custtel=555-555-8642&custemail=&size=small&topping=onion&topping=mushroom&delivery=19%3A00&comments=
Проверка формы на стороне клиента
Этот раздел не является нормативным.
Формы могут быть аннотированы таким образом, что пользовательский агент будет проверять ввод пользователя перед отправкой формы. Сервер все еще должен проверять правильность ввода (поскольку враждебные пользователи могут легко обойти проверку формы), но это позволяет пользователю избежать ожидания, связанного с тем, что сервер будет единственной проверкой ввода пользователя.
Простейшей аннотацией является обязательный атрибут required, который можно указывать в элементах ввода <input>, чтобы указать, что форму нельзя отправлять до тех пор, пока не будет задано значение. Добавляя этот атрибут в поля имени клиента, размера пиццы и времени доставки, мы позволяем пользовательскому агенту уведомлять пользователя, когда пользователь отправляет форму, не заполняя необходимые поля:
<form method="post" enctype="application/x-www-form-urlencoded" action="https://pizza.example.com/order">
<div>
<label>
Customer name: <input name="custname" required>
</label>
</div>
<div>
<label>
Telephone: <input type="tel" name="custtel">
</label>
</div>
<div>
<label>
E-mail: <input type="email" name="custemail">
</label>
</div>
<fieldset>
<legend>Pizza Size</legend>
<ul>
<li>
<label>
<input type="radio" name="size" required> Small
</label>
</li>
<li>
<label>
<input type="radio" name="size" required> Large
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Pizza Toppings</legend>
<ul>
<li>
<label>
<input type="checkbox" name="topping" value="bacon"> Bacon
</label>
</li>
<li>
<label>
<input type="checkbox" name="topping" value="onion"> Onion
</label>
</li>
<li>
<label>
<input type="checkbox" name="topping" value="mushroom"> Mushroom
</label>
</li>
</ul>
</fieldset>
<div>
<label>
Preferred delivery time:
<input type="time" min="11:00" max="21:00" step="900" name="delivery" required>
</label>
</div>
<div>
<label>
Delivery instructions:
<textarea name="comments"></textarea>
</label>
</div>
<div>
<button>Submit order</button>
</div>
</form>
Также возможно ограничить длину ввода, используя атрибут maxlength. Добавив это к элементу <textarea>, мы можем ограничить пользователей до 1000 символов, не позволяя им писать огромные эссе для занятых водителей доставки, вместо того, чтобы оставаться сосредоточенными:
...
<div>
<label>
Delivery instructions:
<textarea name="comments" maxlength="1000"></textarea>
</label>
</div>
<div>
<button>Submit order</button>
</div>
</form>
При отправке формы недопустимые (invalid) события запускаются для каждого недопустимого элемента управления формы, а затем для самого элемента формы <form>. Это может быть полезно для отображения сводки проблем с формой, поскольку обычно сам браузер сообщает только об одной проблеме за раз.
Включение клиентского автоматического заполнения элементов управления формы
Этот раздел не является нормативным.
Некоторые браузеры пытаются помочь пользователю, автоматически заполняя элементы управления формы, вместо того чтобы каждый раз вводить информацию заново. Например, поле, запрашивающее номер телефона пользователя, может автоматически заполняться номером телефона пользователя.
Чтобы помочь пользовательскому агенту в этом, атрибут autocomplete может быть использован для описания цели поля. В случае этой формы у нас есть три поля, которые можно с пользой аннотировать таким образом: информация о том, кому пицца должна быть доставлена. Добавление этой информации выглядит так:
<form method="post" enctype="application/x-www-form-urlencoded" action="https://pizza.example.com/order">
<div>
<label>
Customer name:
<input name="custname" required autocomplete="shipping name">
</label>
</div>
<div>
<label>
Telephone:
<input type="tel" name="custtel" autocomplete="shipping tel">
</label>
</div>
<div>
<label>
E-mail:
<input type="email" name="custemail" autocomplete="shipping email">
</label>
</div>
...
Разница между типом поля, именем поля автозаполнения и модальностью ввода
Этот раздел не является нормативным.
Атрибуты type и autocomplete могут показаться до смешного похожими. Например, во всех трех случаях строка «email» является допустимым значением. В этом разделе предпринята попытка проиллюстрировать разницу между этими тремя атрибутами и даны советы, как их использовать.
Атрибут type в элементах <input> решает, какой тип управления пользовательский агент будет использовать для представления поля. Выбор между различными значениями этого атрибута аналогичен выбору, использовать ли элемент <input>, элемент <textarea>, элемент <select> и т. д.
Атрибут autocomplete, напротив, описывает, что на самом деле представляет значение, которое введет пользователь. Выбор между различными значениями этого атрибута аналогичен выбору метки для элемента.
Сначала рассмотрим номера телефонов. Если страница запрашивает телефонный номер у пользователя, правильный элемент управления формы — <input type=»tel»>. Однако какое значение для автозаполнения использовать зависит от того, какой номер телефона запрашивает страница, ожидают ли они номер телефона в международном формате или только в локальном формате и т. д.
Например, странице, которая является частью процесса оформления заказа на сайте электронной торговли для клиента, покупающего подарок для отправки другу, может потребоваться как номер телефона покупателя (в случае проблем с оплатой), так и номер телефона друга ( в случае проблем с доставкой). Если сайт ожидает международных телефонных номеров (с префиксом кода страны), это может выглядеть следующим образом:
<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".</p>
<div>
<label>
Your phone number:
<input type="tel" name="custtel" autocomplete="billing tel">
</label>
</div>
<div>
<label>
Recipient’s phone number:
<input type="tel" name="shiptel" autocomplete="shipping tel">
</label>
</div>
Но если сайт поддерживает только британских клиентов и получателей, он может выглядеть следующим образом (обратите внимание на использование tel-national, а не tel):
<p>Please enter complete UK phone numbers, as in "(01632) 960 123".</p>
<div>
<label>
Your phone number:
<input type="tel" name="custtel" autocomplete="billing tel-national">
</label>
</div>
<div>
<label>
Recipient’s phone number:
<input type="tel" name="shiptel" autocomplete="shipping tel-national">
</label>
</div>
Теперь рассмотрим предпочтительные языки человека. Правильным значением автозаполнения autocomplete является язык language. Однако для этой цели может использоваться ряд различных элементов управления формой: поле произвольного текста (<input type=»text»>), раскрывающийся список (<select>), переключатели (<input type=»radio»>) и т. д. Это зависит только от того, какой интерфейс нужен.
Форматы даты, времени и номера
Этот раздел не является нормативным.
В этом примере доставки пиццы время указывается в формате «ЧЧ: ММ» (HH:MM): две цифры часа, 24-часовой формат и две цифры времени. (Можно также указать секунды, хотя в этом примере они не нужны.)
Однако в некоторых регионах время часто выражается по-разному при представлении пользователям. Например, в Соединенных Штатах по-прежнему распространено использование 12-часовых часов с индикатором am/pm, как в «2pm». Во Франции принято использовать 24-часовые часы и отделять часы от минут, используя символ «h», как в «14h00».
Аналогичные проблемы существуют с датами, с дополнительным осложнением, заключающимся в том, что даже порядок компонентов не всегда согласован — например, на Кипре первое февраля 2003 года обычно пишется «1/2/03», тогда как эта же дата в Японии обычно записывается как «2003年02月01日» — и даже с числами, где локали различаются, например, в том, что используется в качестве знаков препинания в качестве десятичного разделителя и разделителя тысяч.
Поэтому важно различать форматы времени, даты и числа, используемые в HTML и в формах представления, которые всегда являются форматами, определенными в данной спецификации (и основанными на хорошо установленном стандарте ISO 8601 для машиночитаемых форматов даты и времени ) из форматов времени, даты и чисел, представленных пользователю браузером и принятых браузером как ввод от пользователя.
Формат, используемый «по проводам — on the wire», т. е. в разметке HTML и в формах представления, предназначен для чтения и согласования на компьютере независимо от локали пользователя. Например, даты всегда записываются в формате «ГГГГ-ММ-ДД» (YYYY-MM-DD), как в «2003-02-01». Ожидается, что пользователи никогда не увидят этот формат.
Время, дата или номер, заданные страницей в проводном формате, затем преобразуются в предпочтительную презентацию пользователя (в зависимости от предпочтений пользователя или языкового стандарта самой страницы) перед отображением для пользователя. Аналогичным образом, после того, как пользователь вводит время, дату или число, используя свой предпочтительный формат, пользовательский агент преобразует его обратно в проводной формат перед тем, как поместить его в DOM или отправить.
Это позволяет сценариям на страницах и на серверах согласованно обрабатывать время, даты и числа, не поддерживая десятки различных форматов, и в то же время удовлетворяя потребности пользователей.
Смотрите также замечания по реализации, касающиеся локализации элементов управления формы.
ВНИМАНИЕ!!! В местах, которые меняются, например, из стандартного времени в летнее время, одно и то же время может происходить дважды в один и тот же день, когда часы перемещаются назад. Элемент ввода <input> с типом datetime-local или time не может различить два идентичных экземпляра времени. Если это различие имеет значение, приложения должны позволять пользователям указывать, какое время дублирования они имеют в виду, например, выбирая между «Зимним временем» и «Летним временем».
Категории
Главным образом по историческим причинам элементы в этом разделе делятся на несколько перекрывающихся (но слегка отличающихся) категорий в дополнение к обычным, таким как потоковый контент (flow content), контент фраз (phrasing content) и интерактивный контент (interactive content).
Ряд элементов являются формо-связанными элементами, что означает, что они могут иметь владельца формы.
<button> <fieldset> <input> <label> <output> <select> <textarea> <img>
Формо-связанные элементы, делятся на несколько подкатегорий:
Перечисленные элементы
Обозначает элементы, перечисленные в API-интерфейсах form.elements и fieldset.elements.
<button> <fieldset> <input> <output> <select> <textarea>
Отправляемые элементы
Обозначает элементы, которые можно использовать для построения набора данных формы при отправке элемента формы.
<button> <input> <select> <textarea>
Некоторые отправляемые элементы могут быть, в зависимости от их атрибутов, кнопками. Проза ниже определяет, когда элемент является кнопкой. Некоторые кнопки являются кнопками отправки.
Сбрасываемые элементы
Обозначает элементы, на которые можно повлиять при сбросе элемента формы.
<input> <output> <select> <textarea>
Переассоциируемые элементы
Обозначает элементы, имеющие атрибут содержимого формы и соответствующий атрибут IDL формы, которые позволяют авторам указывать явного владельца формы.
<button> <fieldset> <input> <output> <select> <textarea>
Некоторые элементы, не все из которых связаны с формой, относятся к размечаемым элементам. Это элементы, которые могут быть связаны с элементом метки <label>.
<button> <input> (если атрибут type не находится в состоянии Hidden) <meter> <output> <progress> <select> <textarea>
Следующая таблица является ненормативной и обобщает перечисленные выше категории элементов формы:
Элемент form
Категории:
- Содержание потока
- Ощутимый контент
Контексты, в которых этот элемент может быть использован:
- Где ожидается поток контента
Модель контента:
- Содержимое потока, но без потомков элементов <form>
Пропуск тега в text/html:
- Ни один из тегов не может быть пропущен
Атрибуты контента:
- Глобальные атрибуты HTML
- accept-charset — Кодировки символов, используемые для отправки формы §4.10.21
- action — URL, чтобы использовать для отправки формы §4.10.21
- autocomplete — Настройка по умолчанию для функции автозаполнения для элементов управления в форме
- enctype — Тип кодировки набора данных формы для использования для §4.10.21 отправки формы
- method — HTTP-метод для использования для отправки формы §4.10.21
- name — Имя формы для использования в API document.forms
- novalidate — Обход проверки формы проверки для §4.10.21 подачи формы
- target — просмотр контекста для подачи формы §4.10.21
Допустимые значения атрибута роли ARIA:
- form (по умолчанию — не задано), none, presentation или search.
Разрешенные атрибуты состояния и собственности ARIA:
- Глобальные атрибуты aria- *
- Любые атрибуты aria- *, применимые к разрешенным ролям
Интерфейс DOM:
[OverrideBuiltins]
interface HTMLFormElement : HTMLElement {
attribute DOMString acceptCharset;
attribute DOMString action;
attribute DOMString autocomplete;
attribute DOMString enctype;
attribute DOMString encoding;
attribute DOMString method;
attribute DOMString name;
attribute boolean noValidate;
attribute DOMString target;
[SameObject] readonly attribute HTMLFormControlsCollection elements;
readonly attribute unsigned long length;
getter Element (unsigned long index);
getter (RadioNodeList or Element) (DOMString name);
void submit();
void reset();
boolean checkValidity();
boolean reportValidity();
};
Элемент формы <form> представляет собой набор связанных с формой элементов, некоторые из которых могут представлять редактируемые значения, которые могут быть отправлены на сервер для обработки.
Атрибут содержимого accept-charset дает кодировки символов, которые должны использоваться для отправки. Если указано, значение должно быть упорядоченным набором уникальных разделенных пробелами токенов, которые не чувствительны к регистру ASCII, и каждый токен должен быть регистронезависимым совпадением ASCII для одной из меток ASCII-совместимой кодировки. [КОДИРОВАНИЕ]
Атрибут содержимого name представляет имя формы <form> в коллекции форм. Значение не должно быть пустой строкой, а значение должно быть уникальным среди элементов формы <form> в коллекции форм, в которой оно находится, если оно есть.
Атрибут содержимого автозаполнения autocomplete является перечисляемым атрибутом. Атрибут имеет два состояния. Ключевое слово on отображается во включенное состояние, а ключевое слово off — в выключенное состояние. Атрибут также может быть опущен. Значение по умолчанию для пропущенного значения — on (включено). Состояние off указывает, что по умолчанию для элементов управления формы в форме для имени поля автозаполнения установлено значение «off»;
состояние on «включено» означает, что по умолчанию для элементов управления формы в форме имени поля автозаполнения будет установлено значение «on».
