[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-html-kakie-tipy-elementov-vvoda-input-sushchestvuyut-v-html5":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":19,"progress":20,"seo":21},1252,"kakie-tipy-elementov-vvoda-input-sushchestvuyut-v-html5",39,"osnovy-html","Основы HTML","📄","Какие типы элементов ввода input существуют в HTML5","HTML5 расширил набор типов элемента `\u003Cinput>`, позволяя браузеру автоматически обеспечивать валидацию формата и удобный интерфейс ввода (календарь, ползунок, палитра цветов).\n\n### Основные типы input\n\n| Тип | Описание | Интерфейс |\n|-----|---------|-----------|\n| `text` | Однострочное текстовое поле | Обычное поле |\n| `password` | Поле для пароля | Символы скрываются |\n| `email` | Email с валидацией формата | Клавиатура с `@` на мобильных |\n| `number` | Числовое поле | Кнопки +\u002F- |\n| `date` | Выбор даты | Календарь |\n| `time` | Выбор времени | Часы |\n| `checkbox` | Флажок | Множественный выбор |\n| `radio` | Переключатель | Одиночный выбор из группы |\n| `file` | Выбор файла | Диалог выбора файла |\n| `hidden` | Скрытое поле | Не отображается |\n| `submit` | Кнопка отправки | Кнопка |\n| `range` | Ползунок | Slider |\n| `color` | Выбор цвета | Палитра |\n| `url` | URL-адрес с валидацией | Поле с проверкой |\n| `tel` | Номер телефона | Числовая клавиатура на мобильных |\n| `search` | Поле поиска | С кнопкой очистки |\n\n### Атрибуты валидации\n\n| Атрибут | Назначение | Применимость |\n|---------|-----------|-------------|\n| `required` | Обязательное поле | Все типы |\n| `pattern` | Регулярное выражение | `text`, `tel`, `email`, `url`, `password`, `search` |\n| `placeholder` | Подсказка внутри поля | Текстовые типы |\n| `min` \u002F `max` | Диапазон значений | `number`, `date`, `range` |\n| `minlength` \u002F `maxlength` | Длина текста | Текстовые типы |\n| `step` | Шаг изменения | `number`, `range`, `date`, `time` |\n| `disabled` | Поле неактивно, не отправляется | Все типы |\n| `readonly` | Только чтение, но отправляется | Все типы |\n\n### Пример формы регистрации\n\n\u003Cdetails>\n\u003Csummary>Форма с различными типами input\u003C\u002Fsummary>\n\n```html\n\u003Cform action=\"\u002Fapi\u002Fregister\" method=\"POST\">\n    \u003Clabel for=\"name\">Имя:\u003C\u002Flabel>\n    \u003Cinput type=\"text\" id=\"name\" name=\"name\" required minlength=\"2\" maxlength=\"50\"\n           placeholder=\"Введите имя\">\n\n    \u003Clabel for=\"email\">Email:\u003C\u002Flabel>\n    \u003Cinput type=\"email\" id=\"email\" name=\"email\" required\n           placeholder=\"user@example.com\">\n\n    \u003Clabel for=\"password\">Пароль:\u003C\u002Flabel>\n    \u003Cinput type=\"password\" id=\"password\" name=\"password\" required\n           minlength=\"8\" pattern=\"(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}\"\n           title=\"Минимум 8 символов: цифра, строчная и заглавная буква\">\n\n    \u003Clabel for=\"age\">Возраст:\u003C\u002Flabel>\n    \u003Cinput type=\"number\" id=\"age\" name=\"age\" min=\"18\" max=\"120\">\n\n    \u003Clabel for=\"birthday\">Дата рождения:\u003C\u002Flabel>\n    \u003Cinput type=\"date\" id=\"birthday\" name=\"birthday\">\n\n    \u003Clabel for=\"phone\">Телефон:\u003C\u002Flabel>\n    \u003Cinput type=\"tel\" id=\"phone\" name=\"phone\"\n           pattern=\"\\+7\\d{10}\" placeholder=\"+7XXXXXXXXXX\">\n\n    \u003Clabel>\n        \u003Cinput type=\"checkbox\" name=\"agree\" required> Согласен с условиями\n    \u003C\u002Flabel>\n\n    \u003Clabel>Пол:\u003C\u002Flabel>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"gender\" value=\"male\"> Мужской\u003C\u002Flabel>\n    \u003Clabel>\u003Cinput type=\"radio\" name=\"gender\" value=\"female\"> Женский\u003C\u002Flabel>\n\n    \u003Cinput type=\"hidden\" name=\"source\" value=\"registration_form\">\n    \u003Cbutton type=\"submit\">Зарегистрироваться\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\n\u003C\u002Fdetails>\n\n### Частые ошибки\n\n- Полагаются только на клиентскую HTML5-валидацию — её легко обойти через DevTools или прямой HTTP-запрос. Серверная валидация обязательна\n- Используют `disabled` вместо `readonly`, когда хотят запретить редактирование, но отправить значение — `disabled`-поля не включаются в запрос\n- Забывают указать одинаковый `name` для группы `radio`-кнопок — без этого они работают как независимые переключатели\n\n### Как используется в 2026\n\nВ Spring Boot валидация данных форм выполняется с помощью аннотаций Bean Validation (`@NotBlank`, `@Email`, `@Size`, `@Pattern`). HTML5-типы ввода обеспечивают первый уровень защиты на клиенте, а Bean Validation — второй на сервере. Фреймворки htmx и Hotwire используют стандартные HTML-формы для создания динамических интерфейсов без JavaScript.\n\n> **На собеседовании:** перечислите основные типы (text, password, email, number, date, checkbox, radio, file, hidden) и атрибуты валидации (required, pattern, min\u002Fmax). Обязательно подчеркните, что HTML5-валидация не заменяет серверную — её можно обойти. Упомяните связку с Bean Validation в Spring Boot.","","middle",[15,16,17,18],"html5","html","атрибуты","frontend",[],null,{"title":22,"description":23,"ogTitle":24,"ogDescription":25,"keywords":26,"schemaAnswer":39,"featuredSnippetReady":40},"Какие типы элементов ввода input существуют в HTML5 — Gymterview","Типы input в HTML5: text, password, email, number, date, checkbox, radio, file, hidden, range, color, url, tel, search. Атрибуты валидации и связь с Bean Validation.","Типы input в HTML5: text, email, number, date и другие — Gymterview","Полный список типов \u003Cinput> в HTML5 с атрибутами валидации. Связь HTML5-валидации с Bean Validation в Spring Boot.",[27,28,29,30,31,32,33,34,35,36,37,38],"input","типы input","HTML5 input","text","email","number","date","checkbox","radio","file","валидация","Bean Validation","HTML5 расширил типы \u003Cinput>: text, password, email (валидация формата), number (кнопки +\u002F-), date (календарь), time, checkbox, radio, file, hidden, submit, range (ползунок), color (палитра), url, tel, search. Атрибуты валидации: required, pattern, min\u002Fmax, minlength\u002Fmaxlength, step, disabled, readonly. HTML5-валидация не заменяет серверную (Bean Validation в Spring).",true]