Тег <​input​> в HTML

Тег <input> используют, чтобы создать поля ввода в HTML-формах. С его помощью можно добавить на страницу текстовое поле, поле для пароля, выбора даты или загрузки файла. <input> показывает пользователю элемент, с помощью которого он может ввести или выбрать данные. Потом эти данные можно отправить на сервер или обработать с использованием JavaScript.

Тег поддерживает разные типы полей и множество атрибутов, которые помогают контролировать его поведение и внешний вид. В статье мы подробно разберём, как с ним работать.

Содержание

• Как пишется тег <input>
• Основные типы полей <input>
• Основные атрибуты тега input
• Как организовать валидацию данных
• Как использовать <input> в составе формы и отправлять данные на сервер
• Доступность полей ввода
• Полезные советы и лайфхаки

Как пишется тег <input>

<input> — это одиночный тег. У него нет закрывающего парного тега, поэтому запись всегда выглядит как одна строка. Чтобы тег работал, ему задают атрибуты. Единственный обязательный атрибут — type, который определяет, какое именно поле появится на странице.

Простейший пример:

<input type="text">

В этом случае браузер создаст текстовое поле, в которое можно ввести строку.

Если изменить значение атрибута type, то изменятся свойства поля. Например:

<input type="password">

Это поле скрывает введённые символы точками или звёздочками.

Основные типы полей <input>

Атрибут type определяет, какое именно поле появится на странице. Вот основные варианты:

Текстовое поле

<input type="text" placeholder="Ваше имя">

Используется для ввода обычного текста: имени, названия города, комментария.

Поле для пароля

<input type="password" placeholder="Пароль">

Похоже на текстовое, но введённые символы скрываются.

Поле для электронной почты

<input type="email" placeholder="example@mail.com">

Проверяет, похоже ли введённое значение на адрес почты.

Поле для числа

<input type="number" placeholder="0">

Позволяет вводить только цифры. Можно задать минимальное и максимальное значение, чтобы ограничить ввод.

Флажок (checkbox)

<input type="checkbox"> Подписаться на новости

Даёт возможность выбрать «да» или «нет». Можно поставить несколько галочек в одной форме.

Переключатель (radio)

<input type="radio" name="gender" value="male"> Мужской  <input type="radio" name="gender" value="female"> Женский

Позволяет выбрать только один вариант из группы.

Поле для выбора файла

<input type="file">

Открывает диалог выбора файла на компьютере.

Выбор даты

<input type="date">

Показывает календарь, где можно выбрать дату. Часто используется в формах бронирования и регистрации.

Скрытое поле

<input type="hidden" name="id" value="123">

Не отображается на странице, но отправляется вместе с формой. Полезно для передачи технических данных, которые пользователь не должен изменять.