Виды полей ввода

Тег <input> умеет быть очень разным. Его вид задаёт атрибут type: от него зависит, как поле выглядит, какую клавиатуру покажет телефон и что браузер разрешит ввести. Если type не указан, получается обычное текстовое поле type="text".

Текстовые поля

<p><input type="text" placeholder="Имя"></p>
<p><input type="email" placeholder="Почта"></p>
<p><input type="password" placeholder="Пароль"></p>

Внешне email похож на text, но на телефоне покажет клавиатуру со знаком @, а при отправке браузер проверит, что адрес похож на почтовый.

Специальный текст

<p><input type="tel" placeholder="Телефон"></p>
<p><input type="url" placeholder="https://"></p>
<p><input type="search" value="капучино"></p>

Числа и ползунок

number принимает только числа и показывает стрелки, range — ползунок для примерного значения. Атрибуты min, max и step задают границы и шаг:

<p><input type="number" min="1" max="10" value="2"></p>
<p><input type="range" min="0" max="100" step="10" value="30"></p>

Дата и время

<p><input type="date"></p>
<p><input type="time"></p>
<p><input type="datetime-local"></p>

Щёлкните по полю — браузер откроет календарь. Вид календаря зависит от браузера и системы.

Флажки и переключатели

checkbox — флажок, который ставят и снимают независимо от других. radio — переключатель: из группы с одинаковым name можно выбрать только один вариант. Атрибут checked выбирает вариант заранее:

<p><input type="checkbox" checked> Подписаться на новости</p>
<p>
  <input type="radio" name="size" value="s"> S
  <input type="radio" name="size" value="m" checked> M
  <input type="radio" name="size" value="l"> L
</p>

Атрибут value здесь обязателен: именно он уйдёт на сервер, например size=m. Подписи к флажкам правильно делать тегом <label> — о нём следующий урок.

Цвет, файл и скрытое поле

<p><input type="color" value="#7c3aed"></p>
<p><input type="file"></p>
<input type="hidden" name="order_id" value="42">

file открывает окно выбора файла. hidden на странице не видно: в нём передают служебные данные, например номер заказа. Чтобы форма с файлами отправляла их на сервер, ей нужны method="post" и enctype="multipart/form-data".

Частая ошибка

Номер телефона, карты или индекс — не числа, хоть и состоят из цифр. Поле number уберёт ведущий ноль, покажет ненужные стрелки, а колесо мыши случайно изменит значение. Для таких данных берите tel или text:

<p><input type="number" value="0123"> — ноль может потеряться</p>
<p><input type="text" inputmode="numeric" value="0123"> — так правильно</p>

Атрибут inputmode="numeric" всё равно покажет на телефоне цифровую клавиатуру.