HTML предоставляет множество типов
<input> элементов, которые можно использовать для различных целей в веб-формах. Каждый тип <input> элемента определяет, какие данные могут быть введены пользователем и как эти данные будут отображаться в браузере.🚩Основные типы:
🟠Текстовые инпуты:
Однострочное текстовое поле для ввода обычного текста.
<input type="text" name="username">
Однострочное текстовое поле для ввода пароля, где введенные символы скрыты.
<input type="password" name="password">
Поле для ввода адреса электронной почты. Проверяет правильность формата введенного значения.
<input type="email" name="email">
Поле для ввода поискового запроса.
<input type="search" name="search">
Поле для ввода телефонного номера.
<input type="tel" name="phone">
Поле для ввода URL-адреса. Проверяет правильность формата введенного значения.
<input type="url" name="website">
🟠Числовые инпуты:
Поле для ввода чисел. Может включать стрелки для увеличения или уменьшения значения.
<input type="number" name="quantity" min="1" max="10">
Ползунок для выбора значения из заданного диапазона.
<input type="range" name="volume" min="0" max="100">
🟠Дата и время:
Поле для выбора даты.
<input type="date" name="birthday">
Поле для выбора даты и времени (без часового пояса).
<input type="datetime-local" name="meeting-time">
Поле для выбора месяца и года.
<input type="month" name="expiry">
Поле для выбора недели и года.
<input type="week" name="week">
Поле для выбора времени.
<input type="time" name="alarm">
🟠Выбор файлов и цвета:
Поле для загрузки файлов с компьютера.
<input type="file" name="resume">
Поле для выбора цвета с помощью цветовой палитры.
<input type="color" name="favcolor">
🟠Интерактивные элементы:
Флажок для выбора/отмены выбора опции.
<input type="checkbox" name="subscribe" value="newsletter">
Радиокнопка для выбора одного значения из группы.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Кнопка для выполнения действия.
<input type="button" value="Click me">
Кнопка для отправки формы на сервер.
<input type="submit" value="Submit">
Кнопка для сброса формы до исходных значений.
<input type="reset" value="Reset">
Ставь 👍 и забирай 📚 Базу знаний