5.2.5. Формы

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

Введите свое имя

В ведите отчество

В ведите фамилию

В ведите имя пользователя

В ведите пароль

В ведите свой e-mail адрес

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

Форма состоит из одного или нескольких элементов управления. Элементы управления - это элементы интерфейса, которые позволяют пользователю взаимодействовать с HTML -документом.

1. Строки ввода текста, используемые для ввода алфавитно-цифровых данных.

2. Строки ввода пароля

3. Области ввода текста, позволяющие вводить больше одной строки.

4. Переккккключатели - флаги проверки, которые позволяют разрешать или запрещать действие той или иной опции.

5. Переключатели - радиокнопки, позволяющие пользователю выбрать одну кнопку из списка.

6. Всплывающие меню и раскрывающиеся списки - выбор одного элемента из списка

7. Кнопки Submit и Reset - передача данных на Web - сервер или сброс введенных данных.

Пример

<FORM METHOD="POST" ACTION="cgi/data">

Введите свое имя:

<INPUT TYPE="text"NAME="username"VALUE="john"

SIZE="25"MAXLENGTH="45">

</FORM>

Для написания формы используется тег <FORM>.

METHOD="POST" заставляет передавать собранную информацию с помощью стандартных процедур ввода - вывода.

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

Он может быть написан на C, Perl ,PHP и т.д

Введите свое имя:

По умолчанию вводимая строка текста ограничивается 20 символами.

ТИПЫ	ОПИСАНИЕ
Checkbox	Управляющий элемент- переключатель(флаг проверки)
Password	Строка ввода пароля
Radio	Переключатель - радиокнопка
Reset	Кнопка "Reset"
Submit	Кнопка "Submit"
Text	Строка для ввода текста

В общем виде

<INPUT TYPE="text" NAME="var - name" VALUE="строка по умолчанию" SIZE="25"MAXLENGTH="45">

Опция TYPE позволяет указывать тип управляющего элемента (см. таблицу).

Опция NAME указывает имя переменной, в которой будет храниться полученное значение.

Опция VALUE определяет текст, помещаемый в строку ввода при отображении формы.

Опция SIZE определяет максимальное число символов, которое может увидеть при вводе пользователь.

Опция MAXLENGTH определяет количество символов, вводимые пользователем. Если MAXLENGTH больше SIZE и если пользователь введет больше символов, чем указано в SIZE, то текст будет прокручиваться по горизонтали.

Если нужно ввести большой текст, то нужно использовать область для ввода текста. Она определяется тегом TEXTAREA

<TEXTAREA NAME="var - name"Rows="4"Cols="80">

текст, по умолчанию отображаемый в области ввода

</TEXTAREA>

Опция NAME указывает имя переменной, в которой будут храниться полученные данные, Rows и Cols определяют размер области в строках и столбцах соответственно.

Флаги - переключатели позволяют пользователю управлять чем-то, что может быть "включено" или "выключено".

<P>

<INPUT TYPE="checkbox"NAME="var1-name"> Приложения

<INPUT TYPE="checkbox"NAME="var2-name"> Инструментальные средства

<INPUT TYPE="checkbox"NAME="var3-name"> игры на CD-ROM

<INPUT TYPE="checkbox"NAME="var4-name"> Утилиты

<P>

Приложения

Инструментальные средства

Игры на CD-ROM

Утилиты

Переключатели - радиокнопки применяются для того, чтобы организовать выбор одного элемента из нескольких.

Название "радиокнопки" получено т.к. они очень похожи на кнопки автомобильных радиоприемников. Если щелкнуть по второй кнопке, то первая нажатая возвращается в исходное положение и т.д.

<P>

<INPUT TYPE="radio"NAME="var-name"VALUE="red">Red

<INPUT TYPE="radio"NAME="var-name"VALUE="grn">Green

<INPUT TYPE="radio"NAME="var-name"VALUE="blu">Blue <P>

R ed

G reen

B lue

Опция VALUE обязательна, она описывает возвращаемое значение.

Всплывающее меню позволяют пользователю выбрать один или несколько элементов из меню.

Эти меню занимают меньше места на экране, чем кнопки, поэтому когда в списке больше 3-4 элементов, то лучше использовать меню. Используется тег <SELECT>.

Выберите ваши любимые фрукты:

<SELECT NAME="var-name">

<OPTION> Яблоки

<OPTION> Бананы

<OPTION> Апельсины

<OPTION> Манго

<OPTION> Грейпфруты

</SELECT>

Яблоки

Яблоки

Бананы

Апельсины

Манго

Грейпфруты

В ыберите ваши любимые фрукты:

Как правило, первый в списке элемент является элементом по умолчанию.

Может использоваться список с прокруткой.

Выберите ваши любимые фрукты:

<SELECT NAME="var-name"MULTIPLE SIZE="4">

<OPTION> Яблоки

<OPTION> Бананы

<OPTION> Апельсины

<OPTION> Манго

<OPTION> Грейпфруты

</SELECT>

Д

Яблоки

Бананы

Апельсины

Манго

Грейпфруты

ля этого вводится опция MULTIPLE. Опция SIZE указывает количество одновременно видимых опций.

Выберите ваши любимые фрукты:

Существуют еще два типа кнопок Submit и Reset.

Кнопка Submit используется для того, чтобы послать данные, находящиеся в текущей форме, на сервер, а кнопка Reset используется для того, чтобы вернуть всем элементам управления их значения по умолчанию (сброс).

<INPUT TYPE="Submit"VALUE="Submit Data">

Опция VALUE является необязательной и указывает текст, который будет отображен на кнопке. Если опция отсутствует, то будет надпись Submit.

<INPUT TYPE="Reset"VALUE="Reset Value">

Существует достаточно много специальных редакторов для создания HTML-документов – Front Page Express, Hot Dog, Coffee Cup, Dreamviewer и т.д.

В последнее время появилось много новых технологий , используемых при создании Web-сайтов (например,Flash). Развивается и сам язык HTML.В настоящее время уже является стандартом версия 4.0.