input типы

Элемент <input> -- основной элемент форм с 22+ типами, определяющими вид поля ввода, встроенную валидацию и мобильную клавиатуру.

Зачем нужно

Правильный type у <input>:

  • Показывает подходящую мобильную клавиатуру (цифры для tel, @ для email)
  • Включает встроенную валидацию (проверка формата email, URL)
  • Предоставляет нативные UI-контролы (datepicker для date, color picker для color)
  • Помогает автозаполнению браузера

Где используется

  • Любая форма на любом сайте
  • Поиск, логин, регистрация, настройки
  • Фильтры, калькуляторы, конфигураторы

Предпосылки

Текстовые типы

text -- обычный текст

<label for="name">Имя:</label>
<input type="text" id="name" name="name"
       placeholder="Иван Петров"
       maxlength="100"
       autocomplete="name">

password -- пароль

<label for="pwd">Пароль:</label>
<input type="password" id="pwd" name="password"
       minlength="8"
       required
       autocomplete="current-password">

Символы скрыты точками/звёздочками. autocomplete помогает менеджерам паролей.

email -- электронная почта

<label for="email">Email:</label>
<input type="email" id="email" name="email"
       required
       autocomplete="email"
       placeholder="user@example.com">

<!-- Разрешить несколько адресов -->
<input type="email" name="recipients" multiple>

Мобильная клавиатура покажет @ и .. Браузер валидирует формат.

url -- веб-адрес

<label for="website">Сайт:</label>
<input type="url" id="website" name="website"
       placeholder="https://example.com"
       pattern="https://.*">

tel -- телефон

<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone"
       placeholder="+7 (900) 123-45-67"
       pattern="\+7\s?\(?\d{3}\)?\s?\d{3}[-\s]?\d{2}[-\s]?\d{2}"
       autocomplete="tel">

tel не валидирует формат (телефоны разные в каждой стране). Используй pattern для валидации.

search -- поиск

<label for="q">Поиск:</label>
<input type="search" id="q" name="q"
       placeholder="Найти..."
       aria-label="Поиск по сайту">

Визуально похож на text, но может иметь крестик очистки и специфичную стилизацию.

Числовые типы

number -- число

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

<!-- С десятичными -->
<input type="number" name="price" min="0" step="0.01">

range -- ползунок

<label for="volume">Громкость: <output id="vol-output">50</output>%</label>
<input type="range" id="volume" name="volume"
       min="0" max="100" step="1" value="50"
       oninput="document.getElementById('vol-output').textContent = this.value">

Дата и время

<!-- Дата -->
<label for="bday">Дата рождения:</label>
<input type="date" id="bday" name="birthday"
       min="1900-01-01" max="2026-12-31"
       autocomplete="bday">

<!-- Время -->
<label for="alarm">Будильник:</label>
<input type="time" id="alarm" name="alarm" step="60">

<!-- Дата + время (локальное) -->
<label for="meeting">Встреча:</label>
<input type="datetime-local" id="meeting" name="meeting"
       min="2026-01-01T00:00" max="2026-12-31T23:59">

<!-- Месяц -->
<input type="month" name="expiry">

<!-- Неделя -->
<input type="week" name="week">

Выбор

checkbox -- чекбокс

<!-- Одиночный -->
<label>
  <input type="checkbox" name="agree" value="yes" required>
  Согласен с условиями
</label>

<!-- Группа чекбоксов -->
<fieldset>
  <legend>Навыки:</legend>
  <label><input type="checkbox" name="skills" value="html"> HTML</label>
  <label><input type="checkbox" name="skills" value="css"> CSS</label>
  <label><input type="checkbox" name="skills" value="js"> JavaScript</label>
</fieldset>

radio -- радиокнопка

<fieldset>
  <legend>Способ оплаты:</legend>
  <label>
    <input type="radio" name="payment" value="card" checked>
    Банковская карта
  </label>
  <label>
    <input type="radio" name="payment" value="cash">
    Наличные
  </label>
  <label>
    <input type="radio" name="payment" value="online">
    Онлайн-кошелёк
  </label>
</fieldset>

Все radio в группе должны иметь одинаковый name -- тогда можно выбрать только один.

Файл

file -- загрузка файлов

<!-- Один файл -->
<label for="avatar">Аватар:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

<!-- Несколько файлов -->
<input type="file" name="photos" multiple accept="image/jpeg, image/png">

<!-- Только определённые форматы -->
<input type="file" name="document" accept=".pdf,.doc,.docx">

<!-- Фото с камеры (мобильные) -->
<input type="file" name="photo" accept="image/*" capture="environment">

Специальные типы

color -- выбор цвета

<label for="bg">Цвет фона:</label>
<input type="color" id="bg" name="bg-color" value="#1a1a2e">

hidden -- скрытое поле

<!-- Невидимо для пользователя, отправляется с формой -->
<input type="hidden" name="csrf_token" value="abc123xyz">
<input type="hidden" name="user_id" value="42">

Общие атрибуты <input>

Атрибут Описание
name Имя поля (ключ при отправке)
value Значение по умолчанию
placeholder Подсказка (исчезает при вводе)
required Обязательное поле
disabled Заблокировано (не отправляется)
readonly Только чтение (отправляется)
autofocus Фокус при загрузке страницы
autocomplete Подсказка для автозаполнения
pattern Regex для валидации
minlength / maxlength Мин/макс длина текста
min / max Мин/макс для числовых типов
step Шаг для числовых типов
multiple Несколько значений (email, file)
list ID для <datalist>
form ID формы (если input вне form)

Сводная таблица типов

Тип Мобильная клавиатура Валидация UI
text Стандартная Нет Текстовое поле
password Стандартная Нет Скрытые символы
email С @ и . Формат email Текстовое поле
url С / и . Формат URL Текстовое поле
tel Цифровая Нет Текстовое поле
search Стандартная Нет С крестиком очистки
number Цифровая min/max/step Со стрелками
range -- min/max/step Ползунок
date -- min/max Datepicker
time -- min/max/step Timepicker
color -- Нет Color picker
file -- accept Кнопка выбора файла
checkbox -- required Галочка
radio -- required Кружок
hidden -- Нет Невидимо

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

Ошибка Почему плохо Как правильно
type="text" для email Нет валидации и мобильной клавиатуры type="email"
Нет name Поле не отправляется Всегда указывай name
placeholder вместо label Исчезает при вводе, плохо для a11y <label> обязателен
autocomplete не указан Браузер угадывает неправильно Указывай конкретные значения
Radio без общего name Можно выбрать несколько Одинаковый name для группы
disabled вместо readonly disabled не отправляет данные readonly если нужна отправка

Практика

  1. Создай форму регистрации с text, email, password, tel, date
  2. Добавь группу checkbox и radio кнопок с <fieldset> и <legend>
  3. Создай ползунок range с отображением текущего значения
  4. Добавь загрузку файлов с accept и multiple
  5. Проверь формы на мобильном -- посмотри, какие клавиатуры появляются

Связанные темы

Ресурсы