HTML-тег <form>
Тег <form> создаёт веб-форму. Он объединяет поля ввода, текстовые области и другие элементы, отправляя данные через атрибуты action и method.
Тег <form> используется для добавления HTML-форм на веб-страницу для ввода данных пользователем. Формы применяются для передачи данных, введённых пользователем, на сервер. Данные отправляются при нажатии кнопки «Отправить». Если такой кнопки нет, информация отправляется при нажатии клавиши «Enter».
Синтаксис
Тег <form> используется парно. Содержимое записывается между открывающим (<form>) и закрывающим (</form>) тегами.
Элемент <form> содержит другие HTML-теги, определяющие способ ввода данных:
- Тег
<input>определяет поле ввода данных пользователем. - Тег
<textarea>определяет поле формы для создания многострочной области ввода. - Тег
<button>используется для размещения кнопки внутри формы. - Тег
<select>создаёт элемент управления для раскрывающегося списка. - Тег
<option>определяет элементы раскрывающегося списка, заданного тегом<select>. - Тег
<optgroup>группирует связанные данные в раскрывающемся списке, заданном тегом<select>. - Тег
<fieldset>визуально группирует элементы внутри формы, заданной тегом<form>. - Тег
<label>задаёт текстовую метку для элемента<input>. - Тег
<legend>определяет заголовок для элемента<fieldset>.
Пример HTML-тега <form>:
Пример HTML-тега <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Результат
Пример HTML-тега <form> с тегами <input> и <label>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Пример HTML-тега <form> с тегом <textarea>:
Атрибут for тега <label> связывается с атрибутом id элемента <textarea>, чтобы клик по метке переводил фокус в поле, а программы чтения с экрана корректно его озвучивали.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<label for="message">Message</label><br />
<textarea id="message" name="message" rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>GET vs POST: какой метод использовать
Атрибут method определяет, как браузер отправляет данные формы. Два значения ведут себя совершенно по-разному:
method="get" добавляет данные формы к URL из атрибута action в виде строки запроса (?name=value&name=value). Используйте его, когда:
- Отправка только читает или фильтрует данные (формы поиска, фильтры).
- Вы хотите, чтобы результат можно было добавить в закладки или поделиться им — данные отображаются в URL.
Поскольку данные находятся в URL, у GET есть реальные ограничения: длина URL ограничена браузерами и серверами, значения видны в адресной строке и журналах сервера, и он никогда не должен передавать пароли или другие конфиденциальные данные.
method="post" отправляет данные формы в теле HTTP-запроса, а не в URL. Используйте его, когда:
- Отправка изменяет что-то на сервере (создание аккаунта, публикация комментария, совершение платежа).
- Вы отправляете большие объёмы данных или файлы (POST не имеет практического ограничения по размеру и обязателен для загрузки файлов).
- Данные конфиденциальны и не должны отображаться в URL.
Отправки с помощью POST нельзя добавить в закладки, а перезагрузка страницы результата, как правило, повторно вызывает запрос. Подробнее читайте в разделе HTTP-методы.
Загрузка файлов
Чтобы пользователи могли загружать файлы, форма должна использовать method="post" вместе с enctype="multipart/form-data" и содержать элемент <input type="file">. Кодировка по умолчанию application/x-www-form-urlencoded не может передавать бинарные данные файлов, поэтому без неё загрузка работать не будет.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose a profile picture:</label><br />
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /><br /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>Обратите внимание, что атрибут accept (список допустимых типов файлов) указывается на элементе <input type="file">, а не на теге <form>.
Отключение валидации с помощью novalidate
По умолчанию браузеры проверяют ограничения, такие как required, type="email" или pattern, перед отправкой формы. Добавление boolean-атрибута novalidate на тег <form> указывает браузеру пропустить встроенную валидацию и всё равно отправить форму — это полезно, например, когда вы выполняете валидацию самостоятельно с помощью JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post" novalidate>
<label for="email">Email</label>
<input type="email" id="email" name="email" required /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept-charset | character_set | Задаёт кодировки символов, которые сервер принимает для отправленных данных формы. |
| action | URL | URL-адрес, на который отправляются данные формы для обработки — как правило, конечная точка API или маршрут сервера. Опустите его (или задайте пустую строку), чтобы отправить данные на ту же страницу, на которой находится форма. |
| autocomplete | on / off | Включает или отключает автозаполнение полей формы браузером. По умолчанию on. |
| enctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | Определяет способ кодирования данных формы перед отправкой. По умолчанию application/x-www-form-urlencoded. Используйте multipart/form-data, если форма содержит загрузку файла. Применяется только при method равном post. |
| method | get / post | Задаёт HTTP-метод, используемый для отправки формы. По умолчанию get. См. раздел GET vs POST ниже. |
| name | text | Определяет имя формы, используемое для ссылки на форму в скриптах. |
| novalidate | novalidate | При наличии браузер не проверяет поля формы перед отправкой. |
| target | _blank / _self / _parent / _top / framename | Определяет, где отображать ответ, полученный после отправки формы. |
Тег <form> также поддерживает глобальные атрибуты и атрибуты событий.