ФОРМЫ HTML
Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Рассказать о формах в книге, посвященной HTML, достаточно трудно. Причина очень простая: создать форму гораздо проще, чем ту «точку внешнего мира», в которую форма будет посылать информацию. В качестве такой «точки» в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает «общепринятый интерфейс шлюзов». Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.
В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php ).
Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной] . Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Как устроена форма
Форма открывается меткой и заканчивается меткой . HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.
Метка может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:
ACTION Обязательный атрибут. Определяет, где находится обработчик формы. METHOD Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET . Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET . ENCTYPE Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded .
Простейшая форма
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто:
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается «сабмит» с ударением на втором слоге, от английского «подавать»), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке .
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:
Теперь мы знаем достаточно для того, чтобы написать простейшую форму . Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.
Пример 11 Простейшая форма
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:
При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали! .
В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
Как форма собирает данные
Существуют и другие типы элементов . Каждый элемент должен включать атрибут NAME=[имя] , определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов должны включать атрибут VALUE="[значение]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов и , однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.
Основные типы элементов :
TYPE=submit
Кнопка отправляющая данные. Пример использования смотри выше.
TYPE=buttom Кнопка без определенных действий . Пример: Пример смотри ниже. TYPE= file Специальные поля с кнопкой для отправки фалов. Пример: С тем, как выглядит кнопка в действии, можно познакомиться в примере в конце урока. Там же - все остальные типы элементов форм. TYPE=text Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример: Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван , который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user . TYPE=password Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*). Пример: Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw . TYPE=radio Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример: 9600 бит/с
14400 бит/с
28800 бит/с Определяет группу из трех радиокнопок, подписанных 9600 бит/с , 14400 бит/с и 28800 бит/с . Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 . Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800 . TYPE=checkbox Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример: Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы Интернет Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS . TYPE=hidden Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами. Пример: Определяет скрытую переменную version , которая передается обработчику со значением 1.1 . TYPE=reset Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name . Пример: Определяет кнопку Очистить поля формы , при нажатии на которую форма возвращается в исходное состояние.
Помимо элементов , формы могут содержать меню и поля для ввода текста .
Меню из n элементов выглядит примерно так:
Как Вы видите, меню начинается с метки и заканчивается меткой . Метка содержит обязательный атрибут NAME , определяющий имя переменной, которую генерирует меню.
Метка может также содержать атрибут MULTIPLE , присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число] ). Меню в большинстве случаев показывается в виде выпадающего меню.
Метка определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка может включать атрибут checked , показывающий, что данный элемент отмечен по умолчанию.
Разберем небольшой пример.
Такой фрагмент определяет меню из трех элементов: Вариант 1 , Вариант 2 и Вариант 3 . По умолчанию выбран элемент Вариант 1 . Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3 .
После всего, что мы уже узнали, элемент может показаться совсем простым. Например:
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере — address ). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50).
Текст, размещенный между метками и , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.
Отправка данных формы
Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.
Пример 1. Отправка данных формы
HTML5 IE Cr Op Sa Fx
Данные формы В этом примере данные формы, обозначенные атрибутом name ( login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.
| GET | POST | |
|---|---|---|
| Ограничение на объём | 4 Кб | Ограничения задаются сервером. |
| Передаваемые данные | Видны сразу всем. | Видны только при просмотре через расширения браузера или другими методами. |
| Кэширование | Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. | Страница всегда одна. |
| Закладки | Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. | Страницы с разными запросами имеют один адрес, запрос повторить нельзя. |
Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.
Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.
Ниже перечислены типовые области применения этих методов на сайтах.
GET
Передача небольших текстовых данных на сервер; поиск по сайту.
Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.
POST
Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.
Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).
Пример 2. Открытие формы во фрейме
HTML5 IE Cr Op Sa Fx
В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .
Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).
Пример 3. Связывание формы с полями
HTML5 IE Cr Op Sa Fx
Форма .
В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.
Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.
Пример 4. Отправка формы
HTML5 IE Cr Op Sa Fx
Отправка формы
Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.
HTML-формы
С помощью средств HTML можно создавать формы для ввода информации посетителем Web-страницы.
Тег
Описание формы помещается между парными тегами
. На странице одновременно может располагаться несколько форм, однако они не могут быть вложены одна в другую.
Атрибуты тега
accept-charset Список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму. Помогает в ситуации, когда страницы сайта в одной кодировке, а данные нужно отправить в другой. Или когда браузер неправильно автоопределил кодировку. Например: accept-charset="cp1251" или accept-charset="utf8". action Имя программы, которая будет обрабатывать форму. enctype Тип содержимого (метод кодирования).
Например, если форма содержит файлы, то enctype="multipart/form-data".
(По умолчанию enctype ). method Метод передачи данных от формы обрабатывающей программе. Может принимать значения: get или post. При использовании get браузер кодирует данные, получаемые от пользователя, и добавляет к значению атрибута action парами имя=значение. Данные отделяются от значения атрибута action вопросительным знаком ( ? ). При использовании post данные передаются отдельно. name Имя формы. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру. novalidate Наличие этого атрибута означает, что данные формы не должны проверяться. onsubmit JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик срабатывает локально, процесс происходит достаточно быстро. Это намного лучше, чем многократно гонять данные по сети из-за того, что растяпа-пользователь в очередной раз некорректно заполнил какое-то поле. target Фрейм, куда отправить полученную информацию (задается во фреймосодержащих документах).
Пример
Контейнер
существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.
Элементы форм
Кнопка
Тег задает кнопку произвольного вида.
Группа элементов формы
Тег позволяет группировать элементы формы.
Список вариантов
Тег задает список вариантов, которые можно выбрать при вводе информации в текстовое поле .
Тег
Тег позволяет задавать различные элементы форм: текстовые поля, различные кнопки, переключатели, флажки.
Тег
Тег используется для генерации пары ключей (закрытого и открытого) для шифрования и расшифрования данных.
Метка элемента формы
Тег используется для задания окружающего элемент формы кликабельного текста. При щелчке мышкой на этот текст значение связанного с ней элемента формы изменится.
Заголовок группы элементов формы
Тег определяет заголовок группы элементов формы, заданной тегом .
Датчик
Тег является датчиком и используется для вывода значения в определенном диапазоне.
Индикатор
Тег является индикатором хода выполнения задачи.
Группа пунктов списка
Тег позволяет группировать пункты списка .
Пункт списка
Тег определяет отдельный пункт списка .
Область вывода информации
Тег определяет область вывода результатов вычислений.
Список
Тег предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько.
Текстовая область
Тег определяет область для ввода многострочной текстовой информации.
В конце разговора о HTML-формах хочу сделать одно замечание. Некоторые браузеры отображают элементы форм, даже если они не находятся внутри контейнера
. Но злоупотреблять этим не стоит, потому что:
- в одном документе может находиться несколько форм, и именно
определяет, какие элементы к какой форме относятся;
- в теге
- присутствие на web-страницы элементов формы без самой формы считается невалидным и понижает шансы вашего сайта попасть в ТОП.
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
После анализа заголовков, сервер видит пустую строку, которая говорит об окончании заголовков. После нее сервер видит какие-то непонятные данные. Не долго думая, сервер решает, что эти данные нужны файлу, который вызывается, и посылает эти данные документу. Если этот документ — скрипт, то он получит эти данные так же, как получает данные с клавиатуры при работе с консолью, то есть, через STDIN.
Плюсы метода POST очевидны: можно передавать неограниченные объемы информации, причем, никто не увидит эту информацию после того, как вы ее отправили (имеется ввиду, в строке браузера).
Но есть и недостатки. Вы не сможете послать данные за друга. Кроме того, если необходимо «протащить» данные через несколько форм или страниц, то это вызовет дополнительные трудности.
Однако, и их можно обойти. Один из распространенных методов: формирование скрытых полей с именем и значением уже пришедших данных. У этого метода есть недостатки:
- можно легко подделать данные, хранимые в таких полях. Это делается просто: нужно сохранить страницу с формой на диск, исправить ее html-код, подставив в скрытые поля нужные данные, а затем нажать кнопку "Отправить" так же, как будто это реальная форма. Серверу без разницы от куда пришли данные, поэтому они будут обработаны так же.
- При таком подходе приходится несколько раз оптправлять данные от клиента серверу. Скажем, вы ввели логин и пароль. На следующей странице вас просят ввести адрес и номер телефона, а в полях hidden хранят ваши логин и пароль, полученные на предыдущей странице. При отправке формы заново будут отправлены и новые данные и старые (логин и пароль).
Есть так же, методы, основанные на cookie или серверных сессиях, но это — тема отдельной статьи.
Итак, мы разобрались с главными методами передачи данных (есть еще PUT, но им никто не пользуется). Для веб-мастера очень важно понимать как именно происходит передача данных и что происходит на сервере. Сейчас высокоуровневые языки программирования типа PHP, делают работу по извлечению данных автоматически, поэтому многие не понимают настоящий механизм.
Отладка и дебаггинг HTTP-запросов
HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Chrome Developer Tools) Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):
- Нажмите F12
- Выберите Network
- Выберите "All"
- Выберите нужный урл в столбце "Name"
- Выберите "Headers"
Затем вы можете получить данные формы, как показано ниже.
А как ты думаешь, при улучшении get, будет лучше нам? Надеюсь, что теперь ты понял что такое get, post и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Расширяемые языки разметки: XML, HTML, DHTML, HTML 5