Формы в HTML

294
посл. ред. 01.11.2016

Форма - это часть страницы, где пользователь может вводить данные для отправки на сервер или для получения определенной информации от сервера.

Форма

Форма задается парным тегом <form></form>. Основные атрибуты формы:

Атрибут Описание
name Задает имя формы.
action Указывается адрес файла, в который отправится форма для обработки. Веб-браузер перейдет по данному адресу.
method Определяет HTTP-метод отправки данных.
GET - открытый метод (в адресной строке будут видны значения всех отправленных данных).
POST - скрытый метод.
autocomplete Автозаполнение формы. Сохраняет введённые ранее данные и выводит последнее из них. Не работает, если отключено в настройках браузера. Может принимать значения "on" или "off".

Пример задания формы:

<form name="user" action="php/form_handler.php" method="get">

В данном примере создается форма с именем user, для отправки которой используется метод GET. Обрабатывать данную форму будет файл-программа form_handler.php, который находится в папке php/.

Все элементы формы вставляются между тегов <form> и </form>.

Элементы формы

<input>
Вставляет поле заданного типа. Основной тег для задания элемента формы.
<select>
Выпадающий список для выбора одного из возможных вариантов.
<textarea>
Поле для ввода текста.

Поле <select>

Для выбора нужного значения из списка определенных значений используется поле <select>. Внутри тега <select> с помощью тега <option> указываются возможные значения для выбора. Пример:

<select name="choose">
  <option value="1">Вариант 1</option>
  <option value="2">Вариант 2</option>
  <option value="3" selected>Вариант 3</option>
</select>

Атрибут selected элемента <option> используется, чтобы указать, какая опция выбрана по умолчанию.

С помощью тега <optgroup> опции можно группировать. В атрибуте label указывается имя группы.

<select name="choose">
  <optgroup label="Гр. 1">
    <option value="1" selected>Вариант 1</option>
    <option value="2">Вариант 2</option>
  </optgroup>
  <optgroup label="Гр. 2">
    <option value="3">Вариант 3</option>
    <option value="4">Вариант 4</option>
  </optgroup>
</select>

Основные атрибуты элемента <select>:

Атрибут Описание
name Имя поля для обработки скриптами.
size Количество отображаемых опций.
multiple Позволяет выбирать несколько значений одновременно.
autofocus Автоматическая фокусировка на данное поле (оно становится активным).

Только одно поле на странице может быть с этим атрибутом.
disabled Отключает поле. Не отправляется вместе с формой.
required Указывает, что поле обязательно должно быть заполнено.

Пример использования:

<select name="choose" size="3" multiple required>
  <option value="1" selected>Вариант 1</option>
  <option value="2">Вариант 2</option>
  <option value="3" selected>Вариант 3</option>
  <option value="4">Вариант 4</option>
</select>

Поле <textarea>

Для создания текстового поля используется тег <textarea>. Размеры поля задаются атрибутами cols (ширина - количество символов в строке) и rows (высота - количество строк).

Основные атрибуты элемента <textarea>:

Атрибут Описание
name Имя поля для обработки скриптами.
cols Ширина поля - количество символов в строке.
rows Высота поля - количество строк.
autocomplete Автозаполнение формы. Сохраняет введённые ранее данные и выводит последнее из них. Не работает, если отключено в настройках браузера. Может принимать значения "on" или "off".
autofocus Автоматическая фокусировка на данное поле (оно становится активным).
disabled Отключает поле. Не отправляется вместе с формой.
readonly Запрещает изменять значение поля. Поле отправится с формой.
required Указывает, что поле обязательно должно быть заполнено.
placeholder До начала ввода показывается в поле как подсказка для пользователя.
maxlength Допустимая максимальная длина.
minlength Допустимая минимальная длина. 
<form>
  <textarea name="text_field" cols="25" rows="3" placeholder="Введите сообщение..."></textarea>
</form>

Поле <input>

Основные поля для ввода информации пользователем создаются одиночным тегом <input>. Для этого тега можно использовать очень много атрибутов, но чаще всего используются только некоторые. Основные атрибуты:

Атрибут Описание
type Основной атрибут, который определяет тип поля.
name Имя поля для обработки скриптами.
value Значение поля по умолчанию.
autofocus Автоматическая фокусировка на данное поле (оно становится активным).
disabled Отключает поле. Не отправляется вместе с формой.

