<input>

25 января 2023

Тег <input> используется для создания полей ввода и отправки данных. Это самозакрывающийся тег.

Синтаксис тега <input>

<input type="text" name="username" value="John">

Спецификация HTML

Тег <input> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <input> считается семантическим тегом, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Текстовое поле:

<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">

Чекбокс:

<label for="agree">Я согласен с правилами и условиями</label>
<input type="checkbox" id="agree" name="agree">

Радиокнопки:

<label>Пол:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Мужчина</label>

<input type="radio" id="female" name="gender" value="female"> <label for="female">
<label for="female">Female</label>

Кнопка отправки:

<input type="submit" value="Отправить">

Ползунок:

<label for="age">Возраст:</label>
<input type="range" id="age" name="age" min="18" max="60">

Загрузка файлов:

<label for="file-upload">Выберите файл:</label>
<input type="file" id="file-upload" name="file-upload">

Для чего использовать тег <input>

Для сбора информации о пользователе — чтобы создать поля формы, которые собирают имена, адреса электронной почты и номера телефонов.
Для создания интерактивных викторин или опросов, флажков, радиокнопок, выпадающего меню.
Для форм входа или регистрации.
Для форм поиска по сайту.
Для форм обратной связи.
Для форм электронной коммерции — для выбора товаров, вариантов доставки и способов оплаты.
Для формы бронирования или назначения встреч, которые позволяют пользователям вводить информацию о дате, времени и количестве гостей.

Атрибуты тега <input>

type — тип элемента управления вводом данных.

name — имя элемента управления вводом.

value — начальное значение элемента управления вводом.

accept — типы файлов, которые принимает сервер (только для type="file").

autocomplete — указывает, должно ли поле ввода иметь включённое автозаполнение.

checked — указывает, что флажок или радиокнопка должны быть отмечены по умолчанию.

disabled — элемент управления вводом должен быть отключён.

form — ID формы, к которой принадлежит элемент управления вводом.

list — идентификатор элемента <datalist>, который содержит предложения для поля ввода.

max — максимальное значение для элемента управления вводом.

maxlength — максимальное количество символов, разрешённых в элементе управления вводом.

min — минимальное значение для элемента управления вводом.

multiple — пользователь может вводить несколько значений для элемента управления вводом.

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

placeholder — текст-заглушка в поле ввода.

readonly — элемент управления вводом должен быть доступен только для чтения.

required — поле ввода должно быть заполнено до отправки формы.

size — ширина поля ввода (в символах).

step — значение приращения для элемента управления вводом типа «число» или «диапазон».

Глобальные атрибуты

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

Ограничения

Тег <input> ограничен приёмом только одного значения за раз.
Тег <input> не поддерживает сложные структуры данных или массивы.

Нюансы

При использовании тега <input> следует обратить внимание на один нестандартный случай — использование атрибута value в чекбоксах и радиокнопках. Если атрибут value не указан, то значением по умолчанию для флажка будет on. Значением по умолчанию для радиокнопки будет значение атрибута value первой радиокнопки в той же группе, которая отмечена.