Создание HTML-форм

Основные виды HTML форм:

1) Кнопки.

2) Списки.

3) Текстовые поля.

4) Переключатели (флажки).

5) Радиокнопки.

Элементы управления HTML форм позволяют пользователю вводить информацию с помощью браузера и отправлять её на обработку Web-сайту.

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

Группа дескрипторов, формирующих HTML форму.

1. Парный дескриптор < FORM> - задает свойство формы и содержит в своем контейнере элементы этой формы.

Атрибуты:

Атрибут NAME – для задания имя формы.

Например, NAME=”anketa”.

Каждый элемент HTML формы, как и сама форма, должны быть обязательно поименованы.

Атрибут METHOD – определяет, каким способом HTML форма будет отправляться к программе-обработчику.

Есть два варианта:

1)=POST – используется чаще всего.

2)=GET – используется для отправки HTML формы с помощью URL адреса. (По умолчанию задается метод GET).

Атрибут ACTION – задает местоположение программы-обработчика. Значением атрибута служит адрес (абсолютный или относительный).

Например,

ACTION=”executive.php” – файл, в котором хранится программа-обработчик.

Атрибут ENCTYPE – тип кодировки.

Варианты:

=”text/htm/”

=”text/plain” – обычный текст без элементов форматирования

Атрибут TARGET – определяет в какой фрейм отправить полученную информацию. Имеет значение во фреймосодержащих документах.

< FORM action=" https://......cgi" method=" GET" |" POST" enctype=" encodingType" name=" formName" target=" windowName" onSubmit=" Handler" >

< /FORM>

HTML форма отсылается на обработку Web-сайту в виде записей, которые выглядят следующим образом:

Имя элемента формы(Name) = значение(Value).

Для списков, переключателей, кнопок, радиокнопокобязательно задавать значение атрибута Value. В остальных случаях значение задает пользователь (во время ввода). В случае если при формировании элементов формы типа переключатель (флажок) атрибут Value не используется, в качестве значения будет формироваться предлогOn.

Для списков таковым значением по умолчанию будет назначаться текст, расположенный сразу после дескриптора < OPTION>.

Если же используется элемент Web-формы для передачи информации Web-сайту, при передаче формы на обработку должна появиться запись:

Имя элемента формы = его значение.

Элементы форм

1.Текстовые поля. Бывают двух видов:

Многострочное. Парный дескриптор < TEXTAREA> …< /TEXTAREA>

Атрибуты:

· Атрибут NAME.

· Атрибут ROWS – высота поля в строчках.

· Атрибут COLLS – ширина поля в символах.

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

Однострочное. Формируется с помощью одиночного дескриптора

< INPUT > и атрибута TYPE с указанием значения EXT.

Атрибуты:

· Атрибут NAME.

· Атрибут TYPE – задает тип создаваемого элемента. Для создания однострочного поля значение атрибута TYPE=”Text”.

· Атрибут SIZE – ширина поля в символах.

· Атрибут MAXLENGTH – максимальная длина вводимого текста.

· Атрибут VALUE – используется для хранения значения элемента формы.

Пример:

Мы можем задать значение поля по умолчанию VALUE=”Например, пошел дождь”.

< INPUT TYPE=”Text” VALUE=”Например, пошел дождь”>

2.Переключатель или флажок.

Создаёт поле для установки флажка, который можно установить или сбросить. Элементы должны быть объединены в группу с одним именем, для выбора сразу нескольких значений.

Формируется с помощью дескриптора < INPUT>, атрибут TYPE которого принимает значение TYPE=”CHECKBOX”.

< INPUT TYPE=”CHECKBOX”>

У данного дескриптора имеются также атрибуты:

· Атрибут NAME.

· Атрибут CHESKED – если он указан, то флажок будет установлен.

3.Радиокнопка.

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

Достигается с помощью двух дескрипторов < INPUT>, имеющих одинаковое имя. Например, NAME=”1”.

< INPUT TYPE=”RADIO” NAME=”1” VALUE=”GENAT”>

< INPUT TYPE=”RADIO” NAME=”1” VALUE=”XOLOST”>

4.Текстовое поле типа пароль.

< INPUT TYPE=”PASSWORD”>

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

5. Кнопка.

· < INPUT TYPE=”BUTTON”>

Используется для вызова клиентских скриптов (сценариев).

Выглядит так:

· Кнопка созданная с помощью:

< INPUT TYPE=”SUBMIT” VALYE=”Пуск”>

предназначена для отправки формы на обработку в Web сайт.

Выглядит так:

· Кнопка сброса формы.

Предназначена для установления первоначального значения формы.

< INPUT TYPE=”RESET” VALUE=”Сброс”>

Выглядит так:

Форма обязательно должна содержать кнопки SUBMIT и RESET.

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

Парный дескриптор < SELECT > …< / SELECT > (дескриптор первого уровня)формирует свойства меню.

Атрибуты:

· Атрибут NAME.

· Атрибут SIZE.

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

Выглядит так:

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

Внутри контейнера дескриптора< SELECT> находятся элементы меню, которые формирует одиночный дескриптор < OPTION > (дескриптор второго уровня). Пример:

< SELECT NAME=”Menu”>

< OPTION> Файл

< OPTION> Печать

< /SELECT>

Ширина меню определяется максимальным значением элемента меню.

· Атрибут MULTIPLE – для выбора нескольких разных опций.