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


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023