Вверх A A A
Сентябрь 2018
Нед Пн Вт Ср Чт Пт Сб Вс
35
1
2
36
3
4
5
6
7
8
9
37
10
11
12
13
14
15
16
38
17
18
19
20
21
22
23
39
24
25
26
27
28
29
30
40

Формы

Краткий курс HTML 5

Формы в 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 можно обозначить окно или фрейм, в котором будет загружена запрошенная страница. Допустимые значения те же, что и у ссылок.

HTML5 порадовал еще двумя атрибутами элемента <form>. Атрибут autocomplete со значением on сообщает браузеру о необходимости сохранять вводимые в форму данные для организации функции автозаполнения, т. е. чтобы при последующем наборе отображать их во всплывающих подсказках. По умолчанию эта опция включена. Чтобы ее отключить, необходимо указать атрибут autocomplete="off"

Еще одной новинкой стандарта HTML5 является проверка полей формы на правильность ввода. По умолчанию эта возможность также включена, и отключается она булевым атрибутом novalidate="novalidate". При включенной опции браузер должен проверять, допустимы ли введенные значения в соответствующих элементах, и при необходимости блокировать отправку данных.

В следующей главе мы рассмотрим различные элементы ввода данных.

    5 / 566


791

Эта статья находится в разделах:

Краткий курс HTML 5

Свернуть