Исполняемые доки HTML: Типы input

Q: Сколько типов input в HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url и week. Неизвестный или отсутствующий тип ведет себя как text.

Q: Какой тип input в HTML по умолчанию?

text. без type или с типом, которого браузер не знает, это однострочное текстовое поле.

Q: Использовать ли type="number" для телефонов и почтовых индексов?

Нет. number нужен для количеств: он добавляет кнопки прокрутки и не принимает +, пробелы и дефисы, которые бывают в номерах телефонов. Используйте type="tel" для номеров телефонов и type="text" с inputmode="numeric" для кодов вроде почтовых индексов и номеров карт.

Q: В каком формате значение input type date?

Значение всегда YYYY-MM-DD, например 2026-09-24, в каком бы формате читатель ни видел дату на экране. Отображение следует локали читателя; отправляемое значение и значение в скрипте нет.

Q: Нужен ли тегу input закрывающий тег?

Нет. это пустой элемент: пишите . Закрывающий некорректен, а косая черта в разрешена, но ничего не делает.

Тег input и его типы

<input> это поле формы, а его атрибут type определяет, какое именно. Один и тот же тег создает текстовое поле, ползунок, выбор даты или выбор цвета. Попробуйте каждое поле ниже и нажмите Submit, чтобы увидеть, что отправляет форма:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> это пустой элемент, поэтому закрывающего тега у него нет. Его name это ключ, под которым отправляется значение, а value это начальное значение. Отсутствующий или написанный с ошибкой type дает обычное текстовое поле.

Все типы input в HTML

`type`	Что это	Примечания
`text`	Одна строка текста	По умолчанию
`password`	Текст, показанный точками	Сам по себе не шифруется; отправляйте по HTTPS
`email`	Адрес email	Проверяет формат; клавиша `@` на клавиатуре телефона
`url`	Веб-адрес	Должен начинаться со схемы, например `https://`
`tel`	Номер телефона	Цифровая клавиатура на телефоне, формат не проверяется
`search`	Поле поиска	Часто показывает кнопку очистки
`number`	Число	Кнопки прокрутки, `min`, `max`, `step`
`range`	Ползунок	Неточный по замыслу; значение это число
`date`	Дата	Значение `YYYY-MM-DD`
`time`	Время суток	Значение `HH:MM` (24-часовой формат)
`datetime-local`	Дата и время без часового пояса	Значение `YYYY-MM-DDTHH:MM`
`month`	Год и месяц	Поддерживается не во всех браузерах
`week`	Год и номер недели	Поддерживается не во всех браузерах
`color`	Выбор цвета	Значение `#rrggbb` строчными буквами
`checkbox`	Флажок вкл/выкл	См. чекбокс в HTML
`radio`	Один вариант из группы	См. радиокнопка в HTML
`file`	Выбор файла	`accept`, `multiple`
`hidden`	Значение, которое отправляется, но не показывается	Для ID и токенов
`submit`	Кнопка отправки	`<button type="submit">` гибче
`reset`	Кнопка сброса	Редко бывает хорошей идеей
`button`	Кнопка, которая сама ничего не делает	Для JavaScript
`image`	Кнопка отправки в виде картинки	Также отправляет координаты клика

Текстовые типы и клавиатуры телефонов

email, url, tel, search и text на компьютере выглядят как текстовое поле. Разница в проверке и в том, какая клавиатура открывается на телефоне. Рамка в этом примере становится зеленой или красной в зависимости от того, как браузер оценивает значение:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example для браузера корректный email: он проверяет только наличие текста, @ и домена, но не то, что в домене есть точка. Настоящая проверка происходит на сервере.
example.com не является корректным url, потому что в нем нет схемы. https://example.com корректен.
tel принимает что угодно. Форматы телефонов слишком различаются от страны к стране, поэтому встроенной проверки нет; если она нужна, добавьте pattern.
inputmode="numeric" просит телефон показать цифровую клавиатуру без проблем type="number", поэтому это правильный выбор для почтовых индексов, одноразовых кодов и номеров карт.

