Свайпніть щоб показати меню

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

Email та Password

type="email": приймає електронні адреси та виконує базову перевірку у браузері;
type="password": приховує введені символи для безпеки та може використовувати minlength і maxlength.

index.html

Число

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

index.html

Телефон

type="tel": для телефонних номерів. Вбудована валідація відсутня. Розробники перевіряють вручну.

index.html

Чекбокс

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

index.html

Радіокнопка

type="radio": вибір одного варіанту з групи. Усі радіокнопки повинні мати однакове значення name.

index.html

Повзунок діапазону

type="range": елемент керування для вибору числа в межах діапазону. Логіка JavaScript у цьому курсі не розглядається.

index.html

index.js

Примітка

Логіка JavaScript у цьому курсі пропущена.

Дата та час

type="date": селектор календаря;
type="time": вибір часу;
type="datetime-local": поєднання полів дати та часу.

index.html

Примітка

Для уніфікованого стилю розробники часто використовують готові UI-бібліотеки замість стандартних елементів вибору браузера.

Дізнайтеся більше

Можливо, ви помітили, що при заповненні певних полів браузер може запропонувати варіанти автозаповнення. Браузер запам’ятовує введені вами значення у полях і потім пропонує їх для автозаповнення.

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

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

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

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Дослідження різних типів введення в HTML

Email та Password

type="email": приймає електронні адреси та виконує базову перевірку у браузері;
type="password": приховує введені символи для безпеки та може використовувати minlength і maxlength.

index.html

Число

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

index.html

Телефон

type="tel": для телефонних номерів. Вбудована валідація відсутня. Розробники перевіряють вручну.

index.html

Чекбокс

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

index.html

Радіокнопка

type="radio": вибір одного варіанту з групи. Усі радіокнопки повинні мати однакове значення name.

index.html

Повзунок діапазону

type="range": елемент керування для вибору числа в межах діапазону. Логіка JavaScript у цьому курсі не розглядається.

index.html

index.js

Примітка

Логіка JavaScript у цьому курсі пропущена.

Дата та час

type="date": селектор календаря;
type="time": вибір часу;
type="datetime-local": поєднання полів дати та часу.

index.html

Примітка

Дізнайтеся більше

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

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

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