Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Тег 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 4 XHTML: 1.0 1.1

Описание

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

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

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

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

http://www.mysite.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> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Синтаксис

<form action="...">
...
</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 4 XHTML: 1.0 1.1

Описание

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

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

Синтаксис

<form action="URL">...</form>

Аргументы

В качестве значения принимается полный или относительный путь к серверному файлу (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.mysite.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@mysite.ru" enctype="text/plain">
<p>...</p>
</form>

</body>
</html>

Параметр ENCTYPE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<form enctype="MIME-тип">...</form>

Аргументы

Имя 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 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<form method="get | post">...</form>

Аргументы

Значение параметра 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 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<form name="имя">...</form>

Аргументы

В качестве имени используется набор символов, включая числа и буквы. 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 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<form target="имя окна">...</form>

Аргументы

В качестве аргумента используется имя окна или фрейма, заданное параметром 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>




На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!