middle

Какие типы элементов ввода input существуют в HTML5

HTML5 расширил набор типов элемента <input>, позволяя браузеру автоматически обеспечивать валидацию формата и удобный интерфейс ввода (календарь, ползунок, палитра цветов).

Основные типы input

Тип	Описание	Интерфейс
`text`	Однострочное текстовое поле	Обычное поле
`password`	Поле для пароля	Символы скрываются
`email`	Email с валидацией формата	Клавиатура с `@` на мобильных
`number`	Числовое поле	Кнопки +/-
`date`	Выбор даты	Календарь
`time`	Выбор времени	Часы
`checkbox`	Флажок	Множественный выбор
`radio`	Переключатель	Одиночный выбор из группы
`file`	Выбор файла	Диалог выбора файла
`hidden`	Скрытое поле	Не отображается
`submit`	Кнопка отправки	Кнопка
`range`	Ползунок	Slider
`color`	Выбор цвета	Палитра
`url`	URL-адрес с валидацией	Поле с проверкой
`tel`	Номер телефона	Числовая клавиатура на мобильных
`search`	Поле поиска	С кнопкой очистки

Атрибуты валидации

Атрибут	Назначение	Применимость
`required`	Обязательное поле	Все типы
`pattern`	Регулярное выражение	`text`, `tel`, `email`, `url`, `password`, `search`
`placeholder`	Подсказка внутри поля	Текстовые типы
`min` / `max`	Диапазон значений	`number`, `date`, `range`
`minlength` / `maxlength`	Длина текста	Текстовые типы
`step`	Шаг изменения	`number`, `range`, `date`, `time`
`disabled`	Поле неактивно, не отправляется	Все типы
`readonly`	Только чтение, но отправляется	Все типы

Пример формы регистрации

Форма с различными типами input

<form action="/api/register" method="POST">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required minlength="2" maxlength="50"
           placeholder="Введите имя">

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

    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required
           minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
           title="Минимум 8 символов: цифра, строчная и заглавная буква">

    <label for="age">Возраст:</label>
    <input type="number" id="age" name="age" min="18" max="120">

    <label for="birthday">Дата рождения:</label>
    <input type="date" id="birthday" name="birthday">

    <label for="phone">Телефон:</label>
    <input type="tel" id="phone" name="phone"
           pattern="\+7\d{10}" placeholder="+7XXXXXXXXXX">

    <label>
        <input type="checkbox" name="agree" required> Согласен с условиями
    </label>

    <label>Пол:</label>
    <label><input type="radio" name="gender" value="male"> Мужской</label>
    <label><input type="radio" name="gender" value="female"> Женский</label>

    <input type="hidden" name="source" value="registration_form">
    <button type="submit">Зарегистрироваться</button>
</form>

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

Полагаются только на клиентскую HTML5-валидацию — её легко обойти через DevTools или прямой HTTP-запрос. Серверная валидация обязательна
Используют disabled вместо readonly, когда хотят запретить редактирование, но отправить значение — disabled-поля не включаются в запрос
Забывают указать одинаковый name для группы radio-кнопок — без этого они работают как независимые переключатели

Как используется в 2026

В Spring Boot валидация данных форм выполняется с помощью аннотаций Bean Validation (@NotBlank, @Email, @Size, @Pattern). HTML5-типы ввода обеспечивают первый уровень защиты на клиенте, а Bean Validation — второй на сервере. Фреймворки htmx и Hotwire используют стандартные HTML-формы для создания динамических интерфейсов без JavaScript.

На собеседовании: перечислите основные типы (text, password, email, number, date, checkbox, radio, file, hidden) и атрибуты валидации (required, pattern, min/max). Обязательно подчеркните, что HTML5-валидация не заменяет серверную — её можно обойти. Упомяните связку с Bean Validation в Spring Boot.

#html5 #html #атрибуты #frontend