🤔 Какие виды инпутов бывают?



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">




Ставь 👍 и забирай 📚 Базу знаний