В HTML элемент <input> — один из наиболее часто используемых. Он позволяет пользователю вводить данные в веб-форму. В зависимости от типа элемент <input> может отображаться и работать по-разному.
Ниже перечислены основные типы элемента <input> с коротким комментарием о его предназначении:
Позволяет вводить однострочный текст.
Поле ввода пароля, при этом вводимые символы могут отображаться в виде точек или звездочек для скрытия информации.
Позволяет загружать файлы с локального компьютера.
Позволяет отметить один или несколько вариантов из множества в предоставленном списке.
Позволяет пользователю выбрать только один вариант из группы.
Отправляет данные формы на сервер.
Предназначается для ввода е-мейла. Может проверять, соответствует ли введенное значение формату электронной почты.
Предназначено для ввода телефонного номера с возможностью проверки формата.
Позволяет вводить адрес в интернете.
Используется для передачи данных, которые не видны пользователю и не изменяются им.
Позволяет пользователю выбрать дату.
Позволяет пользователю выбрать время.
Атрибуты элемента <input> предназначены для настройки его поведения и в некоторых случаях — внешнего вида элементов формы. Вот список самых часто используемых атрибутов с комментарием об их предназначении:
Уникальный идентификатор для элемента, например имени пользователя. Часто используется для связи со скриптом JavaScript.
<input type="text" id="username">
Имя элемента, используемое при отправке данных формы.
<input type="text" name="username">
Значение элемента по умолчанию. Например, в поле, где нужно подтвердить согласие на обработку персональных данных.
<input type="text" value="Yes">
Текст-подсказка, отображаемый в пустом поле.
<input type="text" placeholder="Введите ваше имя">
Указывает, что поле обязательно для заполнения.
<input type="text" required>
Поле доступно для просмотра, но не для редактирования.
<input type="text" readonly value="Только для чтения">
Отключает элемент, делая его недоступным для взаимодействия.
<input type="text" disabled value="Отключено">
Ограничивает максимальное количество вводимых символов.
<input type="text" maxlength="10">
- min и max.
Устанавливают минимальное и максимальное допустимое значение для числовых и датированных полей.
<input type="number" min="1" max="10">
<input type="date" min="2023-01-01" max="2023-12-31">
Определяет шаг изменения значения для числовых полей, например при указании цены.
<input type="number" step="0.01">
Устанавливает шаблон для проверки вводимых данных, например формулы или номера телефона.
<input type="text" pattern="[A-Za-z]{3,}">
С элементами типа <input> сталкивался любой пользователь интернета. Регистрация на любом сайте, отправка письма, подписка на рассылку — всё, что делается через формы, задействует этот элемент. Возможность связывать формы со скриптами JavaScript позволяет владельцам сайтов настраивать взаимодействие с пользователями как угодно.
Рассмотрим популярный пример — форму регистрации на сайте:
<form action="/register" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Регистрация">
</form>
Как видите, в одной простой форме регистрации элемент <input> использовался четыре раза. То есть элемент этот распространенный и востребованный, хотя и довольно простой.
Элемент <input> в HTML важен для создания интерактивных веб-форм. За счет многочисленных типов и атрибутов этого элемента разработчик может гибко настраивать ввод данных и обеспечивать удобство для конечных пользователей.