number и range

Оба принимают min, max и step. number нужен для точных значений; range это ползунок для значений, где точное число не так важно. Ползунок не показывает число, поэтому добавьте к нему <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

По умолчанию step у number равен 1, поэтому поле цены без step="0.01" отклоняет 4.99 при отправке формы. В JavaScript input.value всегда строка; чтобы получить число, используйте input.valueAsNumber.

Дата и время

Типы даты и времени открывают собственный выбор браузера. То, что видит читатель, следует его локали (09/24/2026, 24.09.2026), но значение всегда в одном фиксированном формате:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Именно этот фиксированный формат получает сервер и читает JavaScript, поэтому разбирать «24.09.2026» вам никогда не придется. min и max принимают тот же формат. У datetime-local нет часового пояса: если он важен, переводите время на сервере с учетом пояса читателя.

color и file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" ограничивает выбор файлов картинками (и на телефонах предлагает камеру); он принимает и расширения, например accept=".pdf,.docx". Это лишь подсказка для окна выбора, поэтому проверяйте тип файла на сервере. multiple разрешает несколько файлов. Для настоящей загрузки форме также нужны method="post" и enctype="multipart/form-data".

Подсказки через datalist

<datalist> дает текстовому полю список подсказок, но при этом разрешает любое значение. Свяжите их атрибутом list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Введите в поле «ja», чтобы увидеть подходящие подсказки. В отличие от select, читатель может ввести значение, которого нет в списке.

Атрибуты полей input

Атрибут	Что делает
`name`	Ключ, под которым отправляется значение
`value`	Начальное значение
`placeholder`	Подсказка, видимая, пока поле пустое (не подпись)
`required`	Поле нужно заполнить перед отправкой
`disabled`	Нельзя использовать, и оно не отправляется
`readonly`	Нельзя редактировать, но оно отправляется
`autocomplete`	Что подставлять автозаполнением: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Ограничения для чисел, диапазонов, дат и времени
`minlength`, `maxlength`	Ограничения длины для текстовых типов
`pattern`	Регулярное выражение, которому должно соответствовать все значение
`inputmode`	Какую клавиатуру показать на телефоне: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	`id` элемента `<datalist>`
`multiple`	Несколько значений, для `email` и `file`
`accept`	Типы файлов для `file`

Частые ошибки

type="number" для телефонов, почтовых индексов или номеров карт. Это не количества. Используйте tel или text с inputmode="numeric".
Поле цены без step="0.01". Дробные значения не проходят проверку.
placeholder вместо подписи. Он исчезает, как только читатель начинает печатать.
accept или type="email" как защита. Это удобства; сервер все равно проверяет еще раз.
type="month" или type="week" без запасного варианта. Некоторые браузеры показывают обычное текстовое поле.
Закрывающий тег </input>. <input> пустой элемент.

Часто задаваемые вопросы

Сколько типов input в HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url и week. Неизвестный или отсутствующий тип ведет себя как text.

Какой тип input в HTML по умолчанию?

text. <input> без type или с типом, которого браузер не знает, это однострочное текстовое поле.

Использовать ли type="number" для телефонов и почтовых индексов?

Нет. number нужен для количеств: он добавляет кнопки прокрутки и не принимает +, пробелы и дефисы, которые бывают в номерах телефонов. Используйте type="tel" для номеров телефонов и type="text" с inputmode="numeric" для кодов вроде почтовых индексов и номеров карт.

В каком формате значение input type date?

Значение всегда YYYY-MM-DD, например 2026-09-24, в каком бы формате читатель ни видел дату на экране. Отображение следует локали читателя; отправляемое значение и значение в скрипте нет.

Нужен ли тегу input закрывающий тег?

Нет. <input> это пустой элемент: пишите <input type="text" name="city">. Закрывающий </input> некорректен, а косая черта в <input /> разрешена, но ничего не делает.

Связанные концепции