Тег <form> используется для создания формы на веб-странице. Основная задача HTML формы - принять информацию от пользователя и отправить ее на сервер для обработки.
Для отправки информации на сервер используется кнопка submit. Если этой кнопки нет, то форму можно отправить на сервер, нажав клавишу Enter.
Синтаксис
Элемент <form> парный, содержимое размещается между открывающим (<form>) и закрывающим (</form>) тегами.
Элемент <form> содержит другие HTML теги, которые определяют способы ввода данных.
- Тег <input> определяет пользовательское поле для ввода информации.
- Тег <textarea> определяет поле формы для создания области многострочного ввода.
- Тег <button> используется для размещения кнопки внутри формы.
- Тег <select> устанавливает элемент управления для создания раскрывающегося (выпадающего) списка.
- Тег <option> определяет пункты раскрывающегося списка, установленного тегом <select>.
- Тег <optgroup> используется для группировки связанных данных в раскрывающемся списке, установленного тегом <form>.
- Тег <label> устанавливает текстовую метку для элемента <input>.
- Тег <legend> определяет заголовок для элемента <fieldset>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form action="server-script-url-here" method="GET or POST" >
<label for="fname">Имя</label>
<input type="text" name="FirstName" id="fname" value="Арина"/><br/>
<label for="lname">Фамилия</label>
<input type="text" name="LastName"id="lname" value="Петрова"/><br/>
<input type="submit" value="Отправить"/>
</form>
</body>
</html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept | file_type | Определяет разделенный запятыми список типов файлов, которые принимает сервер (Список может быть представлен через загрузку файлов).
Не поддерживается в HTML5. |
| accept-charset | character_set | Определяет кодировку, в которой сервер может принимать и обрабатывать данные. |
| action | URL | Указывает адрес, куда отправляются данные из заполненной формы, и где они будут обрабатываться. |
| autocomplete | on off |
Включает/выключает автозаполнение полей формы. По умолчанию значение включено. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Определяет способ кодирования данных формы при их отправке. (Значение по умолчанию application/x-www-form-urlencoded). (Используется только при методе POST). |
| method | ||
| Определяет HTTP метод отправки данных формы. (по умолчанию используется метод GET) | ||
| get | -передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya) | |
| post | - браузер устанавливает связь с сервером и посылает данные для обработки. | |
| name | text | Определяет имя формы. |
| novalidate | novalidate | Устанавливает, что данные введенные в форму не будут проверяться перед отправкой. |
| target | ||
| Определяет, где показать ответ, полученный после отправки формы | ||
| _blank | -показывает в новом окне. | |
| _self | -показывает в текущем окне. | |
| _parent | - показывает в родительском фрейме. | |
| _top | - открывает во всю ширину окна. | |
| framename | - открывает в iframe (имя должно быть указано в качестве значения |
Тег <form> поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
Какие атрибуты содержит HTML тег form?
Правильный!
Неправильно!