Отправка данных формы. HTML-формы Создание простой формы
Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера.
Другими словами, формы используются для сбора информации введённой пользователями.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега
Рассмотрим пример использования:
Пример использования тега Да
Нет >
В этом примере мы:
Внутри первой
формы:
Разместили две
радиокнопки (
) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя
, значения мы указали разные. Для первой
checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes
). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
Внутри второй
формы:
Разместили две
радиокнопки (
) для выбора одного из ограниченного числа вариантов. Для второй
радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no
). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
Подсказка для полей ввода
Давайте рассмотри пример использования:
Пример использования атрибута placeholder
В данном примере мы указали для элемента с типом text
(однострочное текстовое поле) и типом password
(поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Используя полученные знания составьте следующую форму оформления заказа:
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Форма в HTML-документе реализуется тегом-контейнером FORM
, в котором задаются все управляющие элементы - поля ввода, кнопки и.т.д. Если управляющие элементы указаны вне содержимого тега FORM
, то они не создают форму, а используются для построения пользовательского интерфейса на веб-странице, то есть для привнесения в нее различных кнопок, флажков, полей ввода.
Обработка элементов формы производится с помощью скриптов, но они могут и вообще никак не обрабатываться.
Имена элементам формы присваиваются через их атрибут NAME
.
Каждый элемент формы может иметь начальное и конечное значения, которые являются символьными строками. Начальные значения элементов не меняются, благодаря чему может осуществляться сброс значений, указанных пользователем. Результатом этого действия будет установка всех управляющих элементов формы в своих первоначальных используемых по умолчанию значениях.
В HTML 4.01 определены следующие типы управляющих элементов:
Кнопки - задаются с помощью элементов BUTTON
и INPUT
. Различают:
»
кнопки отправки - при нажатии на них, они осуществляют отправку формы серверу;
»
кнопки сброса - при нажатии на них, управляющие элементы принимают первоначальные значения;
»
прочие кнопки - кнопки, для которых не указано действие, выполняемое по умолчанию при нажатии на них.
Зависимые переключатели (переключатели с зависимой фиксацией) - задаются элементом INPUT
и представляют собой переключатели "вкл/выкл". Если несколько зависимых переключателей имеют одинаковые имена, то они являются взаимоисключающими. Это значит, что если одна из них ставится в положение "вкл", то все остальные автоматически - в положение "выкл". Именно это и является преимуществом их использования.
Независимые переключатели (переключатели с независимой фиксацией) - задаются элементом INPUT
и представляют собой переключатели "вкл/выкл", но в отличие от зависимых, независимые переключатели могут принимать и изменять свое значение независимо от остальных переключателей. Даже если последние имеют такое же имя.
Меню - реализуется с помощью элементов SELECT
, OPTGROUP
и OPTION
. Меню предоставляют пользователю список возможных вариантов выбора.
Ввод текста - реализуется элементами INPUT
, если вводится одна строка, и элементами TEXTAREA
- если несколько строк. В обоих случаях введенный текст становится текущим значением управляющего элемента.
Выбор файлов - позволяет вместе с формой отправлять выбранные файлы, реализуется HTML-элементом INPUT
.
Скрытые управляющие элементы - создаются управляющим элементом INPUT
.
Как видите, очень много элементов задаются с помощью универсального тега INPUT
.
Полную спецификацию по HTML4 Вы можете найти
Тег FORM - контейнер форм
Как уже было сказано, форма в HTML-документе реализуется тегом-контейнером FORM
. Этот тег своими атрибутами указывает адрес сценария (скрипта), которому будет послана форма, способ пересылки и характеристику данных, содержащихся в форме. Начальный и конечный теги FORM
задают границы формы, поэтому их указание является обязательным.
Приведем атрибуты тега FORM
:
action
- единственный обязательный атрибут. В качестве его значения указывается URL-адрес запрашиваемого скрипта, которая будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись mailto:URL
, благодаря которой форма будет послана по электронной почте. Если атрибут ACTION
все-таки не указан, то содержимое формы будет отправлено на URL-адрес, с которого загружалась данная веб-страница;
method
- определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут METHOD
может принимать два значения: GET
и POST
;
enctype
- необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибутов ENCTYPE
:
APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию);
MULTIPART/FORM-DATA.
Тег INPUT и его методы
Элемент INPUT
является наиболее употребительным тегом HTML-форм. С помощью этого тега реализуются основные функции формы. Он позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и.т.д.
Обратите внимание на особенность INPUT
- у него нет конечного (завершающего) тега. Атрибуты и особенности использования INPUT
зависят от способа его использования. Рассмотрим эти способы.
»
Однострочные поля ввода
Наиболее часто используются поля ввода - ведь даже кнопка является полем ввода информации. Начнем с поля ввода текстовой информации. Формат тега INPUT
для создания поля ввода текстовой строки:
Данный тег создает поле воода с максимально допустимой длиной текста maxlen
и размером в size
знакомест. Если указан атрибут value
, то в поле будет изначально отображаться значение данного атрибута. В квадратных скобках помечены необязательные атрибуты.
Вот пример однострочного поля ввода:
»
Поля ввода пароля
Конечно, имя пользователя можно ввести с помощью обыкновенного текстового поля. А вот пароль не должен отображаться на экране при его вводе. В этом нам поможет поле ввода пароля:
Принцип работы данного тега точно такой же, как и текстового. Разница заключается в том, что вводимая информация в поле не отображается, а заменяется "звездочками
". Не рекомментуется устанавливать значение по умолчанию из соображений безопасности (value
).
Вот пример поля ввода пароля:
»
Скрытое текстовое поле
Для передачи служебной информации (о которой пользователь даже не должен подозревать) используются скрытые поля. С помощью таких полей, например, могут передаваться параметры настройки.
Такие поля передаются серверу, но на веб-странице не отображаются.
»
Независимые переключатели
Очень часто пользователю, заполняющему форму в браузере, необходимо дать возможность указать свои настройки с помощью выбора определенных значений. При этом приводятся сами эти значения, а рядом с ними помещается небольшое квадратное поле, в котором можно установить, или убрать галочку. При этом значение, соответственно, будет либо выбрано, либо нет.
Реализовать это можно опять же с помощью тега INPUT
. Для этого только необходимо в качестве значения атрибута type
указать chechbox
.
Если переключатель был включен на момент нажатия кнопки отправки данных, то скрипту будет передан параметр имя=значение
. Если же флажок выключен, то сценарию вообще ничего не будет передано - как будто переключателя вообще нет.
Переключатель по умолчанию либо включен, либо выключен. Чтобы переключатель был по умолчанию включен, необходимо для него указать атрибут checked
.
Переключатель checkbox
называется независимым, так как его состояние не зависит от состояния других переключателей checkbox
. Таким образом, в одной форме модет быть одновременно выбрано несколько переключателей.
Приведем пример независимых переключателей:
В HTML есть и такой переключатель, который зависит от других переключатель, он рассматривается далее.
»
Зависимые переключатели
Зависимы переключатель, так же как и независимый переключатель, может быть либо включен, либо выключен. При этом переключатель radio
является зависимым переключателем, поскольку на форме может быть только один включенный переключатель типа radio
. Точнее, если в форме присутствуют несколько одноименных зависимых переключателей, то включен из них может быть только один. При выборе одного переключателя все одноименные зависимые переключатели автоматически выключаются. В качестве имени переключателей воспринимается значение атрибута name.
Может быть только один активный переключатель. Пример листинга формы с зависимыми переключателями:
Данная форма будет выглядеть так:
Первый переключатель (со значением yes
) активен по умолчанию (мы установили атрибут checked
).
Как только пользователь нажмет кнопку "Отправить", скрипту script.php
будет передан параметр answer
(атрибут name
обоих переключателей) со значением yes
или no
(в зависимости от того, какой вариант выбрал пользователь).
А вот так выглядит текст скрипта , принимающий данные из рассмотренной формы и обрабатывающий ответ.
»
Кнопка отправки формы
Еще одним элементом управления типа INPUT
являются кнопки. Кнопка отправки служит для отправки скрипту ввведенных в форму параметров. Синтаксис тега INPUT
при этом такой:
Атрибут value
определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если атрибут name
для кнопки будет указан, то дополнительно к основным данным формы будет отправлена пара имя=значение
от самой кнопки.
»
Кнопка сброса параметров
Кроме кнопки submit
есть еще кнопка reset
, которая сбрасывает параметры формы, а точнее, устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки обеспечивает очистку формы, например, в случае, когда были введены неправильные параметры. Синтаксис кнопки сброса:
»
Кнопка отправки с рисунком
Вместо кнопки submit
можно использовать рисунок для отправки данных. Клик на этом рисунке дает то же самое, что и нажатие на кнопку submit
. Однако, кроме этого, сценарию будут переданы координаты места клика на рисунке. Координаты будут переданы в формате имя.x=коор_X
, y=коор_Y
. Синтаксис кнопки отправки с рисунком:
Многострочные текстовые поля. Тег TEXTAREA
В HTML многострочные текстовые поля создаются с помощью тега TEXTAREA
. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько строк. Синтаксис тега TEXTAREA
:
Несколько значений относительно использования атрибутов: необязательные параметры cols
и rows
желательно все-таки указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrap
определяет тип переноса текста, как будет выглядеть текст в поле ввода:
Virtual
- справа от текстового поля выводится полоса прокрутки. Вводимый текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши ENTER
;
Physical
- этот тип зависит от типа браузера и выглядит по-разному;
None
- текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не уменьщается в одну строку, появляется горизонтальная полоса прокрутки.
Следует заметить, что наиболее удобным является тип Virtual
. Вот пример многострочного текстового поля с использованием атрибуту wrap=Virtual
.
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента