Элемент HTML <input> является основным компонентом для ввода пользовательских данных в веб-формах.
Типы полей ввода (type)
Текстовые и семантические типы
| Тип | Описание |
|---|---|
text |
Однострочный обычный текст |
password |
Поле ввода пароля с маскировкой символов |
email |
Адрес электронной почты со встроенной проверкой |
url |
Ввод абсолютного URL-адреса |
tel |
Номер телефона (вызывает цифровую клавиатуру на смартфонах) |
search |
Поле поиска с кнопкой быстрой очистки |
Числовые и количественные типы
| Тип | Описание |
|---|---|
number |
Числовое поле со счетчиком шага (min, max, step) |
range |
Ползунок для приблизительного выбора значения |
Типы для даты и времени
| Тип | Описание |
|---|---|
date |
Выбор даты по календарю (год, месяц, день) |
time |
Выбор времени (часы, минуты) |
datetime-local |
Локальные дата и время без часового пояса |
month |
Выбор года и месяца |
week |
Выбор года и номера недели по ISO |
Выбор и действия
| Тип | Описание |
|---|---|
checkbox |
Флажок (чекбокс) для одиночного или множественного выбора |
radio |
Переключатель взаимоисключающего выбора в группе |
color |
Палитра для выбора цвета |
file |
Загрузка прикрепленных файлов (accept, multiple) |
hidden |
Скрытое поле, передающее значение на сервер |
submit |
Кнопка отправки формы |
reset |
Кнопка сброса значений формы |
button |
Универсальная кнопка без стандартного поведения |
Ключевые атрибуты валидации
| Атрибут | Поведение |
|---|---|
required |
Запрещает отправку формы, если поле пустое |
pattern="[A-Za-z0-9]+" |
Регулярное выражение (Regex) для проверки значения |
min="1" max="100" |
Минимальные и максимальные ограничения значений |
step="0.5" |
Интервал шага для числовых полей |
minlength="5" maxlength="20" |
Минимальная и максимальная длина строки в символах |
placeholder="..." |
Подсказка, исчезающая при вводе текста |
readonly |
Запрещает редактирование, но значение отправляется |
disabled |
Отключает поле и исключает его из отправки |
autofocus |
Автоматически устанавливает фокус при загрузке страницы |
Комплексный пример рабочей формы
<form action="/api/submit" method="POST">
<label for="user-email">Электронная почта:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Пароль (не менее 8 символов):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Возраст:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Я принимаю условия использования
</label>
<input type="submit" value="Зарегистрироваться" />
</form>