HTML :: Тег <form>
В HTML тег <form> (от англ. form – форма) предназначен для создания на веб-странице формы, которая используется для отправки введенных пользователем данных на сервер. Сам элемент <form> никакого интерфейса для ввода данных не имеет и по умолчанию на странице браузерами никак не отображается. Однако он является контейнером для различных элементов формы (поля ввода, кнопки, переключатели и т.д.), которые как раз и предоставляют пользователю довольно обширный арсенал различных способов ввода данных и отправки их на сервер.
Допускается располагать внутри формы элементы, которые не относятся к форме как таковой (например, обычные абзацы). Однако других элементов <form> внутри быть не должно. Кроме того, на странице допускается использование любого количества форм, но одновременно на сервер можно отправить данные только одной из них.
Синтаксис
<form>
...
</form>
Закрывающий тег: обязателен.
Атрибуты
- accept-charset – указывает кодировку символов передаваемых данных, например, "utf-8". Если атрибут не указан, то указывается кодировка, установленная для страницы.
- action – в качестве значения принимает полный или относительный путь к серверной программе-обработчику, которой будут передаваться данные формы после отправки на сервер.
- autocomplete – позволяет отключать автозаполнение полей формы, которое происходит при повторном вводе одинаковых данных. Принимает два значения "on" (по умолчанию) и "off". При этом, если автозаполнение отключено в настройках самого браузера, то данный атрибут игнорируется. Кроме того, значение атрибута может быть переопределено таким же атрибутом autocomplete, но у конкретных элементов формы, например, в случае необходимости не сохранять важные данные вроде паролей, номеров банковских карт и т.д.
-
enctype – устанавливает способ кодирования отправляемых данных. Может
принимать значения:
- "application/x-www-form-urlencoded" – применяется по умолчанию и подходит для большинства случаев, поэтому сам атрибут enctype обычно не указывается;
- "multipart/form-data" – следует использовать при отправке файлов;
- "text/plain" – кодирует данные в виде простого текста, только заменяя пробелы знаком +; требуется редко, например, может быть полезен при отправке данных формы по электронной почте.
- name – определяет уникальное имя формы, которое в основном используется для доступа к ней через скрипты.
- novalidate – данный логический атрибут отменяет встроенную проверку данных вводимых пользователем в поля формы на ошибки. Значений не принимает и по умолчанию выключен.
- method – принимает значения "GET" или "POST", которые определяют метод отправки данных формы на сервер. По умолчанию применяется "GET".
-
target – сообщает имя целевого окна или фрейма, в котором будет открыт результат отправки данных формы.
В качестве значений может принимать:
- _self – документ будет открываться в текущем окне или фрейме (используется по умолчанию);
- _blank – документ будет открываться в новом окне или фрейме;
- _parent – документ будет открываться в родительском фрейме, а в случае отсутствия такового, в текущем окне;
- _top – документ будет открываться в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как _self;
- name – имя фрейма, в котором будет открываться документ; если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-form-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/form
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="https://site.name/"> <title>Пример №1</title> </head> <body> <!-- Создаем простейшую форму для ввода данных --> <form action="php/registration.php" method="get" name="reg_form"> <!-- Связываем текст «Имя:» с элементом «input» --> <label for="first_name">Имя: </label> <!-- Создаем поле для ввода имени --> <input type="text" id="first_name" name="first_name"><br><br> <!-- Создаем поле для ввода фамилии --> <label>Фамилия: <input type="text" name="last_name"> </label> <br><br> <!-- Создаем кнопку для отправки данных формы на сервер --> <input type="submit" value="Отправить" disabled> </form> </body> </html>
Пример №1