<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
первой радиокнопки в той же группе, которая отмечена.
Поддержка браузеров
Тег <input>
поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
<textarea>
для многострочного ввода текста,<select>
для выпадающих меню и списков выбора,<button>
для кнопок с возможностью нажатия,<datalist>
для показа списка возможных значений.
Чем заменить тег
Прямой замены тегу <input>
не существует.
Актуальность
Тег <input>
актуален и широко используется в современной веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023