Форма (HTML) — Википедия
Форма (англ. form) в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Синтаксически форма в HTML задаётся с помощью элемента <form>
и в дополнение к разметке обычных элементов содержит разметку для элементов управления (англ. controls), надписей (англ. label) и других[1][2].
Пример
[править | править код]Простая форма для ввода данных о новом пользователе[1]:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Регистрация </title> </head> <body> <form action="http://example.com/app/profile.php" method="post"> <p> <label for="username"> Имя: </label> <input type="text" name="username" /> <br /> <label for="nick"> Ник: </label> <input type="text" name="nick" /> <br /> <label for="email"> Адрес эл. почты: </label> <input type="text" name="email" /> <br /> <label for="sex"> Пол: </label> <input type="radio" name="sex" value="male" /> мужской <br /> <input type="radio" name="sex" value="female" /> женский <br /> <input type="radio" name="sex" value="secret" /> не хочу отвечать <input type="submit" value="Отправить"> <input type="reset" value="Очистить"> </p> </form> </body> </html>
В этом примере форма содержит три текстовых поля для ввода текстовой строки, радиокнопки для выбора пола, кнопки для отправки (англ. submit) и очистки (англ. reset) формы.
Элементы управления
[править | править код]Элементы управления служат для взаимодействия пользователя с формой. Атрибут name
определяет имя элемента управления с областью видимости внутри данной формы.
С каждым элементом формы связано начальное и текущее значение. За некоторыми исключениями (<textarea>
, <object>
), начальное значение может быть задано атрибутом value
. Значения, соответствующие элементам, могут изменяться при взаимодействии пользователя или скриптов (например, на Javascript) с формой. При очистке (англ. reset) формы элементы приобретают начальные значения. Данные всех действующих (англ. successful) элементов формы отправляются (англ. submit) на обработку в виде пар имя-значения[1][2].
Типы
[править | править код]В HTML определены следующие элементы управления:
- кнопка: элемент
<input>
типовsubmit
(отправка формы),image
(картинка-кнопка),reset
(очистка формы, приведение формы в начальное состояние),button
(кнопка), а также элемент<button>
(отправка формы); - чекбокс (флажок): тип
checkbox
; - радиокнопка: тип
radio
; - меню: элемент
<select>
с элементами<optgroup>
и<option>
внутри; - строка текста: тип
text
, а также элемент<textarea>
(многострочное текстовое поле); - пароль: тип
password
; - скрытое поле: тип
hidden
; - файл: тип
file
.
HTML5 определяет дополнительные элементы (кросс-браузерность пока отсутствует)[3]:
- элемент
<datalist>
с вариантами автозаполнения строки текста; - элемент
<output>
для результата вычисления на основе других полей; - элемент
<keygen>
для генерации пары ключей для использования в механизме аутентификации.
Элемент <form>
[править | править код]Форма задаётся с помощью элемента <form>
, внутри которого и располагаются элементы управления. Кроме общих для HTML атрибутов, в <form>
могут присутствовать следующие[1][2]:
action
(действие) — обязательный атрибут (в HTML5 — нет), содержащий URI обработчика формы;method
(метод отправки формы) — атрибут, принимающий значения GET (по умолчанию) или POST;enctype
(тип кодирования для содержимого) — по умолчаниюapplication/x-www-form-urlencoded
(всегда для метода GET), но обычно употребляется multipart/form-data;accept
— список MIME-типов для загрузки файлов;name
— имя формы;onsubmit
— обработчик события «форма отправлена» (для скриптов);onreset
— обработчик события: «форма очищена» (тоже для скриптов);accept-charset
список поддерживаемых наборов символов.
Отправка формы
[править | править код]Для отправки формы имеются два метода: GET и POST. Метод GET рекомендуется использовать в случаях, когда при обработке формы на стороне сервера не происходит побочных действий, например, поиск. В противном случае, когда на стороне сервера подразумевается модификация в базах данных и т. п., требуется использовать метод POST[1].
См. также
[править | править код]Примечания
[править | править код]- ↑ 1 2 3 4 5 Спецификация языка HTML Архивная копия от 4 декабря 2012 на Wayback Machine, переводчик: А. Пирамидин, intuit.ru, ISBN 978-5-94774-648-8, 17. Лекция: Формы.
- ↑ 1 2 3 Forms in HTML documents Архивная копия от 22 апреля 2021 на Wayback Machine (англ.) Спецификация W3C для HTML4
- ↑ HTML5 Form Elements, w3schools . Дата обращения: 2 декабря 2012. Архивировано из оригинала 13 мая 2013 года.
Для улучшения этой статьи желательно:
|