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

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

email та password

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

Приклад:

index.html

number

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

Приклад:

index.html

telephone

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

Приклад:

index.html

checkbox

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

Приклад:

index.html

radio

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

Приклад:

index.html

range

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

Приклад:

index.html

index.js

Примітка

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

дата і час

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

Приклад:

index.html

Примітка

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

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 5