Уроки по html

Главная->Уроки по html->Формы

FORM

Используется для создания заполяемой формы. Необходимо присутствие начального и конечного тегов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.

Атрибуты:

NAME – определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.

ACTION – обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы – путь к скрипту сервера, обслуживающему данную форму.

METHOD – определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST.

ENCTYPE – определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".

TARGET – определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в атрибуте TARGET элемента A.

Пример:

<FORM ACTION="/cgi-bin/thanks.pl" METHOD=GET NAME="TestForm">


Фамилия:
<INPUT TYPE="text" name="lastname" SIZE="20" VALUE="Пупкин"><br>


<INPUT TYPE="submit" VALUE="Отправить">
</FORM>
'
Примечания:

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

Метод GET не позволяет передать скрипту большой объём данных. Если предполагается, что пользователь будет заполнять очень большую форму или вводить объёмные текстовые данные, или пересылать файл – используйте METHOD="POST".

Перед тегом <FORM> в браузерах Netscape образуется пустое пространство, вертикальный отступ. Если вас это не устраивает и при этом форма на странице одна, поместите тег <FORM> в начало страницы, сразу после тега <BODY>, это должно помочь.

TEXTAREA

Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле. Элемент TEXTAREA должен располагаться внутри элемента FORM.

Атрибуты:
NAME – обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненого поля сервером.

ROWS – определяет количество строк текста, видимых на экране.

COLS – определяет ширину текстового поля – в печатных символах.

WRAP – определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:

off– перенос слов не происходит (значение по умолчанию)
virtual – перенос слов только отображается, на сервер же поступает неделимая строка.
physical – перенос слов будет происходить во всех точках переноса.
Пример:

...
<FORM ACTION="receive.html" METHOD=POST>
<TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="3">Ваш адрес...</TEXTAREA><br>
<INPUT TYPE="submit" VALUE="OK">
</FORM>
...

Результат:

Ваш адрес...

SELECT
Элемент SELECT создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный теги. Содержит несколько элементов OPTION, иначе не имеет смысла.

Атрибуты:
MULTIPLE – дает возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. По умолчанию можно выбрать только один пункт меню.

NAME– определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.

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

Пример:

...
<FORM ACTION="receive.cgi">
<SELECT NAME="OS" MULTIPLE>
<OPTION VALUE="DOS">MS-DOS
<OPTION VALUE="WinXP">MS Windows98
<OPTION VALUE="Unix" SELECTED>UNIX
<<OPTION VALUE="WinNT">MS Windows NT
</SELECT>
<INPUT TYPE="submit" VALUE="Послать">
</FORM>
...

Результат:
MS-DOS MS Windows98 UNIX MS Windows NT

OPTION

Используется только с элементом SELECT. Элемент OPTIONописывает отдельные пункты меню. Не имеет конечного тега.

Атрибуты:
SELECTED – Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню.

VALUE– Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением атрибута NAME в элементе SELECT.

Пример:

...
<FORM ACTION="script.cgi">
<SELECT NAME="gender">
<OPTION VALUE="male" SELECTED>Мужской
<OPTION VALUE="female">Женский
<OPTION VALUE="not_yet">Определяюсь
</SELECT>
<INPUT TYPE="submit" VALUE="OK">
</FORM>
...

Результат:

Мужской

INPUT
Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тега. Элемент INPUT должен располагаться внутри элемента FORM.

Атрибуты:

NAME – определяет имя, используемое при передаче содержания данной формы на сервер. Этот атрибут необходим для большинства типов (атрибут TYPE – cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.

TYPE – определяет тип поля для ввода данных. По умолчанию – это "text". Возможные значения:

text – создает поле ввода под одну строку текста. Как правило используется совместно с атрибутами SIZE и MAXLENGTH.
textarea – создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA
file – дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с атрибутом ACCEPT.
password – создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.
checkbox – создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей checkbox, которые могут иметь одинаковые имена. Каждое выбранное поле chackbox создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле этого типа обязательно должно иметь атрибуты NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.
radio – создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей checkbox, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).
submit – создает кнопку, при нажатии которой заполненная форма посылается на сервер. Атрибут VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если атрибут NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для атрибута SUBMIT, в противном случае пара не добавляется.
image – создает графическую кнопку-картинку, инициализирующую передачу данных на сервер. Местонахождение графического изображения можно задать с помощью атрибута SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля суффиксов ".x" (абсциссы), и ".y" (ординаты).
reset – создает кнопку, сбрасывающую значения полей формы к их первоначальным значениям. При нажатии кнопки данные на сервер не отправляются. Надпись на кнопке может быть изменена с помощью атрибута VALUE. По умолчанию надпись на кнопке зависит от версии браузера.
hidden – поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип полей удобно использовать для передачи данных от скрипта скрипту незаметно для пользователя.
button – позволяет создать пользовательскую кнопку в HTML документе, что, при умелом использовании JavaScript, добавляет форме функциональность. Атрибут NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Атрибут VALUE позволяет задать текст, который будет отображен на кнопке в документе.

VALUE – задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для таких полей как checkbox или radio, будет возвращено значение, заданное в атрибуте VALUE.

CHECKED – указывает, что поля типов checkbox и/или radio (см. выше атрибут TYPE) активизированы.

SIZE – определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".

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

SRC – задает URL-адрес картинки, используемой при создании графической кнопки. Используется совместно с атрибутом TYPE="image".

ALIGN – определяет способ вертикального выравнивания для изображений. Используется совместно с атрибутом TYPE="image". Полностью аналогичен атрибуту ALIGN элемента IMG. По умолчанию имеет значение bottom.

ACCEPT – конкретизирует тип файла. Используется только совместно с параметром TYPE="file". Значение задается в виде MIME-типа.

Пример 1:
<FORM NAME="Form1" ACTION="http://www.igf.ru/cgi-bin/banya.pl">
<INPUT TYPE="hidden" NAME="info" VALUE="Запись в баню на воскресенье">
<INPUT TYPE="radio" NAME="sex" VALUE="Male" CHECKED> Мужик<BR>
<INPUT TYPE="radio" NAME="sex" VALUE="Female"> Баба<BR>
Имя:<BR>
<INPUT TYPE="text" NAME="textfield" VALUE="Вася Пупкин" SIZE="30" MAXLENGTH="60"><BR>
Пароль:<BR>
<INPUT TYPE="password" WIDTH="10" NAME="passwd"><BR><BR>
<INPUT TYPE="submit" VALUE="Запулить">
</FORM>
Пример 2:
Хочу получать следующие издания:<br>
<FORM NAME="Form2" ACTION="http://www.igf.ru/cgi-bin/magazines.pl">
<INPUT TYPE="checkbox" NAME="m1">Страшная газета<br>
<INPUT TYPE="checkbox" NAME="m2">6 соток<BR>
<INPUT TYPE="checkbox" NAME="m3" CHECKED>Мурзилка<BR>
<INPUT type="image" src="/img/button.gif" WIDTH="60" HEIGHT="30">
</FORM>