Тег input (от английского input, «ввод») создаёт элемент для ввода данных: текстовое поле, флажок, переключатель, ползунок, выбор даты или файла и даже кнопку. Что получится, решает атрибут type. Это пустой тег: содержимого и закрывающего тега у него нет. Без type получается однострочное текстовое поле, а в отправку формы поле попадает только вместе с атрибутом name.
Поле работает внутри тега form и сам по себе: вне формы оно тоже выводится, а значение читает скрипт. Многострочный текст, выбор из готового списка и кнопку с содержимым записывают другими тегами группы: textarea, select и button.
<input type="email" name="mail" placeholder="you@site.ru" required>В этой статье
- Тег input в HTML: что это, зачем нужен и закрывается ли
- Атрибут type тега input: все значения и что они создают
- Текстовые типы input: text, search, password, email, tel, url
- Числа, даты и цвет в input: number, range, date, time, color
- Флажки и переключатели: input type checkbox и radio
- Выбор файла: input type file, accept и multiple
- Кнопки и скрытое поле: submit, reset, button, image, hidden
- Атрибуты name и value: что уходит в отправку
- Проверка значения: required, pattern, minlength, maxlength
- Остальные атрибуты input: readonly, disabled, placeholder и другие
- Название поля у input: label, placeholder и доступность
- CSS для input: размеры, состояния и :invalid
- Тег input и JavaScript: value, checked, события input и change
- Вопросы про тег input: отличие от других полей и смена type
- Частые ошибки с тегом input
Тег input в HTML: что это, зачем нужен и закрывается ли
Тег input строчный: по умолчанию его display равен inline-block, поэтому поля встают в строку с текстом. Закрывающий тег не нужен. Запись <input /> с косой чертой допустима и ничего не меняет, а </input> браузер отбрасывает. Текст, записанный между ними, остаётся рядом с полем, а не внутри: у input не бывает содержимого.
<input name="a">
<input name="a" />
<input name="a"></input>
<input name="a">внутри</input>Пример: что делает браузер с закрывающим тегом
Выберите запись: под результатом узлы, которые получились на странице, и сколько их внутри поля.
Атрибут type тега input: все значения и что они создают
Атрибут type задаёт вид и поведение поля. Значений 22, все перечислены в таблице. Если type не записан или в нём записано неизвестное значение, браузер читает его как text. Так же читается устаревшее datetime, которое убрали из стандарта. Подробный разбор для новичков есть в уроке «Поля ввода: input и его типы».
<input type="text" name="pet">
<input type="number" name="age">
<input type="checkbox" name="agree">Пример: выберите значение type
Выберите значение в списке: под результатом свойство type, роль поля для программ чтения с экрана и что уйдёт в отправку.
Значение type | Что создаёт | Значение по умолчанию | Что уходит в отправку |
|---|---|---|---|
text | Однострочное текстовое поле | "" | Введённый текст |
search | Поле поиска, событие search | "" | Введённый текст |
password | Поле, где символы скрыты точками | "" | Введённый текст |
email | Адрес почты с проверкой формата | "" | Введённый текст без пробелов по краям |
tel | Телефон без проверки формата | "" | Введённый текст |
url | Адрес ссылки с проверкой формата | "" | Введённый текст без пробелов по краям |
number | Число со стрелками | "" | Число как текст |
range | Ползунок от 0 до 100 | 50 | Число как текст |
date | Выбор даты | "" | Дата 2026-10-05 |
time | Выбор времени | "" | Время 14:30 |
datetime-local | Дата и время без часового пояса | "" | Дата и время 2026-10-05T14:30 |
month | Месяц и год | "" | Месяц 2026-10 |
week | Неделя и год | "" | Неделя 2026-W41 |
color | Выбор цвета | #000000 | Цвет #rrggbb строчными буквами |
checkbox | Флажок | on | Значение value, только если флажок отмечен |
radio | Переключатель в группе по name | on | Значение value выбранного пункта |
file | Выбор файла | "" | Название файла или его содержимое, зависит от enctype |
hidden | Скрытое поле | "" | Значение value |
button | Кнопка без действия | "" | Не уходит |
submit | Кнопка отправки формы | "" | Уходит, если нажата и у неё есть name |
reset | Кнопка сброса полей | "" | Не уходит |
image | Кнопка-картинка | "" | Координаты клика x и y |
Текстовые типы input: text, search, password, email, tel, url
Типы text, search, password, email, tel и url однострочные. Они различаются очисткой значения и проверкой. Перенос строки из значения убирается у всех. Типы email и url дополнительно обрезают пробелы по краям и проверяют формат: для email достаточно вида a@b, но кириллица до знака @ проверку не проходит, для url нужна схема, например https://: запись example.com без неё не подходит. Тип tel формат не проверяет, потому что телефоны записывают по-разному. Тип search в Chrome даёт событие search на клавише Enter и при очистке поля.
<input type="email" name="mail">
<input type="tel" name="phone">
<input type="url" name="site">Пример: что браузер делает со значением
Выберите тип: скрипт записывает в поле строку с пробелами и переносом, под результатом то, что осталось.
Числа, даты и цвет в input: number, range, date, time, color
Тип number принимает число и проверяет границы: min, max и шаг step. Шаг считается от min: при min="1" и step="2" подходят 1, 3, 5, 7, 9. Если записать в поле текст, который не число, браузер очистит значение. Свойство valueAsNumber отдаёт число, а не строку. Типы, которые ведут себя не так, как кажется, разобраны в отдельном уроке. Ползунок range по умолчанию идёт от 0 до 100 и стоит на 50, а значение за границами заменяется ближайшей границей. Для даты, времени и цвета действует строгий формат записи, независимо от того, как поле показано человеку: если значение не подходит, поле остаётся пустым, а у color берётся чёрный.
<input type="number" name="qty" min="1" max="10" step="2">
<input type="range" name="vol" min="0" max="10">
<input type="date" name="day" min="2026-01-01">Пример: как браузер читает значение
Выберите тип: в атрибут value записано значение, под результатом то, что осталось в поле. У number введите число сами.
Флажки и переключатели: input type checkbox и radio
Флажок checkbox и переключатель radio передают данные только в отмеченном состоянии. Отмеченный элемент даёт значение value, а если оно не записано, то on. Радиокнопки собираются в группу по одинаковому name, и отметить можно только одну. Группа действует внутри одной формы: в двух разных формах радиокнопки с одним name не связаны, и отметить можно обе. Начальное состояние задаёт атрибут checked.
<input type="checkbox" name="agree" value="yes" checked>
<input type="radio" name="size" value="s">
<input type="radio" name="size" value="m">Пример: что уходит от флажков и радиокнопок
Выберите запись и нажимайте на элементы: под результатом данные каждой формы.
Выбор файла: input type file, accept и multiple
Тип file открывает окно выбора файла. Атрибут accept подсказывает окну, какие файлы показать (.png, image/*), но проверку не выполняет: тип файла проверяют на сервере. Атрибут multiple разрешает выбрать несколько файлов, их список находится в свойстве files. Путь к файлу браузер скрывает, и в value виден только префикс C:\fakepath\ с названием. Что уйдёт в отправку, решает enctype у формы: при обычном кодировании только название файла, при multipart/form-data содержимое целиком.
<form method="post" enctype="multipart/form-data">
<input type="file" name="doc" accept=".png" multiple>
</form>Пример: что уходит при выборе файла
Выберите кодирование и нажмите кнопку добавления файла: под результатом то, что собрал бы браузер.
Кнопки и скрытое поле: submit, reset, button, image, hidden
У input есть четыре кнопочных типа и скрытое поле. Тип submit отправляет форму, а надпись по умолчанию задаёт браузер. Тип reset возвращает поля к значениям из разметки. Тип button сам ничего не делает и нужен скрипту. Тип image работает как submit и добавляет координаты клика. Скрытое поле hidden не показывается, но его значение уходит вместе с формой. Чем input type="submit" отличается от тега button, разобрано в уроке «Кнопки: button vs input type=submit».
<input type="submit" value="Отправить">
<input type="reset" value="Сбросить">
<input type="hidden" name="h" value="7">Пример: поведение кнопочных типов
Выберите тип, измените текст в поле и нажмите кнопку: под результатом данные, которые ушли бы с формой.
Атрибуты name и value: что уходит в отправку
Атрибут name задаёт название, под которым значение уходит с формой. Поле без name или с пустым name видно на странице, но в отправку не входит. Атрибут value задаёт начальное значение. Свойство value в скрипте хранит текущий текст. Пока человек не менял поле, изменение атрибута меняет и показанный текст. После ввода связь рвётся: атрибут остаётся начальным значением и доступен как defaultValue, а на экране остаётся то, что ввели.
<input name="pet" value="Кот">
<script>
input.setAttribute("value", "Пёс");
</script>Пример: name, value и defaultValue
Выберите запись. В последней измените текст и нажмите кнопку: под результатом свойство и атрибут.
Проверка значения: required, pattern, minlength, maxlength
Встроенная проверка срабатывает при отправке формы и отражается в validity. Атрибут required требует непустое значение, а для флажка отметку. Атрибут pattern задаёт регулярное выражение, которому должно подходить всё значение целиком. Атрибуты minlength и maxlength ограничивают длину: maxlength режет ввод с клавиатуры, а запись скриптом не обрезает. minlength проверяют только после правки человеком. Обычное эмодзи считается за два символа, составное за несколько. Атрибуты min, max и step работают для чисел, дат и ползунка, а для text игнорируются. Подробно проверку описывает урок «Встроенная валидация форм».
<input name="code" required pattern="[a-z]{3}" minlength="3" maxlength="3">Пример: ошибки проверки в validity
Выберите атрибут, введите текст или нажмите кнопку записи скриптом: под результатом найденные ошибки.
Остальные атрибуты input: readonly, disabled, placeholder и другие
Атрибут readonly запрещает правку текста, но поле остаётся в отправке и принимает фокус. Атрибут disabled отключает поле целиком: фокуса нет, в отправку оно не входит, проверка его пропускает. Атрибут placeholder показывает подсказку в пустом поле, но значением не становится. У флажка и переключателя readonly не действует. Подсказки из списка добавляет атрибут list вместе с datalist: он разобран в уроке «Автозаполнение в HTML: тег datalist». Поле вне формы привязывает атрибут form у поля. Остальные атрибуты собраны в таблице.
<input name="a" value="Кот" readonly>
<input name="b" value="Кот" disabled>
<input name="c" placeholder="Кличка">Пример: readonly, disabled и placeholder
Выберите запись: под результатом фокус, данные формы, проверка и совпадение с :read-only.
В таблице атрибуты input и типы, для которых они действуют. Устаревший align отмечен отдельно.
| Атрибут | Статус | Что делает и для каких типов | Пример записи |
|---|---|---|---|
type | актуален | Вид поля, 22 значения | type="date" |
name | актуален | Название значения в отправке. Нужно всем типам, которые что-то отправляют | name="q" |
value | актуален | Начальное значение. У флажка и переключателя значение при отметке, у кнопок надпись | value="Кот" |
checked | актуален | Начальная отметка. Только для checkbox и radio | checked |
required | актуален | Обязательное поле. Не действует для hidden, range, color и кнопок | required |
readonly | актуален | Запрет правки. Только для текстовых типов, чисел и дат; у флажка не действует | readonly |
disabled | актуален | Отключает поле, оно не уходит в отправку | disabled |
placeholder | актуален | Подсказка в пустом поле. Для текстовых типов и number | placeholder="Кличка" |
pattern | актуален | Регулярное выражение для всего значения. Для text, search, tel, url, email, password | pattern="[a-z]{3}" |
minlength, maxlength | актуален | Длина значения. Для текстовых типов, у number не действуют | maxlength="10" |
min, max, step | актуален | Границы и шаг. Для number, range и типов даты и времени | min="1" max="10" |
size | актуален | Ширина в символах, по умолчанию 20. Для текстовых типов, у number не действует | size="10" |
multiple | актуален | Несколько значений. Для file и email | multiple |
accept | актуален | Типы файлов для окна выбора. Только для file | accept=".png" |
autocomplete | актуален | Подсказки браузера: off, email, new-password и другие | autocomplete="email" |
autofocus | актуален | Переводит фокус при загрузке страницы. На странице нужен только одному полю | autofocus |
inputmode | актуален | Вид экранной клавиатуры: numeric, decimal, email и другие | inputmode="numeric" |
list | актуален | Привязка к datalist по id | list="cities" |
form | актуален | Привязка к форме по id, если поле стоит вне неё | form="order" |
formaction, formmethod, formenctype, formtarget, formnovalidate | актуален | Свои параметры отправки. Только для submit и image | formaction="/draft" |
src, alt, width, height | актуален | Картинка и её размер. Только для image; у других типов width не действует | src="go.png" alt="Найти" |
align | устарел | Выравнивание картинки. Сейчас выравнивают в CSS | align="right" |
Название поля у input: label, placeholder и доступность
Поле без названия программа чтения с экрана объявляет только как «поле ввода». Название берётся из надписи label, которая обёрнута вокруг поля или связана через for и id, из aria-label или из title. Если ничего этого нет, запасным названием служит placeholder. Полагаться на него не стоит: подсказка исчезает при вводе. Надпись label заодно увеличивает область нажатия. Подробности есть в уроке «label, placeholder и доступность форм». Роль поля зависит от типа: search даёт searchbox, number даёт spinbutton, range даёт slider, кнопочные типы дают button, а hidden в дереве доступности отсутствует.
<label for="mail">Почта</label>
<input id="mail" name="mail" type="email">Пример: откуда берётся название поля
Выберите запись: под результатом откуда браузер взял название поля.
CSS для input: размеры, состояния и :invalid
У текстовых типов, кроме search, по умолчанию box-sizing равен content-box: ширина в 20 символов не включает рамку и поля, поэтому поле шириной 100% вылезает за контейнер. В CSS поле выбирают по состояниям: :placeholder-shown для пустого поля с подсказкой, :invalid и :valid для проверки, :checked для флажка, :read-only для запрещённой правки. Псевдокласс :read-only совпадает и у disabled, и у флажка, и у обычных блоков. Цвет флажка и ползунка меняет accent-color. Размеры текстовых полей считаются так только на странице с doctype.
input:invalid { border-color: #d33; }
input:placeholder-shown { background: #fff1ea; }
input { accent-color: #1c9e93; }Пример: размеры и состояния
Выберите правило и введите текст в поле: под результатом вычисленные значения и совпавшие псевдоклассы.
Тег input и JavaScript: value, checked, события input и change
Скрипт читает текст из value, состояние флажка из checked, список файлов из files, число из valueAsNumber. Событие input срабатывает на каждое изменение: букву, стрелку, перетаскивание ползунка. Событие change у текстового поля срабатывает при потере фокуса после правки, а у флажка сразу. Запись value из скрипта событий не вызывает, поэтому после неё событие вызывают вручную.
const field = document.querySelector("input");
field.addEventListener("input", () => {
console.log(field.value);
});Пример: когда срабатывают события
Выберите тип и работайте с полем: под результатом свойства и журнал событий.
Вопросы про тег input: отличие от других полей и смена type
Поле ввода легко принять за соседние элементы, а смена его типа на лету меняет поведение: чем input отличается от соседних элементов и что случается при смене типа.
Чем input отличается от textarea, select и button?
Поле input однострочное: перенос строки в значении пропадает. Элемент textarea хранит многострочный текст, а select позволяет выбрать только то, что есть в списке, и сбрасывает неподходящее значение. Кнопка button содержит разметку, а у input надпись только в value. Сравнение этих элементов есть в уроке «select, textarea и checkbox/radio».
<input>
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
</select>Пример: одно значение в разные элементы
Выберите элемент: скрипт записывает строку с переносом, под результатом то, что получилось.
Что будет, если сменить type скриптом?
Значение остаётся, если подходит новому типу. У number, date, range и color неподходящее значение очищается или заменяется значением по умолчанию, а при возврате к text прежний текст не возвращается. Остальные текстовые типы значение сохраняют.
input.value = "abc";
input.type = "number";
input.type = "text";Пример: что происходит со значением при смене type
Выберите тип: под результатом значение до смены, после смены и после возврата к text.
Частые ошибки с тегом input
Ошибки с input в основном про забытый name и неверный выбор типа.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Записан закрывающий тег </input> | Браузер его отбрасывает, а текст внутри остаётся рядом с полем | Записать только <input> |
У поля нет name | Поле видно, но в отправку не входит | Записать <input name="q"> |
Вместо label записан только placeholder | Подсказка пропадает при вводе, названия у поля нет | Добавить <label for="id"> |
Телефон или индекс в type="number" | Появляются стрелки, значение проверяется как число | Записать type="tel" или type="text" с inputmode="numeric" |
У радиокнопок разные name | Группы нет, можно отметить все пункты | Записать одинаковый name |
Скрипт записывает value и ждёт проверки maxlength | Длинное значение остаётся, ошибки нет | Проверять длину в скрипте или вызвать проверку вручную |
Текст сбрасывают через setAttribute("value", "...") | После ввода пользователя текст на экране не меняется | Записать input.value = "..." |
Тип меняют с text на number и обратно | Прежний текст пропадает без возврата | Хранить значение в переменной |
Флажок блокируют через readonly | Клик по-прежнему меняет отметку | Использовать disabled или скрытое поле hidden |
