Введение в формы 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) также указывает имя представления. В представлении переключатели можно отличить друг от друга, задав для них раз