Тег <input>
Описание
Тег <input>
создает интерактивные элементы формы для ввода данных. Это один из самых мощных и гибких элементов HTML, поддерживающий более 20 различных типов ввода.
<!-- Текстовое поле -->
<input type="text" placeholder="Введите имя">
<!-- Пароль -->
<input type="password" placeholder="Пароль">
<!-- Чекбокс -->
<input type="checkbox" id="agree">
<label for="agree">Я согласен</label>
<!-- Радио-кнопки -->
<input type="radio" name="gender" id="male">
<label for="male">Мужской</label>
<input type="radio" name="gender" id="female">
<label for="female">Женский</label>
<!-- Email с валидацией -->
<input type="email" placeholder="email@example.com" required>
<!-- Выбор даты -->
<input type="date" min="2023-01-01" max="2023-12-31">
<!-- Ползунок -->
<input type="range" min="0" max="100" step="5">
<!-- Выбор цвета -->
<input type="color" value="#ff0000">
<!-- Загрузка файла -->
<input type="file" accept=".jpg,.png" multiple>
Тег <input>
является основным инструментом для создания интерактивных веб-форм и взаимодействия с пользователями.
Атрибуты
accept | Типы файлов для загрузки |
alt | Альтернативный текст для кнопки-изображения |
autocomplete | Включение автозаполнения |
checked | Предварительный выбор элемента |
disabled | Отключение элемента |
form | Связь с формой |
formaction | URL обработки формы |
formenctype | Кодировка данных формы |
formmethod | Метод отправки формы |
formnovalidate | Отключение валидации |
formtarget | Цель отправки формы |
height | Высота (для type="image") |
list | Связь с datalist |
max | Максимальное значение |
maxlength | Максимальная длина |
min | Минимальное значение |
minlength | Минимальная длина |
multiple | Разрешение множественного выбора |
name | Имя элемента |
pattern | Регулярное выражение для валидации |
placeholder | Подсказка в поле ввода |
readonly | Только для чтения |
required | Обязательное поле |
size | Размер элемента |
src | URL изображения (для type="image") |
step | Шаг изменения значения |
type | Тип элемента ввода |
value | Значение элемента |
width | Ширина (для type="image") |
accesskey | Горячая клавиша |
class | CSS-классы |
id | Уникальный идентификатор |
style | Инлайновые стили |
title | Всплывающая подсказка |
align | Выравнивание (устарел) |
usemap | Карта изображения (устарел для input) |
Поддержка браузерами
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
3.0 | 1.0 | 4.0 | 1.0 | 1.0 |