Создание форм.

Для получения от пользователя некоторой информации используют заполняемые формы, определяемые тегом <FORM>. Например, можно использовать формы для проведения опросов или при разработке регистрационных форм. В одном документе может быть определено несколько форм для заполнения, но вложенные теги <FORM> не допускаются. Формат контейнера <FORM> следующий:

Здесь используются следующие атрибуты:

action="url" - URL-адрес сервера запросов, куда будет отослано содержание формы после подтверждения. Если этот атрибут отсутствует, будет Использован URL-адрес текущего документа.

method="GET/POST" - http-метод, используемый для посылки содержания заполненной формы на сервер. Возможные варианты при этом следующие:

§ GET — этот метод используется браузером по умолчанию и осуществляет присоединение содержимого заполненной формы к URL;

§ POST - при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса.

ENCTYPE="..." задает тип кодирования содержимого заполненной формы. Этот атрибут действует только когда используется метод POST, и даже в этом случае имеет только одно возможное значение - application/x-www-form-urlencoded.

Внутри контейнера <FORM> могут находиться любые теги, кроме другого контейнера <FORM>. Для задания интерфейсных элементов внутри <FORM> используются теги <INPUT>, <SELECT> и <TEXTAREA>.

Тег <INPUT> используется для задания простого элемента ввода, при этом могут быть использованы следующие атрибуты.

name="идентификатор" - имя для поля ввода, используемое при идентификации после подтверждения формы.

type="параметр" - задает тип элемента; параметр может принимать одно из следующих значений:

§ hidden - тогда пользователю не предлагаются поля для ввода, но содержимое команды передается при подтверждении и посылке формы;

§ image - определяется рисунок, по которому можно сделать щелчок мышью, что приводит к немедленному подтверждению и отсылке формы;

§ text - поле ввода текста. Это значение используется по умолчанию;

§ password - поле ввода пароля, причем вводимые символы отображаются звездочками;

§ checkbox - переключатель, принимающий положения "включено" и "выключено";

§ radio - переключатель, принимающий положения "включено" и "выключено", причем может быть выбран только один из элементов;

§ submit - кнопка, действие которой сводится к отсылке содержимого заполненной формы на сервер;

§ reset - кнопка, которая устанавливает во всех интерфейсных элементах значения по умолчанию.

value="значение" - для полей ввода текста или пароля может быть использовано для задания начального содержания поля, а для checkbox или radio задает значение, когда элемент находится в отмеченном состоянии.

size="n" - задает физический размер поля ввода в символах, однако этот атрибут действует только для элементов ввода текста или пароля.

maxlength="n" - определяет максимальное количество введенных символов, которые будут приниматься для ввода.

Приведем пример несложной формы, в которой использован тег <input> и его различные параметры.

Пример 19: Пример создания формы.

<FORM method="POST" name="student" action=

"http://www.mycom.com/cgi-bin/script.egi" <Р>Введите Ваше имя <INPUT type="text"

name="T1" size="45"></P>

<P><INPUT type="radio" value="Vl" checked nате="К1">Учащийся </Р>

<P><INPUT type="radio" name=”R1” value="V2">Другое</Р>

<P><INPUT type="submit" value="Отправить" name="B1">

<INPUT type="reset" value="Очистить" name="B2"> </P>

</FORM>

Тег <SELECT> предназначен для создания списков в форме, при этом внутри разрешена только последовательность тегов <OPTION>, за каждым из которых следует некоторое количество простого текста. Атрибуты тега <SELECT> следующие:

name="идентификатор" -символьное имя для элемента <SELECT>, по которому он идентифицируется;

size="n" - если значение равно 1 или если этот атрибут опущен, то элемент <SELECT> будет представлен как выпадающее меню; если size=2 или более, то элемент будет представлен как окно выбора, а значение будет определять количество видимых элементов списка;

§ multiple - если этот атрибут присутствует, то допускается множественный выбор из списка.

Пример 20: Создание списков в формах.

<HTML>

<HEAD>

<ТITLE>Создание списка</ТITLE> </НЕAD>

<BODY> <BASEFONT size=5>

<TABLE> <TR>

<ТD>Какой язык Вы изучаете:</TD>

<ТD>В какой стране Вы проживаете:</TD>

<ТD>Какие курсы Вы хотели бы посещать:</TD> </TR> <TR>

<TD> <FORM>

<SELECT>

<OPTION>Английский

<OPTION>Немецкий

<OPTION>Французский

<OPTION>Арабский

<OPTION>Русский

<OPTION>Итальянский

<OPTION>Испанский

<OPTION>Японский

<OPTION>Китайский

<OPTION>Корейский

</SELECT> </FORM>

</TD>

<TD> <FORM>

<SELECT size=3>

<OPTION> Россия

<OPTION>Англия

<OPTION>Испания

<OPTION>Италия

<OPTION>Канада

<OPTION>Латвия

<OPTION>Литва

<OPTION>США

<OPTION>Украина

<OPTION>Франция

</SELECT>

</FORM>

</TD>

<TD>

<FORM>

<SELECT multiple>

<OPTION>Дизайн

<OPTION>Программирование

<OPTION>Менеджмент

<OPTION>Бухгалтерский учет

<OPTION>Машинопись

<OPTION>Автодело

<OPTION>Кибернетика

<OPTION>Полиграфия

<OPTION>Журналистика

<OPTION>Статистика

</SELECT>

</FORM>

</TD>

<TR>

</TABLE>

</BODY>

</HTML>

И, наконец, контейнер <TEXTAREA> может быть использован для расположения многострокового поля ввода с необязательным содержимым в форме. Основными атрибутами тега <TEXTAREA> являются:

name="..." - символьное имя поля ввода;

rows="..." - число строк в поле ввода, То есть высота поля;

cols="..." - число столбцов в поле ввода, то есть ширина поля.

Пример 21: Создание текстовой области.

<ТITLE>Создание простой формы</ТITLE> </НЕAD> <BODY>

Напишите Ваши предложения и замечания:<BR>

</FORM> </BODY>

</HTML>

Объект <TEXTAREA> имеет полосы прокрутки, так что может быть введено любое количество текста. Содержание по умолчанию должно быть ASCII-текстом, при этом символы перевода строки

воспринимаются.

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

Задать вопрос.