Пример
HTML-форма с двумя полями ввода и одной кнопкой отправки:
<form
action="/action_page.php"
method="get">
<label for="fname">Имя:</label>
<input type="text" id="fname"
name="fname"><br><br>
<label for="lname">Фамилия:</label>
<input type="text" id="lname" name="lname"><br><br>
<input
type="submit" value="Отправить">
</form>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Тег <form> используется для создания HTML-формы для ввода данных пользователем.
Элемент <form> может содержать один или несколько следующих элементов формы:
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <form> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept-charset | набор символов | Задает кодировки символов, которые должны использоваться для отправки формы |
| action | URL | Указывает, куда отправлять данные формы при ее отправке |
| autocomplete | on off |
Указывает, должна ли форма иметь автозаполнение включенным или выключенным |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Указывает, как данные формы должны кодироваться при отправке на сервер (только для method="post") |
| method | dialog get post |
Задает HTTP-метод, используемый при отправке данных формы |
| name | текст | Задает имя формы |
| novalidate | novalidate | Указывает, что форма не должна проверяться при отправке |
| rel | external help license next nofollow noopener noreferrer opener prev search |
Определяет отношение между связанным ресурсом и текущим документом |
| target | _blank _self _parent _top |
Указывает, где отображать ответ, полученный после отправки формы |
Глобальные атрибуты
Тег <form> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <form> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
HTML-форма с флажками (чекбоксами):
<form action="/action_page.php" method="get">
<input
type="checkbox" name="vehicle1" value="Bike">
<label
for="vehicle1"> У меня есть велосипед</label><br>
<input type="checkbox"
name="vehicle2" value="Car">
<label for="vehicle2"> У меня есть
машина</label><br>
<input type="checkbox" name="vehicle3"
value="Boat" checked>
<label for="vehicle3"> У меня есть
лодка</label><br><br>
<input type="submit" value="Отправить">
</form>
Попробуйте сами »
Пример
HTML-форма с переключателями (радиокнопками):
<form action="/action_page.php" method="get">
<input type="radio" id="html" name="fav_language" value="HTML">
<label
for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS" checked="checked">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input
type="submit" value="Отправить">
</form>
Попробуйте сами »
Связанные страницы
Учебник по HTML: HTML-формы и ввод данных
Справочник по HTML DOM: Объект Form
Учебник по CSS: Стилизация форм
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <form> со следующими значениями по умолчанию: