Типы input в деталях: color, range, search, tel, url и их поддержка браузерами

Введение в специализированные input-типы

Стандартный type="text" — это как универсальный ключ, но у HTML5 есть целый набор «ключей» под специфичные задачи! Сегодня разберём color, range, search, tel, url и их поддержку браузерами.

type="color" — палитра в один клик

Позволяет пользователям выбирать цвет через встроенный интерфейс.

<label for="bg-color">Выберите цвет фона:</label>
<input type="color" id="bg-color" value="#ff0000">

Как это работает:
- При клике открывается палитра (зависит от ОС/браузера).
- Возвращает значение в HEX-формате (#RRGGBB).
- Атрибут value задаёт начальный цвет.

Поддержка:
✔ Chrome, Edge, Firefox, Safari (частично).
❌ IE11 — покажет как text.

Лайфхак: Можно менять цвет фона страницы динамически через JS:

document.getElementById('bg-color').addEventListener('input', (e) => {
  document.body.style.backgroundColor = e.target.value;
});

type="range" — ползунок для значений

Идеален для настроек громкости, яркости или любых числовых диапазонов.

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

Ключевые атрибуты:
- min/max — границы (по умолчанию 0 и 100).
- step — шаг изменения (например, 5 для значений 0, 5, 10...).
- value — стартовое значение.

Поддержка:
✔ Все современные браузеры.

Совет: Добавьте <output> для отображения значения в реальном времени:

<input type="range" id="volume" oninput="output.value = this.value">
<output id="output">50</output>

type="search" — поисковая строка

Визуально отличается от text (например, в Safari есть крестик для очистки).

<input type="search" placeholder="Найти...">

Особенности:
- В мобильных браузерах может открывать клавиатуру с удобным расположением кнопок.
- Некоторые браузеры кэшируют предыдущие запросы.

Поддержка:
✔ Все браузеры (но стилизация может различаться).

type="tel" — телефонный номер

Подсказывает браузеру, что нужно вводить телефон. На мобильных устройствах открывает цифровую клавиатуру.

<input type="tel" pattern="[0-9]{10}" placeholder="7900123456">

Важно:
- Сам по себе tel не валидирует номер (для этого используйте pattern с регулярным выражением).
- Пример выше разрешает ровно 10 цифр.

Поддержка:
✔ Все браузеры (но валидация зависит от pattern).

type="url" — для веб-адресов

Автоматически проверяет, соответствует ли ввод формату URL.

<input type="url" placeholder="https://example.com">

Что нужно знать:
- Браузеры требуют протокол (http:// или https://).
- Валидация срабатывает при отправке формы.

Поддержка:
✔ Chrome, Firefox, Edge.
❌ Safari (обрабатывает как text).

Поддержка браузерами: как проверить?

Не все типы одинаково работают везде. Проверяйте на Can I use или используйте полифиллы.

Стратегия:
1. Всегда добавляйте type="text" как fallback.
2. Для range/color — продумайте альтернативный интерфейс.

Итоги

• color — выбор цвета через палитру.
• range — интуитивный ползунок.
• search — удобство для поиска.
• tel/url — семантика + мобильные плюшки.

Эти типы делают формы удобнее без JavaScript! 🎨🔍

Действие: Попробуйте заменить хотя бы один text на специализированный тип в своём проекте.