Всё, что джуну нужно знать о теге input

Элемент <input> — один из самых старых и фундаментальных в HTML. Ещё в HTML 2.0 (1995 год) существовали только базовые типы вроде text, password и checkbox. Но по мере развития веба стало очевидно, что пользователям нужно вводить не только текст, а самые разные данные: email, телефоны, даты, цвета, числа. Так, начиная с HTML5 (2014 год), появились новые семантические типы <input>, которые помогают браузеру лучше понимать контекст и давать пользователю удобные инструменты для ввода.

С января 2018 года все эти новые типы ввода находятся в статусе Widely Available в Baseline. Это значит, что их можно использовать без оглядки на совместимость: современные браузеры корректно поддерживают большинство сценариев.

Зачем нужны разные типы ввода

Разные типы <input> позволяют:

• автоматически проверять правильность данных (например, email-адреса);
• показывать удобную клавиатуру на мобильных устройствах (например, для телефона или URL);
• упрощать доступность для пользователей и скринридеров;
• давать браузеру больше информации для автозаполнения.

Пример: email, телефон и URL

<form>
  <label>Электронная почта: <input type="email" name="email" required></label><br>
  <label>Телефон: <input type="tel" name="phone" required></label><br>
  <label>Веб-сайт: <input type="url" name="website"></label>
</form>

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

Числа и диапазоны

<form>
  <label>Возраст: <input type="number" min="0" max="120"></label><br>
  <label>Оценка: <input type="range" min="0" max="10" step="1"></label>
</form>

Тип number позволяет ввести только цифры и задавать ограничения, а range превращает ввод в удобный ползунок.

Дата и время

<form>
  <label>Дата рождения: <input type="date"></label><br>
  <label>Время встречи: <input type="time"></label><br>
  <label>Дата и время: <input type="datetime-local"></label><br>
  <label>Месяц: <input type="month"></label><br>
  <label>Неделя: <input type="week"></label>
</form>

Эти поля автоматически вызывают календарь или селектор времени. Раньше для этого приходилось писать сложный JavaScript-календарь, сегодня всё встроено в браузер.

Цвет

<label>Выберите цвет: <input type="color"></label>

Тип color открывает палитру выбора цвета — раньше такие виджеты приходилось реализовывать вручную.

Пароль и поиск

<form>
  <label>Пароль: <input type="password"></label><br>
  <label>Поиск: <input type="search"></label>
</form>

password скрывает вводимые символы, а search оптимизирован для поиска (например, на iOS появляется кнопка «Очистить»).

Файлы и скрытые данные

<form>
  <label>Загрузите файл: <input type="file"></label><br>
  <input type="hidden" name="session_id" value="12345">
</form>

file открывает диалог выбора файлов, а hidden позволяет отправлять на сервер данные, не видимые пользователю.

Эволюция <input> отражает путь развития веба: от простых форм до удобных и адаптивных интерфейсов. Современные типы полей решают сразу несколько задач — упрощают ввод, повышают доступность и делают сайты дружелюбнее для пользователей.

Освоив все возможности <input>, вы сможете создавать формы, которые работают одинаково удобно и на компьютере, и на смартфоне, а браузер сам позаботится о проверках и подсказках.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.