HTML-тег <input>

Характеристики

• Тип: строчный, интерактивный, семантический
• Назначение: Представляет интерактивный элемент управления в форме для ввода данных пользователем.
• Родители: <form>, <fieldset>, <label>, любые HTML-теги, которые могут содержать строчные элементы.
• Потомки: Не содержит содержимого (самозакрывающийся тег).
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• type — Определяет тип элемента (text, password, submit, checkbox, radio и другие).
• name — Имя элемента формы.
• value — Значение элемента.
• placeholder — Подсказка для ввода.
• disabled — Отключает элемент.
• readonly — Делает элемент только для чтения.
• required — Указывает, что поле является обязательным.
• autocomplete — Включает или отключает автозаполнение.
• autofocus — Автоматически устанавливает фокус на элемент при загрузке страницы.
• list — Связывает элемент с &lt;datalist&gt; для автозаполнения.
• min — Минимальное значение для числовых элементов.
• max — Максимальное значение для числовых элементов.
• maxlength — Максимальная длина вводимого текста.
• multiple — Позволяет выбрать несколько значений.
• pattern — Регулярное выражение для валидации вводимых данных.
• step — Определяет шаг изменения значения для числовых элементов.
• src — URL изображения для типа input=image.
• height — Высота изображения для типа input=image.
• width — Ширина изображения для типа input=image.
• alt — Альтернативный текст для типа input=image.
• srcset — Набор изображений для разных размеров или плотностей экрана для типа input=image.
• sizes — Указывает, какие изображения использовать в зависимости от размера окна просмотра для типа input=image.
• usemap — Указывает имя карты-изображения для типа input=image.
• crossorigin — Управляет поведением CORS для загрузки изображений.
• referrerpolicy — Управляет политикой реферера для запроса изображений.

Пример использования

<input id="myInput" type="text" name="username" placeholder="Введите имя">

Использование в JavaScript

// Получение элемента по ID
const input = document.getElementById('myInput');

// Изменение значения
input.value = 'Новое значение';

// Добавление класса
input.classList.add('new-class');

// Отключение элемента
input.disabled = true;

Рекомендации по обеспечению доступности (a11y)

• Всегда связывайте <input> с <label> для улучшения доступности.
• Используйте атрибуты aria-required и другие ARIA-атрибуты при необходимости.
• Отсутствие связанного <label> может затруднить использование поля для пользователей вспомогательных технологий.

Полезные ссылки