Тег <form> в HTML используется для создания формы пользовательского ввода, является контейнером для элементов HTML форм.
Внутри тега <form> располагаются элементы формы (поля ввода). К тегам группы form относятся: <input> - поля ввода различных типов, <textarea> - текстовая область, <button> - кнопка, <select> - список (выпадающий или с множественным выбором), <option> - пункт списка, <optgroup> - группа пунктов списка, <datalist> - список предопределенных вариантов, <fieldset> - группа полей, <legend> - название (подпись) группы полей, <label> - этикетка (подпись, метка) элемента HTML формы, <output> - результат вычислений.
Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Обработка HTML формы <form> сервером может производиться с помощью методов GET или POST. Подробнее про обработку HTML форм смотрите в статье: Методы GET и POST. Использование и отличия.
Синтаксис
<form>контент формы</form>
Примеры использования форм <form> в HTML коде
Ниже представлены 2 примера HTML форм.
Простая HTML форма
В этом примере приведена простая форма "Перезвоните мне" с минимальным набором полей. В примере не использованы стили CSS, однако на действующем проекте рекомендуем ими пользоваться.
HTML код простой формы
<form method="POST" name="callback" action="/callback.php">
Ваше имя: <input type="text" name="name"><br><br>
Ваш телефон: <input type="tel" name="phone"><br><br>
<input type="submit" name="callback_submit" value="Заказать звонок">
</form>
Сложная HTML форма
В этом примере использована HTML форма с базовым оформлением при помощи CSS.
Все элементы формы, использованные ниже, подробно описаны на страницах соответствующих тегов.
HTML код сложной формы
<style type="text/css">
.barber_form {
width: 290px;
}
.barber_form .caption {
font-size: 22px;
text-align: center;
}
.barber_form .example_infofield {
font-weight: bold;
margin-top: 15px;
margin-bottom: 7px;
}
.barber_form input[type="text"], .barber_form input[type="tel"],
.barber_form input[type="datetime-local"], .barber_form select {
width: 100%;
padding: 2px 10px;
}
.barber_form input[type="radio"], .barber_form input[type="checkbox"] {
margin-left: 10px;
margin-right: 5px;
}
.barber_form fieldset {
margin-top: 10px;
}
.barber_form input[type="submit"] {
width: 100%;
margin-top: 15px;
padding: 5px 15px;
}
</style>
<form class="barber_form" method="POST" name="zayavka" action="/zayavka.php">
<p class="caption">Записаться онлайн</p>
<div class="example_infofield">Тип стрижки:</div>
<select name="service_type">
<option>Стрижка</option>
<option>Стрижка бороды</option>
<option selected="selected">Стрижка + Борода</option>
</select>
<div class="example_infofield">Уровень специалиста:</div>
<label><input type="radio" name="master" value="1">Стажер</label>
<label><input type="radio" name="master" value="2" checked="checked">Барбер</label>
<label><input type="radio" name="master" value="3">VIP Барбер</label>
<div class="example_infofield">Дополнительные услуги:</div>
<label><input type="checkbox" name="massage"> Массаж головы</label>
<label><input type="checkbox" name="razor"> Опасная бритва</label>
<div class="example_infofield">Дата и время записи:</div>
<input type="datetime-local" name="date_time">
<fieldset>
<legend>Контактная информация</legend>
<div class="example_infofield">Ваше имя:</div>
<input type="text" name="name" placeholder="введите ваше имя">
<div class="example_infofield">Ваш телефон:</div>
<input type="tel" name="phone" placeholder="например, +7 800 123-45-67">
</fieldset>
<input type="submit" name="zayavka_submit" value="Записаться">
</form>
Поддержка браузерами
Тег | |||||
<form> | Да | Да | Да | Да | Да |
Атрибуты тега form
Атрибут | Значения | Описание |
---|---|---|
accept-charset | кодировка |
Список кодировок символов, поддерживаемых сервером. Все допустимые кодировки указываются через пробел. По умолчанию используется зарезервированное значение "UNKNOWN", означающее, что будет подставлена кодировка документа, содержащего HTML форму. |
action | URL |
URL адрес документа - обработчика формы. По этому адресу данные формы будут отправлены после наступления события submit. |
autocomplete | on off |
Автозаполнение полей формы. Атрибут указывает, должен ли браузер, при повторном использовании формы, подставлять в поля значения, введенные пользователем во время предыдущего использования формы.
|
enctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Способ кодирования информации. Указывает, как именно нужно кодировать информацию при отправке на сервер.
Атрибут используется только в случае отправки формы методом POST. |
method | GET POST |
HTTP метод передачи данных формы.
|
name | текст |
Имя HTML формы. Используется при отправке данных формы. Значение атрибута должно быть уникальным для каждой формы в пределах документа. |
novalidate | не указывается / novalidate |
Логический атрибут. Если указан, браузер не будет выполнять проверку правильности заполнения формы перед отправкой. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п. |
target | _blank _parent _self _top имя фрейма |
Определяет где будет открыт результат обработки (ответ сервера):
|
Тег <form> также поддерживает глобальные HTML атрибуты.