HTML-тег <form>
Тег <form> используется для добавления HTML-форм на веб-страницу для ввода данных пользователем. Формы предназначены для передачи данных, отправленных пользователем, на сервер. Данные отправляются при нажатии кнопки «Отправить». Если такой кнопки нет, информация отправляется при нажатии клавиши «Enter».
TIP
Если отдельные элементы внутри тега <form> являются корректными, вы можете использовать псевдокласс CSS :valid для стилизации тега, а псевдокласс :invalid в случае, если они некорректны.
Синтаксис
Тег <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>:
Пример 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>:
Пример HTML-тега <form> с тегом <textarea>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<textarea rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Атрибуты
| Attribute | Value | Description |
|---|---|---|
| accept | file_type | Указывает список поддерживаемых типов файлов, разделенных запятыми, которые принимает сервер. Поддерживается в HTML5 для <input type="file">. |
| accept-charset | character_set | Указывает кодировку, в которой сервер может принимать и обрабатывать данные. |
| action | URL | Указывает адрес, куда отправляются данные и где они будут обрабатываться. При использовании этого атрибута замените «имя скрипта» на имя и расположение файла скрипта. |
| autocomplete | on off | Включает/отключает автозаполнение полей формы. Значение по умолчанию — on. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Определяет, как данные формы кодируются при отправке. (По умолчанию — application/x-www-form-urlencoded). (Используется только с методом POST). |
| method | get post | Указывает HTTP-метод для отправки данных формы. (метод по умолчанию — GET). Отправляет данные формы в адресной строке («name = value»), которые добавляются к URL страницы после знака вопроса и разделяются амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya) — браузер подключается к серверу и отправляет данные для обработки. |
| name | text | Определяет имя формы. |
| novalidate | novalidate | Указывает, что данные, введенные в форму, не будут проверяться перед отправкой. |
| target | _blank, _self, _parent, _top, framename | Определяет, где отображать ответ, полученный после отправки формы. |
Тег <form> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Какие из следующих методов используются для отправки данных формы в HTML?