Краткий курс HTML 5
12. Формы
Формы в HTML предназначены для передачи пользовательских данных на сервер. С их помощью можно организовать все что угодно — от переписки пользователей до форумов и полноценных веб-приложений. Обработка полученных данных происходит на сервере с помощью специального программного обеспечения, рассмотрение которого выходит далеко за рамки курса HTML. В этой главе мы лишь начнем рассмотрение возможностей, которые предлагают нам формы для организации пользовательских интерфейсов и формирования запросов к серверу.
Полноценная форма состоит из элемента <form>, внутри которого располагается любое содержимое (кроме других форм), включающее одно или несколько полей ввода — кнопки, однострочные и многострочные текстовые поля, выпадающие списки и т. д. Функциональность формы определяется рядом атрибутов элемента <form>. Одним из них является name, в котором можно указать уникальное имя формы. В документе может быть сколько угодно форм, но имена их не должны совпадать. С помощью этого имени подключенные к документу клиентские скрипты могут получать динамический доступ к полям формы еще до ее отправки на сервер.
<form name="search" action="/find.cgi">
<input type="text" name="t" />
<input type="submit" />
</form>Перед отправкой формы данные из полей приводятся к MIME-типу, соответствующему значению атрибута enctype. Затем они отправляются на сервер по адресу, указанному в action, методом, выбранным в атрибуте method. После этого серверное программное обеспечение может обработать полученную информацию, сформировать запрошенную страницу и отправить ее обратно браузеру.
Значение enctype | Описание |
|---|---|
application/x-www-form-urlencoded | Значение по умолчанию. Подходит для большинства случаев. Пробелы и некоторые другие специальные символы кодируются UTF-кодами (напр. %20). |
multipart/form-data | Это значение необходимо указывать при отправке файлов на сервер. В форме с предыдущим значением enctype будет отправлено только имя файла, а не его содержимое. |
text/plain | Данные передаются в виде обычного текста. |
Значение method | Описание |
|---|---|
get | Значение по умолчанию. Данные присоединяются к указанному в action URL в виде пар «поле=значение», разделенных знаком «&». Между запрашиваемым URL и списком этих пар ставится знак «?». Например, «/find.cgi?key=value». Если значения полей содержат символы, не входящие в ASCII, или превышают 100 символов, то необходимо использовать method="post". |
post | Данные передаются в теле запроса. Это никак не отражается на URL, поэтому вы не сможете передать кому-либо ссылку или создать закладку, идентично повторяющую ваш запрос. |
put, delete | Эти методы предназначены для отправки запросов на добавление и удаление информации, находящейся по указанному в action адресу. Ключевым отличием от метода post является их идемпотентность, т. е. при повторной загрузке той же страницы (нажатие F5 в браузере) не произойдет повторного действия, поскольку в action указывается не просто скрипт обработчика формы, а именно адрес добавляемой/удаляемой страницы или файла. Эти методы поддерживаются не всеми браузерами и в большинстве случаев вместо них используют post с последующим перенаправлением. |
Помимо приведенных выше опций, в атрибуте accept-charset можно указать одну или несколько (через пробел) кодировок, допустимых при заполнении формы. Кроме того, в атрибуте target можно обозначить окно или фрейм, в котором будет загружена запрошенная страница. Допустимые значения те же, что и у ссылок.
HTML 5 порадовал еще двумя атрибутами элемента <form>. Атрибут autocomplete со значением on сообщает браузеру о необходимости сохранять вводимые в форму данные для организации функции автозаполнения, т. е. чтобы при последующем наборе отображать их во всплывающих подсказках. По умолчанию эта опция включена. Чтобы ее отключить, необходимо указать атрибут autocomplete="off".
Еще одной новинкой стандарта HTML 5 является проверка полей формы на правильность ввода. По умолчанию эта возможность также включена, и отключается она булевым атрибутом novalidate="novalidate". При включенной опции браузер должен проверять, допустимы ли введенные значения в соответствующих элементах, и при необходимости блокировать отправку данных.
В следующей главе мы рассмотрим различные элементы ввода данных.