Формы в HTML-документах. Формы в HTML Подписи элементов управления

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

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .

Рассмотрим пример использования:

Пример использования тега Да Нет
Да Нет

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Давайте рассмотри пример использования:

Пример использования атрибута placeholder Login:

Password:
Далее

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Используя полученные знания составьте следующую форму оформления заказа:

Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде 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.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?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.

Тег FORM устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега INPUT, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www..cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH - шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Синтаксис

...

Закрывающий тег
Обязателен.

Параметры
action - адрес CGI-программы или документа, которые обрабатывает данные формы.
enctype - MIME-тип информации формы.
method - метод протокола HTTP.
name - имя формы.
target - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Пример 1. Использование тега FORM

Как по вашему мнению расшифровывается аббревиатура "ОС"?

Офицерский состав

Операционная система

Большой полосатый мух

Описание параметров тега FORM Параметр ACTION

Описание
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис
...

Аргументы
В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Значение по умолчанию
Нет.

Пример 2. Добавление обработчика формы

...

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге FORM.

Пример 3. Использование адреса электронной почты

...

Параметр ENCTYPE

Описание
Устанавливает MIME-тип для данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (INPUT type=file), следует определить параметр enctype как multipart/form-data.

Синтаксис
...

Аргументы
Имя MIME-типа в любом регистре. Допускается устанавливать сразу несколько значений, разделяя их запятыми.

Значение по умолчанию
application/x-www-form-urlencoded

Пример 4. Изменение типа данных

...

Параметр METHOD

Описание
Метод сообщает серверу о цели запроса. Различают два основных метода: GET и POST. Существуют и другие методы, но они пока мало используются.

Синтаксис
...

Аргументы
Значение параметра method не зависит от регистра и его следует указывать без кавычек. Различают два метода - GET и POST.

GET
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST
Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

Значение по умолчанию
GET

Пример 5. Метод отправки формы

...

Параметр NAME

Описание
Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.

Синтаксис
...

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.

Значение по умолчанию
Нет.

Пример 6. Использование имени формы

function validForm() {
alert("Имя " + document.forms("form1").nick.value)
}




Имя:

Параметр TARGET

Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис
...

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

Blank - загружает страницу в новое окно браузера.
_self - загружает страницу в текущее окно.
_parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 7. Открытие новой страницы

...