Тег FORM

Браузер	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

HTML:

3.2

XHTML:

1.0

1.1

Описание

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

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

Для отправки формы на сервер используется кнопка Submit, то же самое можно добиться, если нажать клавишу <Enter> в пределах формы. Если кнопка Submit отсутствует в форме, клавиша <Enter> имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <INPUT>. Если таких элементов два и более, нажатие на <Enter> не вызовет никакого результата.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега <FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/cgi-bin/handler.cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

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

Синтаксис

Параметры

action: Адрес CGI-программы или документа, которые обрабатывает данные формы.
enctype: MIME-тип информации формы.
method: Метод протокола HTTP.
name: Имя формы.
target: Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <FORM>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерский состав<br>
<input type="radio" name="answer" value="a2">Операционная система<br>
<input type="radio" name="answer" value="a3">Большой полосатый мух</p>
<p><input type="submit"></p>
</form>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Вид элементов формы в окне браузера

Описание параметров тега <FORM>

Параметр ACTION

HTML:

3.2

XHTML:

1.0

1.1

Описание

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

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

Синтаксис

Аргументы

В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Обязательный параметр

Да.

Значение по умолчанию

Нет.

Пример 2. Указание обработчика формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM, параметр action</title>
</head>
<body>

<form action="http://www.htmlbook.ru/download/file.php">
<p>...</p>
</form>

</body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге <FORM>.

Пример 3. Отправка данных формы на электронную почту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM, параметр action</title>
</head>
<body>

<form action="mailto:vlad@htmlbook.ru" enctype="text/plain">
<p>...</p>
</form>

</body>
</html>

Параметр ENCTYPE

HTML:

3.2

XHTML:

1.0

1.1

Описание

Устанавливает MIME-тип для данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (INPUT type="file"), следует определить параметр enctype как multipart/form-data.

Синтаксис

Аргументы

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

Обязательный параметр

Нет.

Значение по умолчанию

application/x-www-form-urlencoded

Пример 4. Использование параметра enctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM, параметр enctype</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi" enctype="multipart/form-data" method="post">
<p>Загрузите файл с картинкой</p>
<p><input type="file" name="pic"></p>
</form>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2

Рис. 2. Поле для отправки файла

Параметр METHOD

HTML:

3.2

XHTML:

1.0

1.1

Описание

Параметр сообщает серверу о методе запроса.

Синтаксис

Аргументы

Значение параметра method не зависит от регистра. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

GET: Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.
POST: Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

Обязательный параметр

Нет.

Значение по умолчанию

get

Пример 5. Метод отправки данных формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM, параметр method</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi" method="post">
<p>...</p>
</form>

</body>
</html>

Параметр NAME

HTML:

3.2

XHTML:

1.0

1.1

Описание

Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.

Синтаксис

Аргументы

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

Обязательный параметр

Нет.

Значение по умолчанию

Нет.

Пример 6. Использование имени формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM, параметр name</title>
<script type="text/javascript">
function validForm() {
alert("Имя " + document.forms['form1'].nick.value)
}
</script>
</head>
<body>

<form action="/cgi-bin/handler.cgi" name="form1">
<p>Имя: <input type="text" name="nick"></p>
<p><input type="button" onClick="validForm()" value="OK"></p>
</form>

</body>
</html>

Параметр TARGET

HTML:

3.2

XHTML:

1.0

1.1

Описание

После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис

Аргументы

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

_blank: Загружает страницу в новое окно браузера.
_self: Загружает страницу в текущее окно.
_parent: Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top: Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Обязательный параметр

Нет.

Значение по умолчанию

_self

Пример 7. Открытие результата в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM, параметр target</title>
</head>
<body>

<form action="/cgi-bin/handler.cgi" target="_blank">
...
</form>

</body>
</html>