Тег <form> HTML форма

Рейтинг: 4 из 5, голосов 19
++++-

Тег <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>

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<form> Да Да Да Да Да

Атрибуты тега form

Атрибут Значения Описание
accept-charset кодировка

Список кодировок символов, поддерживаемых сервером. Все допустимые кодировки указываются через пробел.

По умолчанию используется зарезервированное значение "UNKNOWN", означающее, что будет подставлена кодировка документа, содержащего HTML форму.

action URL

URL адрес документа - обработчика формы. По этому адресу данные формы будут отправлены после наступления события submit.

autocomplete on
off

Автозаполнение полей формы.

Атрибут указывает, должен ли браузер, при повторном использовании формы, подставлять в поля значения, введенные пользователем во время предыдущего использования формы.

  • on - автозаполнение полей формы включено (значение по умолчанию);
  • off - автозаполнение полей формы выключено.
enctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

Способ кодирования информации.

Указывает, как именно нужно кодировать информацию при отправке на сервер.

  • application/x-www-form-urlencoded - все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на "+". Значение по умолчанию;
  • multipart/form-data - символы не кодируются. Значение обязательно нужно использовать в форме с полем input type="file" (при использовании файлов в форме);
  • text/plain - символы не кодируются, пробелы заменяются символом "+".

Атрибут используется только в случае отправки формы методом POST.

method GET
POST

HTTP метод передачи данных формы.

  • GET - передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
  • POST - передача данных в теле HTTP запроса.

Подробнее про методы GET и POST.

name текст

Имя HTML формы. Используется при отправке данных формы.

Значение атрибута должно быть уникальным для каждой формы в пределах документа.

novalidate не указывается / novalidate

Логический атрибут. Если указан, браузер не будет выполнять проверку правильности заполнения формы перед отправкой. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.

target _blank
_parent
_self
_top
имя фрейма

Определяет где будет открыт результат обработки (ответ сервера):

  • _blank - в новой вкладке или окне;
  • _parent - в родительском окне;
  • _self - в текущем окне (используется по умолчанию);
  • _top - на весь экран.

Тег <form> также поддерживает глобальные HTML атрибуты.

Оцените, насколько полезна эта страница
++++-
Оставьте комментарий

Выберите правильный ответ
14 + 5 =
Отправляя форму, я даю согласие на обработку персональных данных.