HTML тег `<input>`

Значение и применение

Элемент <input> является основным элементом формы (HTML тег <form>) и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу.

Попробуйте input в тренажёре HTML-форм: настройте поле, проверьте ввод и разберите результат.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (15) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.input
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`input`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓1	✓1
`accept`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`align`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`alpha`	×	×	✓preview	×	✓18.4	×	×	×	✓18.4	×	×	✓18.4
`alt`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`autocomplete`	✓14	✓12	✓4	✓≤12.1	✓6	✓18	✓4	✓≤12.1	✓6	✓1.0	✓4.4	✓6
`capture`	×	×	×	×	×	✓25	✓79	✓14	✓10	✓1.5	✓4.4	✓10
`checked`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`colorspace`	×	×	✓preview	×	✓18.4	×	×	×	✓18.4	×	×	✓18.4
`dirname`	✓17	✓79	✓116	✓≤12.1	✓6	✓18	✓116	✓≤12.1	✓6	✓1.0	✓4.4	✓6
`disabled`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`form`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`formaction`	✓9	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4.2	✓1.0	✓3	✓4.2
`formenctype`	✓9	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4.2	✓1.0	✓3	✓4.2
`formmethod`	✓9	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4.2	✓1.0	✓3	✓4.2
`formnovalidate`	✓4	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4	✓1.0	✓4.4	✓4
`formtarget`	✓9	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4.2	✓1.0	✓3	✓4.2
`max`	✓4	✓12	✓16	✓≤12.1	✓5	✓18	✓16	✓≤12.1	✓4	✓1.0	✓4.4	✓4
`maxlength`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`min`	✓4	✓12	✓16	✓≤12.1	✓5	✓18	✓16	✓≤12.1	✓4	✓1.0	✓4.4	✓4
`minlength`	✓40	✓17	✓51	✓27	✓10.1	✓40	✓51	✓27	✓10.3	✓4.0	✓40	✓10.3
`multiple`	✓2	✓12	✓3.6	✓≤12.1	✓4	✓18	✓4	✓≤12.1	✓3.2	✓1.0	✓4.4	✓3.2
`name`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`pattern`	✓4	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4	✓1.0	✓4.4	✓4
`placeholder`	✓3	✓12	✓4	✓≤12.1	✓4	✓18	✓4	✓≤12.1	✓3.2	✓1.0	✓4.4	✓3.2
`popovertarget`	✓114	✓114	✓125	✓100	✓17	✓114	✓125	✓76	✓17	✓23.0	✓114	✓17
Implicit anchor reference via popovertarget	✓133	✓133	✓147	✓118	✓26	✓133	✓147	✓88	✓26	✓29.0	✓133	✓26
`popovertargetaction`	✓114	✓114	✓125	✓100	✓17	✓114	✓125	✓76	✓17	✓23.0	✓114	✓17
`readonly`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`required`	✓4	✓12	✓4	✓≤12.1	✓5	✓18	✓4	✓≤12.1	✓4	✓1.0	✓4.4	✓4
`size`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`src`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`step`	✓5	✓12	✓16	✓≤12.1	✓5	✓18	✓16	✓≤12.1	✓4	✓1.0	✓4.4	✓4
`switch`	×	×	×	×	✓17.4	×	×	×	✓17.4	×	×	✓17.4
type="button"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="checkbox"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="color"	✓20	✓14	✓29	✓12	✓12.1	✓25	◐27	✓12	✓12.2	✓1.5	✓4.4	✓12.2
Accepts any CSS <color> value	×	×	✓143	×	✓18.4	×	×	×	✓18.4	×	×	✓18.4
`list`	✓20	✓14	◐110	✓12	✓12.1	✓33	◐110	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="date"	✓20	✓12	✓57	✓11	✓14.1	✓25	✓57	✓11	✓5	✓1.5	✓4.4	✓5
Disables invalid values in picker UI	✓20	✓79	✓57	✓15	✓14.1	✓25	✓57	✓14	×	✓1.5	✓4.4	×
`list`	✓20	✓12	×	✓11	✓14.1	✓33	×	✓20	✓14.5	✓2.0	✓4.4.3	✓14.5
type="datetime-local"	✓20	✓12	✓154	✓11	✓14.1	✓25	✓154	✓11	✓5	✓1.5	✓4.4	✓5
type="email"	✓5	✓12	✓1	✓11	✓5	✓18	✓4	✓11	✓3	✓1.0	✓4.4	✓3
`list`	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="file"	✓1	✓12	✓1	✓11	✓1	✓18	✓4	✓11	✓1	✓1.0	✓4.4	✓1
type="hidden"	✓1	✓12	✓1	✓2	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="image"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="month"	✓20	✓12	×	✓11	×	✓25	✓18	✓14	✓≤11.3	✓1.5	✓4.4	✓≤11.3
type="number"	✓7	✓12	✓29	✓15	✓5.1	✓18	✓29	✓14	✓5	✓1.0	✓4.4	✓5
`list`	✓22	✓12	✓29	✓15	✓12.1	✓33	✓29	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="password"	✓1	✓12	✓1	✓2	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Special handling of password inputs in insecure login pages	×	×	✓52	×	×	×	✓52	×	×	×	×	×
type="radio"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="range"	✓4	✓12	✓23	✓11	✓3.1	✓57	✓52	✓11	✓5	✓7.0	✓4.4	✓5
Labeled values support	✓38	✓79	✓77	✓25	×	✓57	✓79	✓43	×	✓7.0	✓57	×
`list`	✓20	✓12	✓110	✓11	✓12.1	✓57	×	✓20	✓12.2	✓7.0	✓57	✓12.2
Tick mark support	✓≤67	✓79	✓109	✓≤54	✓12.1	✓≤67	✓109	✓≤48	✓12.2	✓≤9.0	✓≤67	✓12.2
Vertically-oriented range sliders	✓124	✓12	✓120	✓110	✓16.5	✓124	✓120	✓82	✓16.5	✓27.0	✓124	✓16.5
type="reset"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="search"	✓5	✓12	✓4	✓10.6	✓5	✓18	✓4	✓14	✓4.2	✓1.0	✓4.4	✓4.2
`list`	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="submit"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
type="tel"	✓3	✓12	✓4	✓11	✓4	✓18	✓4	✓11	✓3	✓1.0	✓4.4	✓3
`list`	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="text"	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`list`	✓20	✓12	✓4	✓15	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="time"	✓20	✓12	✓57	✓10	✓14.1	✓25	✓57	✓10.1	✓5	✓1.5	✓4.4	✓5
`list`	✓20	✓12	×	✓10	✓14.1	✓33	×	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="url"	✓1	✓12	✓1	✓11	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`list`	✓22	✓12	✓4	✓≤12.1	✓12.1	✓33	✓4	✓20	✓12.2	✓2.0	✓4.4.3	✓12.2
type="week"	✓20	✓12	×	✓11	×	✓25	✓18	✓14	✓18.2	✓1.5	✓4.4	✓18.2
`usemap`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`webkitdirectory`	✓7	✓13	✓50	✓15	✓11.1	✓132	✓141	✓87	✓18.4	✓29.0	✓132	✓18.4
Ещё 52 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`accept`	`file_extension audio/^* image/^* video/^* media_type`	Подсказка фильтру выбора файлов для `type="file"`; не проверяет реальный формат и не заменяет серверную валидацию.
`align`	`left right top middle bottom`	Не поддерживается в HTML5. Определяет выравнивание ввода изображения (только для `<input` `type =` `"image">`).
`alt`	`text`	Определяет альтернативный текст для изображений (только для `<input` `type =` `"image">`).
`autocomplete`	`on off tokens`	Указывает должен ли элемент иметь автозаполнение (заполнение автоматически завершается в браузере). По умолчанию автозаполнение включено.
`autofocus`	`autofocus`	Логический атрибут, который указывает, что элемент `<input>` должен автоматически получать фокус при загрузке страницы.
`checked`	`checked`	Является логическим атрибутом и указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для `<input type = "checkbox">` и `<input` `type =` `"radio">`).
`disabled`	`disabled`	Является логическим атрибутом и указывает, что элемент должен быть отключен (недоступен для взаимодействия с пользователем).
`form`	`form_id`	Задает форму (элемент `<form>`) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (`id`) в этом же документе.
`formaction`	`URL`	Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для `<input type = "image">` и `<input` `type =` `"submit">`).
`formenctype`	`application/x-www-form-urlencoded multipart/form-data text/plain`	Определяет, как данные формы должны быть закодированы при передаче на сервер (только для `<input type = "image">` и `<input` `type =` `"submit">`).
`formmethod`	`get \| post \| dialog`	Переопределяет метод формы для кнопок submit и image. `dialog` закрывает диалог без отправки по сети.
`formnovalidate`	`formnovalidate`	Пропускает встроенную проверку при отправке этой кнопкой (типы submit и image).
`formtarget`	`_blank _self _parent _top framename`	При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение `_self` - отображает ответ в текущем окне. Атрибут используется только только для `<input type = "image">` и `<input type = "submit">`.
`height`	`pixels`	Задает высоту элемента (только для `<input type = "image">`).
`list`	`datalist_id`	Определяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента `<datalist>`.
`max`	`number date`	Определяет максимальное значение для элемента (значение может быть как числовым, так и в виде даты).
`maxlength`	`number`	Максимальная длина в кодовых единицах UTF-16 для text, search, tel, url, email и password. Не ограничивает числовое значение number.
`min`	`number date`	Определяет минимальное значение для элемента (значение может быть как числовым, так и в виде даты).
`multiple`	`multiple`	Указывает, что пользователь может ввести более одного значения в элементе (только для `<input type = "file">` и `<input type = "email">`). Является логическим атрибутом.
`name`	`text`	Задает имя для элемента `<input>`.
`pattern`	`regexp`	Задает регулярное выражение, которое сверяется со значением введёным в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: `text`, `search`, `tel`, `url`, `email` и `password` (остальные игнорируются).
`placeholder`	`text`	Указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение. Атрибут может быть использован с полями данных определенных типов (атрибут `type`) со значениями `email`, `password`, `search`, `tel`, `text` и `url`).
`readonly`	`readonly`	Логический атрибут, который указывает, что поле ввода доступно только для чтения.
`required`	`required`	Логический атрибут, который указывает, что поле ввода должно быть заполнено перед отправкой формы.
`size`	`number`	Определяет ширину для элемента (в символах). Только для элементов управления следующих типов: `text`, `search`, `tel`, `url`, `email` и `password` (остальные игнорируются). Значение по умолчанию 20 символов.
`src`	`URL`	Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для `<input` `type =` `"image">`).
`step`	`number \| any`	Положительный шаг или `any` для number, range, date, month, week, time, datetime-local; для tel не действует. По умолчанию 1 в единицах типа, для времени — 60 секунд. База шага зависит от min, value и типа.
`type`	`button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week`	Поле ввода принимает вид, в зависимости от применённого значения.
`value`	`text`	Задает значение для элемента.
`width`	`pixels`	Задает ширину элемента (только для `<input` `type =` `"image">`).
`minlength`	Неотрицательное целое	Минимальная длина пользовательского ввода для текстовых типов, в кодовых единицах UTF-16. Пустое поле разрешено без required.
`dirname`	Имя дополнительного поля	Добавляет к отправке направление текста под указанным именем. Применим к поддерживаемым текстовым типам, например text и search.
`alpha`	Логический атрибут	Для type="color" разрешает выбор прозрачности; новая возможность с ограниченной поддержкой.
`colorspace`	`limited-srgb \| display-p3`	Цветовое пространство поля color, по умолчанию limited-srgb. Новая возможность с ограниченной поддержкой.
`popovertarget`	id	У кнопки `type="button"` указывает элемент с popover, которым она управляет.
`popovertargetaction`	`toggle \| show \| hide`	Действие над popover; по умолчанию toggle.

Примеры, попробуйте сами

Типы полей

Измените type и сравните способы ввода.

index.html

HTML

<p>
  <label>Имя <input type="text" /></label>
</p>
<p>
  <label>Почта <input type="email" /></label>
</p>
<p>
  <label>Количество <input type="number" min="1" max="5" value="2" /></label>
</p>
<p>
  <label><input type="checkbox" checked /> Новости</label>
</p>

Связанные переключатели

У переключателей общее name: выбор одного снимает выбор с другого. Измените name у второго и сравните.

index.html

HTML

<fieldset>
  <legend>Доставка</legend>
  <p>
    <label><input type="radio" name="delivery" value="pickup" checked /> Самовывоз</label>
  </p>
  <p>
    <label><input type="radio" name="delivery" value="courier" /> Курьер</label>
  </p>
</fieldset>

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлено 18 новых атрибутов и один удалён (align).

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <input>