Формы

Формы являются наиболее популярным способом интерактивного взаимодействия во Всемирной паутине. С помощью HTML можно создавать простые формы, предполагающие ответы типа “да” и “нет”, можно разрабатывать сложные формы для заказов или для того, чтобы получить от читателей какие-либо комментарии и пожелания.

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

Работа с тэгами форм

<TEXTAREA> - определяет поле, в которое пользователь вводит многострочную текстовую информацию
<SELECT> - позволяет пользователю сделать выбор в окне с полосой прокрутки либо в раскрывающемся меню
<INPUT> - обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы.

Любое количество этих тэгов может быть размещено в контейнере FORM.

Тэг <FORM>

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

ACTION - определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма.
METHOD - указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение POST, тогда информация посылается отдельно от URL. Если указано значение GET, информация посылается вместе с URL.

Тэг <TEXTAREA>

Этот тэг предназначен для построения поля для ввода многострочной текстовой информации. Тэг <TEXTAREA> имеет следующие атрибуты:

NAME - обязательный атрибут, определяющий название информации.
ROWS - устанавливает высоту поля, т.е. число строк в нем.
COLS - устанавливает ширину поля, т.е. число столбцов в нем.

Между тэгами <TEXTAREA> и </TEXTAREA> можно разместить любой текст, выводящийся в поле по умолчанию.

Ниже приведен фрагмент HTML - кода и его интерпретация браузером

HTML - код	Интерпретация
<FORM METHOD="POST"> <P> <TEXTAREA NAME="S1" ROWS="3" COLS="12"> DefaultText </TEXTAREA> </P> </FORM>	DefaultText

Тэг <SELECT>

Этот тэг используется для создания всплывающего меню или списка опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Как и тэг <TEXTAREA>, тэг <SELECT> требует обязательного определения имени в атрибуте NAME. Ниже перечислены атрибуты тэга <SELECT>:

NAME - определяет название информации
SIZE - определяет вертикальный размер окна для опций выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список опций. Если указано значение больше 1, то опции выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем добавляются пустые поля.
MULTIPLE - этот атрибут позволяет производить выбор сразу нескольких опций.

Список опций включается в контейнер <SELECT> при помощи тэгов <OPTION>. Этот тэг имеет два атрибута:

VALUE - указывает значение, возвращаемое программе обработки в случае выбора опции пользователем
SELECTED - указывает на опцию, выделенную по умолчанию.

Ниже приведен фрагмент HTML - кода и его интерпретация браузером

HTML - код	Интерпретация
<FORM METHOD="POST"> <P> <SELECT NAME="D1" SIZE="1"> <OPTION VALUE="1">Item1</OPTION> <OPTION VALUE="2">Item2</OPTION> <OPTION SELECTED VALUE="3">Item3</OPTION> <OPTION VALUE="4">Item4</OPTION> <OPTION VALUE="5">Item5</OPTION> </SELECT> </P> </FORM>

Тэг <INPUT>

Тэг <INPUT>, в отличие от <TEXTAREA> и <SELECT>, является одиночным тэгом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и очистки формы (Reset, Clear).

Тэг <INPUT> располагает следующими атрибутами:

NAME - определяет имя данных. Является обязательным для всех видов данных, кроме представляемых по нажатию кнопок Submit и Clear
SIZE - указывает размер поля в символах
MAXLENGTH - определяет максимально возможное число символов, вводимых в поле
VALUE - для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке
CHECKED - устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тэгов <INPUT> не употребляется
TYPE - устанавливает тип поля.

Атрибут TYPE тэга <INPUT> может принимать следующие значения:

TEXT - является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE
PASSWORD - Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE
CHECKBOX - Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции “галочкой”. Может использоваться совместно с атрибутами NAME (обязательный), VALUE и CHECKED (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда можно выбрать сразу несколько опций из числа предложенных
RADIO - позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный). Также используются атрибуты VALUE и CHECKED
RESET - позволяет создать кнопку для очистки формы. Атрибут VALUE может быть использован здесь для наименования этой кнопки ( по умолчанию кнопка имеет надпись RESET).
SUBMIT - Используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой - скриптом. В атрибуте VALUE можно указать название для этой кнопки.

Ниже приведены фрагменты HTML - кода и их интерпретация браузером

TYPE (тип поля)	HTML - код	Интерпретация
TEXT	<FORM METHOD="POST"> <P> <INPUT TYPE="TEXT" NAME="T1" SIZE="20"VALUE="InitialText"> </P> </FORM>
PASSWORD	<FORM METHOD="POST"> <P> <INPUT TYPE="PASSWORD" NAME="T2" SIZE="20" VALUE="InitialText"> </P> </FORM>
CHECKBOX	<FORM METHOD="POST" > <P> <INPUT TYPE="CHECKBOX" NAME="C1" VALUE="ON" CHECKED>Check1<BR> <INPUT TYPE="CHECKBOX" NAME="C2" VALUE="ON1"> Check2<BR> <INPUT TYPE="CHECKBOX" NAME="C3" VALUE="ON"> Check3 </P> </FORM>	Check1 Check2 Check3
RADIO	<FORM METHOD="POST"> <P> <INPUT TYPE="RADIO" VALUE="V1" CHECKED NAME="R1">Radio1<BR> <INPUT TYPE="RADIO" NAME="R1" VALUE="V2">Radio2<BR> < INPUT TYPE="RADIO" NAME="R1" VALUE="V3">Radio3<BR> </P> </FORM>	Radio1 Radio2 Radio3
SUBMIT	<FORM METHOD="POST"> <P> <INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"> </P> </FORM>

Разработка форм

Для более красивого расположения элементов тэга <FORM> и более удобного их восприятия пользователями внутри тэга <FORM> можно использовать различные тэги HTML, например: перевода строки (<BR>), предварительно отформатированного текста (<PRE>), использовать таблицы, списки.

[ Оглавление ]

helloworld.ru © 2001-2021 Все права защищены