HTML Тег <form>
Пример
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="Submit">
</form>
Попробуйте сами »
Определение и использование <form>
Тег <form> используется для создания HTML формы для ввода пользователем.
Тег <form> может содержать один или несколько из следующих элементов формы:
Поддержка браузеров <form>
| Элемент | |||||
|---|---|---|---|---|---|
| <form> | Да | Да | Да | Да | Да |
Атрибуты <form>
| Атрибут | Значение | Описание |
|---|---|---|
| accept-charset | character_set | Указывает кодировки символов, которые будут использоваться для отправки формы |
| action | URL | Указывает, куда отправлять данные формы при отправке формы |
| autocomplete | on off |
Указывает, должна ли форма иметь автозаполнение включено или выключено |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Указывает, как данные формы должны быть закодированы при отправке их на сервер (только для method="post") |
| method | get post |
Указывает метод HTTP, используемый при отправке данных формы |
| name | text | Указывает имя формы |
| novalidate | novalidate | Указывает, что форма не должна проверяться при отправке |
| rel | external help license next nofollow noopener noreferrer opener prev search |
Указывает связь между связанным ресурсом и текущим документом |
| target | _blank _self _parent _top |
Указывает, где будет отображаться ответ, полученный после отправки формы |
Глобальные атрибуты <form>
Тег <form> также поддерживает Глобальные атрибуты в HTML.
События атрибутов <form>
Тег <form> также поддерживает События атрибутов в HTML.
Еще примеры <form>
Пример
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="Submit">
</form>
Попробуйте сами »
Пример
HTML форма с радиокнопками:
<form action="/action_page.php" method="get">
<input type="radio"
id="male" name="gender" value="male">
<label
for="male">Мужской</label><br>
<input type="radio" id="female"
name="gender" value="female" checked="checked">
<label
for="female">Женский</label><br>
<input type="radio" id="other"
name="gender" value="other">
<label for="other">Другое</label><br><br>
<input type="submit" value="Submit">
</form>
Попробуйте сами »
Связные страницы <form>
HTML учебник: HTML Формы и Ввод
HTML DOM справочник: Объект form
CSS учебник: Стиль форм
Настройки CSS по умолчанию <form>
Большинство браузеров будут отображать элемент <form> со следующими значениями по умолчанию:
Пример
form {
display: block;
margin-top: 0em;
}
Попробуйте сами »