Типы input: email, date, range, color и другие

Один атрибут type у <input> меняет клавиатуру, валидацию и виджет — научимся выбирать правильный.

Тип input — это значение атрибута type, которое говорит браузеру, какие данные ждём от пользователя: число, дату, цвет, e-mail — и тот сам подбирает подходящий интерфейс ввода и проверку.

В базовых уроках вы делали поля type="text" и type="password". Но HTML знает гораздо больше типов, и каждый — это бесплатная функциональность: подходящая клавиатура на телефоне, нативный календарь, ползунок, проверка формата. Писать всё это руками на JavaScript — десятки строк и баги; поставить нужный type — один атрибут.

Зачем это знать на практике

Правильный тип input решает три задачи разом, и особенно заметно это на мобильных:

• Удобство ввода. Для телефона показывается цифровая клавиатура, для e-mail — раскладка с @ и точкой. Пользователь не ищет символы.
• Меньше ошибок. Браузер сам не даст ввести буквы в type="number" и проверит формат e-mail при отправке.
• Нативные виджеты. Календарь, ползунок, палитра цветов работают из коробки, выглядят привычно и доступны с клавиатуры и скринридера.

Текстовые подвиды: email, url, tel, search

Эти типы внешне похожи на обычное текстовое поле, но подсказывают браузеру смысл данных. Главный эффект на мобильных — разная экранная клавиатура.

<label>Почта
  <input type="email" name="email" placeholder="[email protected]">
</label>

<label>Сайт
  <input type="url" name="site" placeholder="https://...">
</label>

<label>Телефон
  <input type="tel" name="phone">
</label>

<label>Поиск
  <input type="search" name="q">
</label>

Что именно меняется:

• type="email" — клавиатура с @ и . на виду; при отправке формы браузер проверит, что значение похоже на адрес.
• type="url" — на клавиатуре появляются / и .com; проверяется наличие схемы вроде https://.
• type="tel" — чисто цифровая «звонилка». Формат не проверяется (телефоны слишком разные), но вводить удобно.
• type="search" — то же текстовое поле, но во многих браузерах появляется крестик для быстрой очистки.

Числа и диапазоны: number и range

Для количеств есть type="number" — поле со стрелками вверх/вниз и цифровой клавиатурой на телефоне. Для значений, которые удобнее «крутить», — type="range", то есть ползунок.

<label>Количество
  <input type="number" name="qty" min="1" max="10" step="1" value="1">
</label>

<label>Громкость
  <input type="range" name="volume" min="0" max="100" step="5" value="50">
</label>

Атрибуты min, max и step работают для обоих. step задаёт шаг: step="0.5" разрешит дробные значения, step="10" — только кратные десяти. Важная разница: у range поле всегда возвращает какое-то число (по умолчанию середину диапазона), поэтому оно не годится, когда «не выбрано» — это валидный вариант.

Дата и время

Семейство типов для моментов времени избавляет от самописных календарей:

<label>Дата рождения
  <input type="date" name="bday" min="1920-01-01" max="2020-12-31">
</label>

Заметьте: атрибуты min и max понимают и даты — так можно ограничить выбор разумным диапазоном. Значение всегда приходит на сервер в формате ISO (ГГГГ-ММ-ДД) независимо от того, как календарь показан пользователю — это удобно для обработки.

Цвет

Тип type="color" открывает нативную палитру и возвращает цвет в шестнадцатеричном виде:

<label>Цвет темы
  <input type="color" name="theme" value="#3366ff">
</label>

Значение всегда вида #rrggbb в нижнем регистре. Атрибут value задаёт стартовый цвет (по умолчанию чёрный #000000). Прозрачность и другие форматы здесь не поддерживаются — только сплошной HEX.

Когда нативный тип всё-таки не подходит

Новые типы хороши, но у них есть цена, которую важно понимать заранее. Нативные виджеты почти не поддаются стилизации: ширину палитры, вид календаря, оформление стрелок у number браузеры рисуют по-своему, и CSS до этих внутренностей почти не дотягивается. Если дизайн-макет требует одинакового вида во всех браузерах и собственной анимации, придётся брать JavaScript-компонент — но тогда вы берёте на себя и доступность (работу с клавиатуры, озвучивание скринридером), которую нативный виджет давал бесплатно.

Практичная стратегия — прогрессивное улучшение: ставьте семантически верный type как основу (он сразу работает, доступен и даёт мобильную клавиатуру), а более богатый кастомный виджет подключайте сверху только там, где это действительно нужно. Так пользователь старого браузера получит рабочее поле, а остальные — улучшенный интерфейс. Никогда не выбрасывайте правильный type ради красоты — он остаётся «несущей конструкцией» поля.

Как это работает под капотом

Браузер читает атрибут type и принимает три решения. Во-первых, какой виджет нарисовать: текстовую строку, поле со стрелками, ползунок, календарь, палитру. Во-вторых, какую виртуальную клавиатуру попросить у мобильной ОС — за это отвечает «inputmode по умолчанию», связанный с типом (цифровая для number/tel, e-mail-раскладка для email). В-третьих, как проверять значение: для email/url есть встроенный шаблон, для number/range/date — границы min/max/step.

Ключевой принцип — деградация. Если браузер не знает тип (старый или экзотический), он показывает обычное текстовое поле. Поэтому новые типы безопасны: в худшем случае пользователь увидит type="text" и сам наберёт значение. Ничего не сломается — просто не будет красивого виджета.

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

• Ждать единый вид календаря/ползунка во всех браузерах. Нативные виджеты выглядят по-разному в Chrome, Safari и Firefox и почти не стилизуются через CSS. Это норма; если нужен пиксель-в-пиксель одинаковый дизайн — берут JS-компонент, но теряют бесплатную доступность.
• Полагаться на type="tel" для проверки номера. Он только меняет клавиатуру и ничего не валидирует. Формат задают отдельно через pattern (см. урок о валидации).
• Думать, что значение даты приходит «как на экране». Пользователь видит 27.06.2026, а на сервер уходит ISO 2026-06-27. Не парсите локальный формат — берите ISO.
• Использовать range там, где важно «не выбрано». Ползунок всегда даёт число. Для необязательного количества лучше number с пустым значением.
• Забывать label. Любой input, даже самый умный, нуждается в подписи — иначе он недоступен и непонятен.

Итоги

• Атрибут type бесплатно даёт виджет, мобильную клавиатуру и базовую проверку — выбирайте по смыслу данных.
• Текстовые подвиды email/url/tel/search меняют клавиатуру; формат проверяют только email и url.
• number и range понимают min/max/step; range всегда возвращает число.
• date/time/datetime-local/month/week дают нативные пикеры и значение в формате ISO.
• color возвращает #rrggbb. Неизвестный тип деградирует до обычного текстового поля — поэтому новые типы безопасны.