Форма в 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 при этом такой:
<input type=submit [name=go] value=Отправить>
Атрибут value определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если атрибут name для кнопки будет указан, то дополнительно к основным данным формы будет отправлена пара имя=значение от самой кнопки.
» Кнопка сброса параметров
Кроме кнопки submit есть еще кнопка reset, которая сбрасывает параметры формы, а точнее, устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки обеспечивает очистку формы, например, в случае, когда были введены неправильные параметры. Синтаксис кнопки сброса:
<input type=reset value=Сброс>
» Кнопка отправки с рисунком
Вместо кнопки submit можно использовать рисунок для отправки данных. Клик на этом рисунке дает то же самое, что и нажатие на кнопку submit. Однако, кроме этого, сценарию будут переданы координаты места клика на рисунке. Координаты будут переданы в формате имя.x=коор_X, y=коор_Y. Синтаксис кнопки отправки с рисунком:
<input type=image name=имя src=рисунок>
Многострочные текстовые поля. Тег TEXTAREA
В HTML многострочные текстовые поля создаются с помощью тега TEXTAREA. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько строк. Синтаксис тега TEXTAREA:
<textarea name=имя [cols=ширина_в_символах] [rows=высота_в_символах] wrap=тип_переноса> текст по умолчанию </textarea>
Несколько значений относительно использования атрибутов: необязательные параметры cols и rows желательно все-таки указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrap определяет тип переноса текста, как будет выглядеть текст в поле ввода:
Virtual - справа от текстового поля выводится полоса прокрутки. Вводимый текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши ENTER;
Physical - этот тип зависит от типа браузера и выглядит по-разному;
None - текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не уменьщается в одну строку, появляется горизонтальная полоса прокрутки.
Следует заметить, что наиболее удобным является тип Virtual. Вот пример многострочного текстового поля с использованием атрибуту wrap=Virtual:
Списки выбора. Тег SELECT
» Списки с единственным выбором
Довольно часто существует необходимость представить какие-нибудь данные в виде списка и предусмотреть возможность выбора в этом списке. В HTML списки реализуются с помощью тега SELECT. Список выбора позволяет выбрать один вариант из множества. Пример списка с единственным выбором:
Атрибут name определяет имя параметра, который будут передан скрипту. Если атрибут size равен 1, то список будет "оснащен" полосой прокрутки. Значение, выбранное в списке по умолчанию, можно указать с помощью атрибута selected для соответствующего тега option. В приведенном примере день недели по умолчанию - Среда. Атрибут value является необязательным. Если его не указать, то будет передана строка, заключенная в тег option.
» Списки множественного выбора
С помощью тега SELECT можно также создавать списки множественного выбора. В таких списках можно выбрать не одно, а сразу несколько вариантов значений. Для того, чтобы создать список с множественным выбором, необходимо для тега SELECT указать атрибут multiple. Вот практический пример такого списка:
