Тег <input> — это, пожалуй, один из самых универсальных и важных элементов в HTML. Он является пустым тегом (не требует закрывающего символа), но его «сила» заключается именно в атрибутах. Этот элемент позволяет создать практически любой тип управления для ввода данных: от простых текстовых полей до сложных контролов выбора даты или загрузки файлов. Связать с ним подписку легко, используя тег <label>, что делает интерфейс удобным и доступным.
Возможности <input> поистине впечатляют. Меняя всего одно значение атрибута type, вы можете превратить обычное поле в кнопку, чекбокс, слайдер или даже цветовой пикер. Это невероятно гибкий инструмент для разработчика.
Ключевые атрибуты
- accept:
- Этот атрибут помогает отфильтровать типы файлов при загрузке (работает только с
type="file"). Если пользователь попытается выбрать файл неподходящего формата, браузер его проигнорирует. Можно указать конкретные MIME-типы или общие категории:
- audio/* — все звуковые файлы;
- video/* — все видеофайлы;
- image/* — все изображения.
- MIME_тип — конкретный тип (например, image/png).
Совет: Помните, что это лишь «подсказка» для пользователя. Никогда не полагайтесь на accept как на единственный механизм безопасности — валидацию файлов всегда нужно проводить на стороне сервера!Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях.
- alt:
- Предоставляет альтернативный текст, если изображение (для
type="image") по какой-либо причине не может быть отображено. Это важно для доступности.
- autocomplete:
- Управляет функцией автозаполнения браузером:
- on (по умолчанию) — браузер предлагает ранее введенные данные;
- off — пользователь должен вводить данные заново каждый раз.
Примечание: Работает с типами: text, search, url, tel, email, password и другими.
- autofocus:
- Логический атрибут. Если он указан, поле автоматически получит фокус сразу после загрузки страницы. Удобно для простых форм логина.
input autofocus
Примечание: Не поддерживается в старых версиях IE.
- checked:
- Отмечает чекбокс или радио-кнопку как выбранную по умолчанию.
input checked
- disabled:
- Делает элемент неактивным (серым). Пользователь не сможет с ним взаимодействовать. Не работает для скрытых полей (
hidden).
input disabled
Примечание: Атрибут disabled не работает с input type="hidden".
- form:
- Позволяет связать поле ввода с определенной формой по её ID, даже если тег
<input> находится вне тега <form>. Это дает свободу в верстке!
Примечание: Не поддерживается в IE.
- formaction:
- Переопределяет URL отправки формы для конкретной кнопки (
submit или image). Полезно, если одна форма отправляет данные на разные endpoints в зависимости от действия.
Примечание: Не поддерживается в IE9 и старше.
- formenctype:
- Определяет способ кодирования данных при отправке (переопределяет атрибут формы).
- application/x-www-form-urlencoded — стандартное кодирование;
- multipart/form-data — обязательно для загрузки файлов.
Примечание: Не поддерживается в IE9 и старше.
- formmethod:
- Определяет HTTP-метод отправки (GET или POST) для конкретной кнопки.
- get — данные добавляются в URL;
- post — данные отправляются в теле запроса.
Примечание: Не поддерживается в IE9 и старше.
- formnovalidate:
- Отключает встроенную в браузер валидацию для конкретной кнопки отправки.
input formnovalidate
Примечание: Не поддерживается в IE9 и Safari.
- formtarget:
- Указывает, где открыть результат отправки формы (новое окно, та же вкладка и т.д.), переопределяя атрибут формы.
- _blank, _self, _parent, _top.
Примечание: Не поддерживается в IE9 и старше.
- height:
- Высота изображения (для
type="image") в пикселях.
- list:
- Связывает поле с элементом
<datalist>, предлагая пользователю готовые варианты ответов.
Примечание: Не поддерживается в IE9 и Safari.
- max:
- Максимальное допустимое значение (для чисел, дат, диапазонов). Часто используется вместе с
min.
- число — верхняя граница;
- дата — максимальная дата.
Примечание: Не поддерживается в IE9 и Firefox (старых версий).
- maxlength:
- Жестко ограничивает количество символов, которые пользователь может ввести. Например, для поля «Год» идеально подходит значение 4.
- min:
- Минимальное допустимое значение (для чисел, дат).
- число — нижняя граница;
- дата — минимальная дата.
<input type="number" name="quantity" min="1" max="5">
Примечание: Не поддерживается в IE9 и Firefox (старых версий).
- multiple:
- Разрешает выбор нескольких значений сразу. Работает только с email и file.
input multiple
Примечание: Не поддерживается в IE9.
- name:
- Критически важный атрибут! Имя элемента отправляется на сервер вместе с данными. Именно по нему бэкенд понимает, что это за поле (имя пользователя, пароль и т.д.). Также используется в JavaScript.
- pattern:
- Позволяет задать регулярное выражение для проверки формата ввода на клиенте. Отличная замена простой JS-валидации для простых случаев!
Примечание: Не поддерживается в IE9 и Safari.
- placeholder:
- Показывает подсказку (пример значения) внутри поля, когда оно пустое. Исчезает при вводе текста или получении фокуса.
Примечание: Не поддерживается в IE9.
- readonly:
- Поле можно читать и выделять текст, но не менять. В отличие от disabled, данные из readonly-поля все равно отправляются на сервер.
input readonly
- required:
- Обязательное поле. Браузер не даст отправить форму, пока оно не заполнено. Очень удобно для базовой валидации!
input required
Примечание: Не поддерживается в IE9 и Safari.
- size:
- Ширина поля в символах (а не пикселях!). Например, size="10" создаст поле шириной под 10 символов.
Для ограничения максимального количества знаков используйте maxlength.
- src:
- Путь к изображению для кнопки отправки (
type="image"). Обязателен для этого типа.
- step:
- Шаг изменения значения (для чисел и дат). Например, step="10" позволит вводить только 0, 10, 20...
Примечание: Не поддерживается в IE9 и Firefox.
- type:
- Голова всей структуры! Определяет тип контрола. Если значение неизвестно браузеру, он отобразит стандартное текстовое поле.
- button — обычная кнопка (обычно с JS).
- checkbox — флажки (можно выбрать несколько).
- color — палитра цветов.
- date, datetime, time и др. — встроенные виджеты выбора дат/времени.
- email — поле для почты с автоматической проверкой формата.
- file — загрузка файлов.
- hidden — скрытое поле (данные не видны, но отправляются).
- image — изображение как кнопка отправки.
- number, range — числовые поля и слайдеры.
- password — маска символов.
- radio — взаимоисключающие кнопки (выбрать только один).
- search, tel, url — специализированные поля с оптимизацией клавиатуры на мобильных.
- value:
- Текущее значение. Для кнопок — текст на ней, для текстовых полей — начальное содержимое, для чекбоксов/радио — то, что уйдет на сервер при отправке.
- width:
- Ширина изображения (для
type="image") в пикселях.
Помимо перечисленных, тег <input> поддерживает и другие глобальные атрибуты HTML5.
Пример использования
<form action="demo_form.asp">
Имя:
Фамилия:
|