2.4 Форма, методы передачи данных GET POST кратко

Сразу хочу сказать, что здесь никакой воды про get, и только нужная информация. Для того чтобы лучше понимать что такое get, post , настоятельно рекомендую прочитать все из категории Расширяемые языки разметки: XML, HTML, DHTML, HTML 5.

Тег

Атрибуты

accept-charset - Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.

action - Адрес программы или документа, который обрабатывает данные формы.

autocomplete - Включает автозаполнение полей формы.

enctype - Способ кодирования данных формы.

method - Метод протокола HTTP.

name - Имя формы.

novalidate - Отменяет встроенную проверку данных формы на корректность ввода.

target - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

Новые типы input в HTML5 формах

input type=email определяет поле, которые должно содержать email адрес. Об этом говорит сайт https://intellect.icu . Значение введенное в поле автоматически проверяется перед отправкой на сервер.
input type=url определяет поле, которое должно содержать url адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
input type=tel определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.
input type=number определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
input type=range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
input type=search определяет поле поиска (может использоваться например для создания поиска по сайту).

Новые элементы в HTML5 формах

• datalist позволяет привязать список к полям формы. Значения списка будут выводится как поисковые подсказки во время ввода информации в поле связанное с ним.
• keygen позволяет генерировать открытые и закрытые ключи, которые используются для безопасной связи с сервером.
• output может использоваться для вывода различной информации. С помощью атрибута for можно указать связанные поля.

Методы передачи в формах HTML

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

Разберем подробнее методы передачи данных GET и POST.

Чаще всего, для передачи данных, используются... ссылки! Тоесть, когда ты нажимаешь на ссылку, часто, передаешь данные сервер. Большинство современных веб-сайтов, активно эксплуатируют этот метод передачи информации. Этот метод называется GET. Когда мы нажимаем на ссылку, мы хотим получить (to get) какой-то документ с сервера. Поэтому метод передачи данных через ссылку и назвали get.

Метод GET.

Метод GET удобен тем, что прост в эксплуатации. Но у него есть недостатки. Во-первых, методом GET нельзя передавать большие объемы информации, потому что данные, передаваемые этим методом входят в соств URL, длина которого ограничена.

Пример: ссылка http://dayte2.com/?u=shaman&act=state&num=9 содержит данные, передаваемые методом GET. Эти данные идут после знака вопроса.

Так как данные, передаваемые методом GET входят в соства URL документа, их может подсмотреть любой желающий. У этого есть преимущества и недостатки. Преимущество состоит в том, что можно послать ссылку вместе с данными другу. Недостаток в том, что в строке браузера отображается и ваш, только что введенный пароль. Это одна из причин, почему данные, представляющие ценность, всегда нужно передавать методом POST.

Метод POST.

Как и метод GET, метод POST служит для передачи данных на сервер. Однако, данные, переданные таким образом, идут не в URL документа, а в теле запроса, после заголовков. Эти данные могут быть восприняты веб Сервером.

Когда данные отправляются методом POST, серверу приходит что-то вроде:

POST lines.pl HTTP/1.1
Accept: */*
Referer: http://intellect.icu/shaman.shtml
Accept-Language: ru
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/88.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Host: intellect.icu
Content-Length: 106
Connection: Keep-Alive
Cache-Control: no-cache

... some data...

После анализа заголовков, сервер видит пустую строку, которая говорит об окончании заголовков. После нее сервер видит какие-то непонятные данные. Не долго думая, сервер решает, что эти данные нужны файлу, который вызывается, и посылает эти данные документу. Если этот документ — скрипт, то он получит эти данные так же, как получает данные с клавиатуры при работе с консолью, то есть, через STDIN.

Плюсы метода POST очевидны: можно передавать неограниченные объемы информации, причем, никто не увидит эту информацию после того, как вы ее отправили (имеется ввиду, в строке браузера).

Но есть и недостатки. Вы не сможете послать данные за друга. Кроме того, если необходимо «протащить» данные через несколько форм или страниц, то это вызовет дополнительные трудности.

Однако, и их можно обойти. Один из распространенных методов: формирование скрытых полей с именем и значением уже пришедших данных. У этого метода есть недостатки:

• можно легко подделать данные, хранимые в таких полях. Это делается просто: нужно сохранить страницу с формой на диск, исправить ее html-код, подставив в скрытые поля нужные данные, а затем нажать кнопку "Отправить" так же, как будто это реальная форма. Серверу без разницы от куда пришли данные, поэтому они будут обработаны так же.
• При таком подходе приходится несколько раз оптправлять данные от клиента серверу. Скажем, вы ввели логин и пароль. На следующей странице вас просят ввести адрес и номер телефона, а в полях hidden хранят ваши логин и пароль, полученные на предыдущей странице. При отправке формы заново будут отправлены и новые данные и старые (логин и пароль).

Есть так же, методы, основанные на cookie или серверных сессиях, но это — тема отдельной статьи.

Итак, мы разобрались с главными методами передачи данных (есть еще PUT, но им никто не пользуется). Для веб-мастера очень важно понимать как именно происходит передача данных и что происходит на сервере. Сейчас высокоуровневые языки программирования типа PHP, делают работу по извлечению данных автоматически, поэтому многие не понимают настоящий механизм.

Отладка и дебаггинг HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Chrome Developer Tools) Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

1. Нажмите F12
2. Выберите Network
3. Выберите "All"
4. Выберите нужный урл в столбце "Name"
5. Выберите "Headers"

Затем вы можете получить данные формы, как показано ниже.

А как ты думаешь, при улучшении get, будет лучше нам? Надеюсь, что теперь ты понял что такое get, post и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Расширяемые языки разметки: XML, HTML, DHTML, HTML 5