Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






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





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


Таблица 17.1.
Значение атрибутаtype Описание
button Кнопка
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных.
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime -local Указание местной даты и времени.
email Для адресов электронной почты.
number Поле ввода чисел. Ввод символов, не являющихся цифрами приведет к выводу предупреждения.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Поле для телефонных номеров.
time Поле для времени.
url Поле для веб-адресов.
month Поле для выбора месяца.
week Поле для выбора недели.






Date: 2015-07-22; view: 513; Нарушение авторских прав



mydocx.ru - 2015-2024 year. (0.008 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию