Типи Елементу Input

HTML надає різні елементи <input>, які дозволяють вам отримувати різні типи даних від користувачів. Давайте розглянемо деякі з найпоширеніших типів input:

email та password

• type="email": Використовується для полів введення електронної пошти, які вимагають дійсної адреси електронної пошти. Браузер автоматично перевіряє адресу електронної пошти, пропонуючи користувачеві виправити невірні дані;
• type="password": Використовується для полів паролів, де текст, що вводиться, маскується з метою безпеки. Ми також можемо вказати атрибути minLength і maxLength, щоб встановити вимоги до довжини пароля.

Приклад:

number

type="number": Використовується для числового введення. Ми можемо задати певний діапазон за допомогою атрибутів min та max і встановити певне значення кроку за допомогою атрибута step.

Приклад:

telephone

type="tel": Призначено для введення телефонних номерів, але не виконує жодної перевірки введених даних. Розробник повинен перевірити введені дані і переконатися, що це дійсний номер телефону.

Приклад:

checkbox

type="checkbox": Дозволяє користувачеві вибрати одну або декілька опцій із заздалегідь визначених варіантів. Атрибут checked робить checkbox встановленим за замовчуванням.

Приклад:

radio

type="radio": Створює набір опцій, з яких можна вибрати лише одну. Радіо-кнопка представляє кожну опцію, і вибір однієї з них автоматично знімає виділення з інших. Кожна кнопка повинна мати унікальний атрибут value для її ідентифікації.

Приклад:

range

type="range": Створює елемент керування повзунком, який дозволяє користувачам вибирати значення у певному діапазоні. Ми можемо застосовувати атрибути min, max, step та value для визначення його поведінки.

Приклад:

Примітка

Ми вивчатимемо JavaScript на наступних курсах. Це не є контекстом цього курсу.

дата і час

• type="date": Дозволяє користувачам вибрати дату зі спливаючого календаря;
• type="time": Дозволяє користувачам вводити час у 24-годинному форматі;
• type="datetime-local": Поєднує введення часу та дати.

Приклад:

Примітка

Для однакового стилю на різних пристроях часто використовують готові рішення для спливаючих календарів і введення часу.