Перейти к первому, предыдущему, следующему, последнему разделу, оглавлению.
ProgrammerBook.ru: Обратите внимание, что
Форма представляет собой шаблон для набора данных формы и связанного с ним метода, а также URI-адреса обработчика. Набор данных формы представляет собой последовательность пар полей имя/значение. Имена указываются в атрибутах NAME элементов ввода значений формы, а значения задаются начальными значениями с помощью различных форм разметки и в дальнейшем редактируются пользователем. Полученный в итоге набор данных формы используется для получения доступа к информационному сервису как функция обработчика и метод.
Элементы формы могут быть смешаны со структурными элементами документа. Например, элемент PRE может содержать элемент FORM, либо элемент FORM может содержать списки, которые содержат INPUT элементы. Это предоставляет значительную гибкость при проектировании макета форм.
Обработка формы является функцией 2-го уровня.
Элемент FORM содержит последовательность элементов ввода данных, наряду со структурными элементами документа. Атрибуты:
Элемент INPUT репрезентирует поле для ввода пользовательских данных. Атрибут TYPE выделяет несколько разновидностей полей.
Элемент INPUT имеет ряд атрибутов. Набор применяемых атрибутов зависит от значения атрибута TYPE.
Значением по умолчанию для атрибута TYPE является `TEXT', обозначающее однострочное текстовое поле. (Для многострочных текстовых полей используйте элемент TEXTAREA).
Обязательные атрибуты:
Дополнительные атрибуты:
Например:
<p>Улица: <input name=street><br> Название города: <input name=city size=16 maxlength=16><br> Почтовый Индекс: <input name=zip size=10 maxlength=10 value="99999-9999"><br>
Элемент INPUT с `TYPE=PASSWORD' представляет собой текстовое поле, как указано выше, за исключением того, что значение скрывается, во время его ввода. (Смотри также: раздел Вопросы Безопасности).
Например:
<p>Имя: <input name=login> Пароль: <input type=password name=passwd>
Элемент INPUT с `TYPE=CHECKBOX' репрезентирует логический выбор. Набор таких элементов с одинаковым именем, репрезентирует поле выбора нескольких-из-многих. Обязательные атрибуты:
Дополнительные атрибуты:
Например:
<p>Какие ароматы Вам нравятся? <input type=checkbox name=flavor value=vanilla>Ваниль<br> <input type=checkbox name=flavor value=strawberry>Клубника<br> <input type=checkbox name=flavor value=chocolate checked>Шоколад<br>
Элемент INPUT с `TYPE=RADIO' репрезентирует логический выбор. Набор таких элементов с одинаковым именем, репрезентирует поле выбора одного-из-многих. Как и для флажков атрибуты NAME и VALUE являются обязательными. Дополнительные атрибуты:
На протяжении всего времени, может быть выбран только лишь один из переключателей набора. Если ни один из INPUT элементов набора переключателей не определён как `CHECKED', то агент пользователя должен обозначить первый переключатель как выбранный изначально.
Например:
<p>Какие ароматы Вам нравятся? <input type=radio name=flavor value=vanilla>Ваниль<br> <input type=radio name=flavor value=strawberry>Клубника<br> <input type=radio name=flavor value=chocolate>Шоколад<br>
Элемент INPUT с `TYPE=IMAGE' определяет ресурс изображения для отображения, а также позволяет ввести значения сразу в два поля формы: «х» и «y» координаты пикселя, выбранного в изображении. Имена этих полей представляют собой имя поля с добавлением к нему `.x' и `.y' соответственно. `TYPE=IMAGE' аналогичен активации `TYPE=SUBMIT'; то есть, когда выбран пиксель, происходит отправка значений формы.
Атрибут NAME является обязательным так же как и для других полей ввода. Атрибут SRC так же является обязательным, а вот атрибут ALIGN является дополнительным так же как и для элемента IMG (смотрите раздел Изображение: IMG).
Например:
<p>Выберите точку на карте: <input type=image name=point src="map.gif">
Элемент INPUT с `TYPE=HIDDEN' репрезентирует скрытое поле. Пользователь не взаимодействует с этим полем; вместо этого, значение поля задаётся атрибутом VALUE. Атрибуты NAME и VALUE являются обязательными.
Например:
<input type=hidden name=context value="l2k3j4l2k3j4l2k3j4lk23">
Элемент INPUT с `TYPE=SUBMIT' репрезентирует опцию ввода, как правило, представленную в виде кнопки, которая сообщает агенту пользователя о необходимости отправки данных формы. Дополнительные атрибуты:
Вы можете отправить этот запрос внутрь страны: <input type=submit name=recipient value=internal><br> или во внешний мир: <input type=submit name=recipient value=world>
Элемент INPUT с `TYPE=RESET' репрезентирует опцию ввода, как правило, представленную в виде кнопки, которая сообщает агенту пользователя о необходимости сброса полей формы к их исходным состояниям. Атрибут VALUE, если он присутствует, указывает метку для элемента ввода (кнопки).
Когда вы закончите, вы можете отправить этот запрос: <input type=submit><br> А так же вы можете очистить форму и начать всё заново в любое время: <input type=reset>
Элемент SELECT ограничивает поле формы перечисленным списком значений. Значения указываются в элементах OPTION. Атрибуты:
Например:
<SELECT NAME="flavor"> <OPTION>Ваниль <OPTION>Клубника <OPTION value="RumRasin">Ром и Изюмом <OPTION selected>Персик и Апельсин </SELECT>
В качестве начального состояния выступает состояние, при котором выбран первый вариант, если только ни в одном из OPTION элементов не присутствует атрибута SELECTED.
Элемент OPTION может находиться только внутри элемента SELECT. Он репрезентирует один вариант и имеет следующие атрибуты:
Содержимое элемента OPTION предоставляется пользователю в качестве репрезентации варианта. Так же оно используется в качестве возвращаемого значения, если отсутствует атрибут VALUE.
Элемент TEXTAREA репрезентирует многострочное текстовое поле. Атрибуты:
Например:
<TEXTAREA NAME="address" ROWS=6 COLS=64> HaL Computer Systems 1315 Dell Avenue Кэмпбелл, Калифорния 95008 </TEXTAREA>
Содержимое элемента TEXTAREA является начальным значением поля.
Как правило, ROWS и COLS атрибуты определяют видимый размер поля в символах. Поле, как правило, представляется шрифтом с фиксированной шириной символов. HTML агентам пользователей следует позволять тексту выходить за эти пределы, обеспечивая прокрутку содержимого по мере её необходимости.
HTML агент пользователя начинает обработку формы, представляя документ с полями в их исходном состоянии. Пользователь может изменять значения полей с учётом ограничения типа поля и прочих ограничений. Когда пользователь указывает на то, что форму следует отправить (с помощью кнопки или изображения отправки), набор данных формы обрабатывается в соответствии с его методом, URI-адресом обработчика и типом кодирования.
Когда в форме присутствует только одно однострочное текстовое поле ввода, агенту пользователя следует воспринимать нажатие клавиши Enter в этом поле в качестве запроса на отправку формы.
Кодированием по умолчанию для всех форм является `application/x-www-form-urlencoded'. Набор данных формы репрезентируется в этом медиа типе следующим образом:
Если обработка формы является идемпотентной (то есть она не имеет прочного заметного влияния на итоговое состояние), то в качестве метода передачи формы следует применять `GET'. Многие запросы к базе данных не имеют видимых побочных эффектов и являются идеально применимыми к запросам форм.
Для обработки формы, URL-адресом обработчика которой является HTTP URL, а так же методом которой является `GET', агент пользователя начинает с URI-адреса обработчика, добавляя к нему `?' и набор данных формы, в формате `application/x-www-form-urlencoded', как указано выше. Агент пользователя затем переходит по ссылке на этот URI так же, как если бы это был якорь (смотрите раздел Активация Гиперссылок). (27)
Если сервис, предназначенный для обработки формы, имеет побочные эффекты (например, модифицированную базу данных или подписку на услугу), то в качестве метода следует применять `POST'.
Для обработки формы, URL-адресом обработчика которой является HTTP URL, а так же методом которой является `POST', агент пользователя проводит HTTP POST транзакцию с помощью URI-адреса обработчика, и типом тела сообщения `application/x-www-form-urlencoded' формата как указано выше. Агенту пользователя следует отображать ответ от взаимодействия с HTTP POST так же, как он будет отображать ответ от HTTP GET, указанного выше.
Рассмотрим следующий документ:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <title>Образец Отправки HTML-Формы</title> <H1>Образец Анкеты</H1> <P>Пожалуйста, заполните эту анкету: <FORM METHOD="POST" ACTION="http://www.w3.org/sample"> <P>Ваше имя: <INPUT NAME="name" size="48"> <P>Мужчина <INPUT NAME="gender" TYPE=RADIO VALUE="male"> <P>Женщина <INPUT NAME="gender" TYPE=RADIO VALUE="female"> <P>Количество человек в семье: <INPUT NAME="family" TYPE=text> <P>Города, в которых вы поддерживаете место жительства: <UL> <LI>Кент <INPUT NAME="city" TYPE=checkbox VALUE="kent"> <LI>Майами <INPUT NAME="city" TYPE=checkbox VALUE="miami"> <LI>Другие <TEXTAREA NAME="other" cols=48 rows=4></textarea> </UL> Ник: <INPUT NAME="nickname" SIZE="42"> <P>Спасибо, что ответили на эту анкету. <P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM>
Начальное состояние набора данных формы:
Обратите внимание, что переключатели имеют начальное значение, в то время как флажок не имеет такового.
Пользователь может заполнить поля и произвести отправку формы. Предположим, что в этот момент были введены следующие значения:
Затем агент пользователя проводит HTTP POST транзакцию с помощью URI `http://www.w3.org/sample'. Тело сообщения будет иметь следующий вид (не обращайте внимание на разрыв строки):
name=John+Doe&gender=male&family=5&city=kent&city=miami& other=abc%0D%0Adef&nickname=J%26D
Перейти к первому, предыдущему, следующему, последнему разделу, оглавлению.