Поля ввода формы

Форма отображается в окне браузера в виде набора стандартных элементов управления, используемых для заполнения полей формы значениями, которые затем передаются Web-серверу. Значение вводится в поле ввода пользователем или назначается по умолчанию. Для создания полей средствами языка HTML существуют специальные тэги: <input>, <select>, <textarea>, которые употребляются только внутри тэга <form>.

2.11.8. Тэг <input>

<input type="тип_поля_ввода" name="имя_поля_ввода" другие_параметры>

Это наиболее употребительный тэг, с помощью которого можно генерировать внутри формы поля для ввода строки текста, пароля, имени файла, различные кнопки. Он имеет два обязательных параметра: type и name. Параметр type определяет тип поля: селекторная кнопка, кнопка передачи и др. Параметр name определяет имя, присваиваемое полю. Оно не отображается браузером, а используется в качестве идентификатора значения, передаваемого Web-серверу. Остальные параметры меняются в зависимости от типа поля. Ниже приведено описание типов полей, создаваемых при помощи тэга <input>, и порождаемых ими элементов ввода.

type=”text”

Создает элемент для ввода строки текста.

Дополнительные параметры:

· maxlength=”n” - задает максимальное количество символов, разрешенных в текстовом поле. По умолчанию — не ограничено.

· size=”n” - максимальное количество отображаемых символов.

· value = ”начальное_значение”. Первоначальное значение текстового поля.

type=”password”

Создает элемент ввода строки текста, отличающийся от предыдущего только тем, что все вводимые символы представляются в виде символа *. Поле password не обеспечивает безопасности введенного текста, так как на сервер он передается в незашифрованном виде.

type=”files”

Создает поле для ввода имени локального файла, сопровождаемое кнопкой Browse. Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или выбрать его из диалогового окна. Для корректной передачи присоединенного файла следует установить значения параметров формы равными enctype="multipart/form-data" и method=”post”. В противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое. Дополнительные параметры maxlength и size имеют тот же смысл, что и для элементов типа text и password.

type=”checkbox”

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

Дополнительные параметры:

· value=”строка”. Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value всех установленных флажков.

· checked. Если указан параметр checked, элемент является выбранным по умолчанию.

type=”radio”

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

Отображается в виде круглой кнопки. Дополнительные параметры:

· value=”строка”. Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы.

· checked. Устанавливает элемент выбранным по умолчанию. Один и только один элемент в группе должен иметь этот параметр.

type=”submit”

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

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

Если параметры name и value присутствуют, например,

<input type=”submit” name="submit_button" value="ok">,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="ok". Внутри формы могут существовать несколько кнопок передачи.

type=”reset”

Создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде прямоугольной кнопки с надписью Reset. Надпись можно изменить при помощи дополнительного параметра

value=”название_кнопки”

Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее отсутствует параметр name.

type=”image”

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

· src=”url_изображения”. Задает URL-адрес файла с графическим изображением элемента.

· align=”тип_выравнивания”. Задает тип выравнивания изображения относительно текущей строки текста.

Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде name.x=n&name.y=m включаются браузером в список параметров формы, посылаемых на сервер.

type=”hidden”

Создает скрытый элемент, не отображаемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером. Скрытое поле можно использовать, например, в следующем случае. Пользователь заполняет форму и отправляет ее серверу. Сервер посылает пользователю для заполнения вторую форму, которая частично использует информацию, содержащуюся в первой форме. Сервер не хранит историю диалога с пользователем, он обрабатывает каждый запрос независимо и при получении второй формы не будет знать, как она связана с первой. Чтобы повторно не вводить уже введенную информацию, можно заставить CGI-программу, обрабатывающую первую форму, переносить необходимые данные в скрытые поля второй формы. Они не будут видимы пользователем и, в то же время, доступны серверу. Значение скрытого поля определяется параметром value.

2.11.9.Тэг <select>

Тэг <select> предназначен для того, чтобы организовать внутри формы выбор из нескольких вариантов без применения элементов типа checkbox и radio. С помощью тэга <select> варианты выбора более компактно представляются в окне браузера в виде элементов ниспадающего меню или списка прокрутки. Пример:

<select name="sel_name" size="2">

<option value="Red">Red</option>

<option value="Yellow">Yellow</option>

<option value="Green">Green</option>

</select>

Тэг имеет следующие параметры:

name=”имя_поля”. Обязательный параметр. При выборе одного или нескольких элементов формируется список выбранных значений, который передается на сервер под именем name.

size=”n”. Устанавливает число одновременно видимых элементов выбора. Если n=”1”, то отображается ниспадающее меню, если n>1, то — список прокрутки с n одновременно видимыми элементами.

Элементы меню задаются внутри тэга <select> при помощи тэга <option>:

<option selected value=”строка”/> содержимое_тэга

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

Тэг <textarea>

Тэг <textarea> создает внутри формы поле для ввода многострочного текста, отображаемое в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Для пересылки на сервер каждая введенная строка дополняется символами %0D%0A (ASCII-символы "Возврат каретки" и "Перевод строки" с предшествующим символом %), полученные строки объединяются в одну строку, которая и отправляется на сервер под именем, задаваемым параметром name.

<textarea name="ta_name" rows="m" cols="n">

текст

</textarea>

Параметры:

· name. Необходимый параметр, используемый для идентификации данных при пересылке на сервер.

· cols=”n”. Задает число столбцов видимого текста.

· rows=”m”. Задает число строк видимого текста.

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