Тег FORM

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

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

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

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

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

Синтаксис

Параметры

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

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

Обязателен.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег FORM</title>
 </head>
 <body>

 <form action="/ШТМЛ/example/handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</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

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

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

Синтаксис

Аргументы

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

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

Да.

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

Нет.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег FORM, параметр action</title>
 </head>
 <body>

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

 </body>
</html>

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

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег FORM, параметр action</title>
 </head>
 <body>

 <form action="mailto:vlad@www-html.ru" enctype="text/plain">
  <p><input type="submit" value="Написать письмо"></p>
 </form> 

 </body>
</html>

Параметр ENCTYPE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

Нет.

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

application/x-www-form-urlencoded

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <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

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

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

Нет.

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

get

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег FORM, параметр method</title>
 </head>
 <body>  

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

 </body>
</html>

Параметр NAME

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

Нет.

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

Нет.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <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

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

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

Нет.

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

_self

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

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

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

 </body>
</html>