2. Формы
Форма – это раздел документа, содержащий обычные данные, разметку, специальные элементы, называемые "элементы управления" (переключатель, radio-кнопка, меню и т.д.), и подписи для этих элементов управления. С помощью формы пользователь может послать некоторую информацию на web-сервер.
Формы передают информацию программам-обработчикам в виде пар
[имя переменной]=[значение переменной]
Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.
Элемент-форма <FORM>
Описание: определяет элемент-форму.
Начальный тег: необходим.
Конечный тег: необходим.
Определения атрибутов:
name = “строка” – задает имя формы;
action = “ссылка” – определяет обработчик формы (имя программы-скрипта);
method = “get|post” – определяет, какой метод HTTP используется для отправки набора данных формы. Возможные (нечувствительные к регистру) значения - "get" (по умолчанию) и "post":
методом "get" набор данных формы присоединяется к URI, определённому атрибутом action (со знаком "?" в качестве разделителя), и этот новый URI высылается программе-обработчику;
методом "post" набор данных формы включается в тело формы и высылается программе-обработчику;
enctype= “строка” – Определяет способ кодирования данных формы при их отправке на сервер. Значением по умолчанию этого атрибута является "application/x-www-form-urlencoded".
Значения:
application/x-www-form-urlencoded - Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня);
multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов;
text/plain Пробелы заменяются знаком +, буквы и другие символы не кодируются.
Пример:
<FORM name=”form1” action=”http://www.cspu.ru/script.php” method=”post” enctype=”application/x-www-form-urlencoded”> описание элементов формы… </FORM> |
Пример описания формы, отправляющей содержимое методом POST скрипту script.php. |
Элементы управления формы
Элемент <INPUT>
Описание: определяет элемент формы.
Начальный тег: необходим.
Конечный тег: запрещен.
Определения атрибутов:
type = “text|password|checkbox|radio|submit|reset|button|hidden” – определяет тип создаваемого элемента (по умолчанию "text"):
text – однострочный элемент для ввода текста;
password – как "text", но вводимый текст изображается так, чтобы скрыть вводимые символы (напр., серией "звёздочек");
checkbox– переключатель;
radio– как “checkbox”, за исключением того, что, при использовании одного и того же имени элемента, они действуют взаимоисключающе: если одна выбрана "включено", все остальные с тем же именем "выключены";
file- gоле для ввода имени файла, который пересылается на сервер
submit,reset,button– кнопка:
submit: при нажатии кнопка отправляет форму. Форма может содержать несколько кнопок submit;
reset: при нажатии кнопка устанавливает все элементы формы в их начальные значения;
button: кнопка не имеет предопределённых функций. Каждая кнопка push может иметь клиентский сценарий (выполняемый на стороне клиента), ассоциированный с атрибутом event (событие). При возникновении события (напр., пользователь нажал кнопку, отпустил её и т.д.), включается ассоциированный сценарий (скрипт);
hidden– невидимый элемент, значения которого отправляется вместе с формой.
name = “строка” – задает имя элемента управления, необходимое для идентификации при передаче содержимого формы;
value = “строка” – значение элемента (не обязательно, если только атрибут type не имеет значение "radio" или "checkbox");
size = “число” – ширина элемента в пикселях, за исключениемслучаев, когда атрибут type имеет значение "text" или "password" (в этом случае значение атрибута целое число символов);
maxlength =“число” – если атрибут typeимеет значение "text" или "password", этот атрибут определяет максимальное количество символов, которое может ввести пользователь. Это число может оказаться больше установленного размера (size). В этом случае ПА должен предоставить возможность прокрутки. По умолчанию значением этого атрибута является неограниченное количество;
checked – если атрибут type имеет значение "radio" или "checkbox", данный булев атрибут определяет, что элемент выбран (установлен флажок или переключатель);
Примеры:
<INPUT type=”text” size=”100” value=”Введите текст” name=”mytext”> |
Описание текстового поля mytext разметом 100 пикселей и содержащем надпись «Введите текст» |
<INPUT type=”checkbox” value=”Отметьте меня” name=”mycheckbox” checked> |
Описание переключателя mycheckbox, содержащий надпись «Отметьте меня» и с отмеченной галочкой |
<INPUT type=”submit” value=”Отправка формы”> |
Описание кнопки для отправки формы |
<INPUT type=”hidden” value=”1.1” name=”version” checked> |
Описание скрытого поля, содержащего версию странички |
Элемент <SELECT>
Описание: создаёт меню (меню дает возможность выбора из списка значений). Каждая опция выбора представляется элементом <OPTION> (см. ниже). Элемент <SELECT> должен содержать не менее одного элемента <OPTION>.
Начальный тег: необходим.
Конечный тег: необходим.
Определения атрибутов:
name = “строка” – задает имя элемента управления, необходимое для идентификации при передаче содержимого формы;
size = “число” – если элемент <SELECT> представлен в виде прокручиваемого списка, этот атрибут определяет количество видимых одновременно рядов в списке;
multiple – при установке это булев атрибут разрешает множественный выбор. Если не установлен, элемент <SELECT> допускает выбор только одной позиции;
Элемент <OPTION>
Описание: определяет опцию выбора в меню (при рассмотрении выбора опции меню браузер должен использовать значение атрибута label в качестве выбора).
Начальный тег: необходим.
Конечный тег: не обязателен.
Определения атрибутов:
selected– если установлен, этот булев атрибут определяет, какая из опций выбрана;
value = “строка” – определяет значение элемента управления. Если не установлен, значение установлено на содержимое элемента <OPTION>.
Примеры:
<SELECT name=”myselect”> |
Описание меню |
<OPTION value=”Курс 1” selected>первый курс</OPTION> |
Описание первой опции меню, которая по умолчанию будет выбранной |
<OPTION value=”Курс 2” selected>второй курс</OPTION> |
Описание второй опции меню |
<OPTION value=”Курс 3” selected>третий курс</OPTION></SELECT> |
Описание третьей опции меню |
Элемент <TEXTAREA>
Описание: создаёт многострочный элемент управления для ввода текста.
Начальный тег: необходим.
Конечный тег: необходим.
Определения атрибутов:
name = “строка” – задает имя элемента управления, необходимое для идентификации при передаче содержимого формы;
rows = “число” – задает количество видимых строк;
cols = “число” – определяет видимую ширину, измеряемую в символах средней ширины.
Примеры:
<TEXTAREA name=”text” rows=”20” cols=”80”>Введите текст</TEXTAREA> |
Описание элемента для ввода текста, состоящего из 20 строк по 80 символов в каждой. Элемент содержит строку «Введите текст» |
Элементы управления web-форм приведены в таблице:
Название элемента |
Внешний вид элемента |
Текстовое поле Text |
|
Поле ввода пароля Password |
|
Многострочное поле ввода Textarea |
|
Скрытое текстовое поле Hidden |
|
Выпадающий список Select |
|
Переключатель выбора Chekbox |
|
Переключатель выбора Radio Button |
|
Кнопка отправки формы Submit |
|
Кнопка сброса формы Reset |
|