Пример вставки поля <input>:

<input type="text" name="login" value="Без имени">

Тип поля для ввода информации определяется атрибутом type. В таблице представлены описания всех типов поля <input> с указанием дополнительных возможных атрибутов.

type Вид поля Тип данных Дополнительные атрибуты
hidden Текст. Не отображается на странице, но отправляется со всеми данными.
text Текст в одну строку. autocomplete, dirname, inputmode, list, maxlength, minlength, pattern, placeholder, readonly, required, size
search Текст в одну строку. autocomplete, dirname, inputmode, list, maxlength, minlength, pattern, placeholder, readonly, required, size
tel Номер телефона. autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, size
url URL адрес. autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, size
email Почтовый ящик. autocomplete, list, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size
password Текст в одну строку. autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, size
date Дата. autocomplete, list, max, min, readonly, required, step
time Время. autocomplete, list, max, min, readonly, required, step
number Число. autocomplete, list, max, min, placeholder, readonly, required, step
range Число. autocomplete, list, max, min, step
color Цвет в формате #RRGGBB. autocomplete, list
checkbox Да или Нет. checked, required
radio Да или Нет. checked, required
file Файл. accept, multiple, required
submit Кнопка отправки формы. formaction, formenctype, formmethod, formnovalidate, formtarget
image Кнопка отправки формы. Координаты указателя мыши при нажатии левой кнопки мыши. alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, src, width
reset Кнопка сброса по умолчанию.
button Кнопка.

Описание дополнительных атрибутов:

Атрибут Значение
accept Допустимые типы файлов. Например: 
<input type="file" accept="image/*"> <!-- только картинки -->
<input type="file" accept="audio/*, video/*"> <!-- только аудио- или видео-файл -->
<input type="file" accept=".doc, .docx"> <!-- только файлы с расширением .doc, .docx -->

Браузеры проверяют только типы файлов, поэтому перед сохранением файлы все равно надо проверить на содержимое.
alt Атрибут alt используется как альтернатива картинке. Если картинка не загружается или пользователь отключил загрузку всех изображений, то на месте размещения картинки будет выведен текст, указанный в атрибуте alt. Нельзя оставлять пустую строку.
autocomplete Автозаполнение формы. Сохраняет введённые ранее данные и выводит последнее из них. Не работает, если отключено в настройках браузера. Может принимать значения "on" или "off".
checked Если указан, то элемент по умолчанию является отмеченным или выбранным.
dirname После отправки формы будет содержать данные о направлении текста.
formaction Задает action для формы.
formenctype Задает enctype для формы.
formmethod Задает method для формы.
formnovalidate Задает novalidate для формы.
formtarget Задает target для формы.
height Высота изображения.
inputmode Подсказывает браузеру, какую клавиатуру показать для ввода.
list Автозаполнение из списка <datalist>.
max Допустимое максимальное значение.
maxlength Допустимая максимальная длина.
min Допустимое минимальное значение.
minlength Допустимая минимальная длина.
multiple Позволяет ввести несколько значений.
pattern Регулярное выражение (образец).
placeholder Показывается в поле как подсказка до начала ввода.
readonly Запрещает изменять значение поля. Поле отправится с формой.
required Обязательно для заполнения.
size Ширина поля.
src Адрес ресурса.
step Шаг ввода данных.
width Ширина изображения.

Атрибуты autofocus, checked, disabled, multiple, readonly, required, selected имеют булевый тип. Это значит, что тег либо имеет данное свойство, либо нет. Применить можно несколькими способами:

<input type="checkbox" name="example" value="1" checked>
<input type="checkbox" name="example" value="1" checked=checked>
<input type="checkbox" name="example" value="1" checked="">

Ярлык <label>

Часто поля используются с ярлыками, которые подсказывают, что необходимо ввести. Для этого используется тег <label>. Запись имеет вид:

<label>Щёлкните по тексту <input type="checkbox" name="example"></label>

Если нет возможности поместить элемент формы внутрь ярлыка, то можно воспользоваться глобальным атрибутом id.

<label for="example_label">Щёлкните по тексту</label>
<input type="checkbox" name="example" id="example_label">