Отправка данных на сервер

Для того чтобы успешно подготовить введенные посетителем данные и отправить их серверному приложению, Web-форма должна "знать" метод отправки данных, указывающий вид, в котором данные будут отправлены. Таких методов HTML поддерживает два:

1. Метод GET формирует из введенных посетителем данных набор пар вида <имя элемента управления>=<введенные в него данные>.

Эти пары добавляются справа к интернет-адресу серверного приложения, отделяясь от него символом?(вопросительный знак); сами пары разделяются символами & (амперсанд). Полученный таким образом интернет-адрес отправляется Web-серверу, который извлекает из него интернет-адрес серверного приложения и сами данные.

1. Метод POST также формирует из введенных данных пары вида <имя элемента управления>=<введенные в него данные>. Но отправляет он их не в составе интернет-адреса, а вслед за ним, в качестве дополнительных данных.

Ввиду того, что курс посвящен основам клиентской разработки, мы не будем останавливаться на вопросах обработки информации сервером.

<form>

Тег < form > определяет форму HTML страницы.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега< form >. Предварительно браузер подготавливает информацию в виде пары "имя=значение", где имя определяется атрибутом name тега < input >, а значение введено пользователем или установлено в поле формы по умолчанию.

Внутрь контейнера < form > помещаются другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Оформляется тег следующим образом:

<form>

.........

</form>

К атрибутам < form > относятся:

• accept - charset – определяет кодировку, в которой сервер может принимать и обрабатывать данные;
• action - определяет адрес программы или документа, который обрабатывает данные формы;
• autocomplete – включает автозаполнение полей формы;
• enctype – определяет способ кодирования данных формы. Может принимать следующие значения:
• application/x-www- form -urlencoded – вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями;
• multipart/ form -data – данные не кодируются;
• text/plain – пробелы заменяются знаком +, буквы и другие символы не кодируются.
• method – метод протокола HTTP (GET или POST);
• name – определяет имя формы;
• novalidate – отменяет встроенную проверку данных формы на корректность ввода;
• target –задает имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

<input>

Как уже упоминалось, элемент < form > является своего рода контейнером для других элементов управления.

Чаще всего для определения элементов управления используется тег < input >.

< input > предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент < input > не требуется помещать внутрь контейнера < form >, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать < form > обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Атрибуты тега < input >:

• accept – устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов;
• accesskey – задает комбинацию клавиш, позволяющую перейти к элементу;
• align –определяет выравнивание изображения;
• alt – альтернативный текст для кнопки с изображением;
• autocomplete –включает или отключает автозаполнение, соответственно принимает значения on и off;
• border – задает толщину рамки вокруг изображения.;
• checked – предварительно активированный переключатель или флажок;
• disabled – блокирует доступ и изменение элемента;
• form – связывает поле с формой по её идентификатору;
• formaction – определяет адрес обработчика формы;
• formenctype – устанавливает способ кодирования данных формы при их отправке на сервер;
• formmethod – сообщает браузеру каким методом следует передавать данные формы на сервер (GET или POST);
• formnovalidate – отменяет встроенную проверку данных на корректность введенных значений;
• formtarget – определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы;
• list – указывает на список вариантов, которые можно выбирать при вводе текста;
• max– максимально допустимое значение для ввода числа или даты;
• maxlength –максимально допустимое количество символов разрешенных в тексте;
• min - минимально допустимое значение для ввода числа или даты;
• multiple –позволяет загрузить несколько файлов одновременно;
• name – задает имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать;
• pattern – устанавливает шаблон ввода;
• placeholder –выводит подсказывающий текст;
• readonly –устанавливает, что поле не может изменяться пользователем;
• required – отмечает, что поле является обязательным для заполнения;
• size –задает ширину текстового поля;
• src – определяет адрес графического файла для поля с изображением;
• step – задает шаг приращения для числовых полей;
• tabindex – определяет порядок перехода между элементами с помощью клавиши Tab;
• type – сообщает браузеру, к какому типу относится элемент формы.
• value –определяет значение элемента.

Основной атрибут тега < input >, определяющий вид элемента — type. В таблице 17.1 перечислены значения, которые может принимать этот атрибут.