2.9 Элементы форм в html-документе.

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

Структура формы. Все дескрипторы¹ввода, ассоциированные с одной формой, должны:

• Содержаться в дескрипторе <form>;

• Обрабатываться одним и тем же обработчиком формы²;

Атрибуты. С дескриптором <form> всегда используются два ключевых атрибута:

• Action. Этот атрибут содержит адресURLCGI-программы обработки формы. Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

• Method.Этот атрибут содержит метод отправки данных обработчику. В зависимости от характера обработки выбирается один из методов:

  • Get. Отправка данных формы в составе адресаURLпрограммы-обработчика;

  • Post. Отправка данных формы в заголовке пакета протокола передачи гипертекстаHTTP³.

Дескрипторы ввода данных

Поля ввода

Текст

Текстовые поля имеют одну строку, предназначенную для ввода пользователем информации.

• Для создания текстового поля используется дескриптор <input> с атрибутомtype, равнымtext.

<input type=”text”>

• С помощью атрибута nameэлементу управления присваивается имя

<input type=”text” name=”firstname”>

• Размером текстового поля можно управлять с помощью атрибутов:

  • Size. Длина текстового поля в символах.

  • Maxlength. Максимальное количество символов, которое пользователь может ввести в поле.

Пароли

Поле вода пароля представляет собой обычное текстовое поле, в котором не отображаются вводимые пользователем символы. Вместо них отображаются специальные маркеры, такие как точки или звездочки, так что вводимый пароль становится невозможно подсмотреть.

• Для ввода пароля используется дескриптор <input> с атрибутомtype, равнымpassword.

<input type=” password”>

• С помощью атрибута nameэлементу управления присваивается имя

<input type=” password” name=”pasw”>

• Размером текстового поля можно управлять с помощью атрибутов:

  • Size. Длина пароля в символах.

  • Maxlength. Максимальное количество символов пароля , которое пользователь может ввести в поле.

Флажки, переключатели, раскрывающиеся списки

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

• Флажки. Пользователь получает возможность выбора нескольких предопределенных значений.

• Переключатели. Пользователь может выбрать только одно из предопределенных значений.

• Раскрывающиеся списки. Пользователю предоставляется возможность выбора из большого числа вариантов.

Для создания элементов флажков нужно выполнить следующие действия

• Использовать дескриптор <input>, в котором атрибутуtypeприсвоено значениеcheckbox.

• Определить каждый из вариантов выбора с помощью следующих атрибутов:

  • атрибут nameсодержит имя варианта выбора;

  • атрибут valueсодержит возвращаемое в форму значение при выборе пользователем данного варианта;

  • для определения значения элемента, принятого по умолчанию, используется атрибут checked. Этот вариант при загрузке формы будет выделенным.

Для создания элементов переключателей нужно выполнить следующие действия

• Использовать дескриптор <input>, в котором атрибутуtypeприсвоено значениеradio.

• Определить каждый из вариантов выбора с помощью следующих атрибутов:

  • атрибут nameсодержит имя варианта выбора;

  • атрибут valueсодержит возвращаемое в форму значение при выборе пользователем данного варианта;

  • для определения значения элемента, принятого по умолчанию, используется атрибут checked. Этот вариант при загрузке формы будет выделенным.

Для создания раскрывающихся списков используют два дескриптора:

• Дескриптор <select> обрамляет весь список. В атрибутеnameуказывается имя всего списка.

• В наборе дескрипторов <option> определяются элементы списка. При этом в каждом дескрипторе <option> определяется уникальное значение атрибутаvalue.

Многострочные текстовые блоки

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

• В дескрипторе <textarea> определяется текстовый блок и его параметры.

• Атрибут rowsпозволяет задать высоту тестового блока в строках; при расчете отображаемой высоты блока учитываются характеристики используемого шрифта и межстрочный интервал (по умолчанию принимается высота в две строки).

• Атрибут colsопределяет ширину тестового блока; при расчете отображаемой ширины блока учитываются характеристики используемого шрифта (по умолчанию принимается ширина в 20 символов).

• Текст, водимый пользователем в тестовый блок, является его значением, а имя блока должно быть задано в атрибуте name.

Подтверждение и очистка содержимого формы

Кнопки подтверждения и очистки содержимого формы позволяют выполнить над данными формы предопределенные действия.

Эти кнопки создаются с помощью дескриптора < input> с атрибутамиresetиsubmit.

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

<inputtype=”submit”value=”Отправка содержимого формы”>

• Очистка формы. Если пользователь решил заполнять форму заново, он может очистить ее от уже введенных значений, не перезагружая повторно страницу. Это реализуется с помощью кнопки, помещаемой в форме и имеющей структуру:

<inputtype=”reset”value=”Очистка содержимого формы”>