Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Дослідження Різних Типів Полів Введення в HTML | HTML-Форми та Введення Користувача
Ultimate HTML

bookДослідження Різних Типів Полів Введення в HTML

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

Електронна пошта та пароль

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

index.html

copy

Число

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

index.html

index.html

copy

Телефон

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

index.html

index.html

copy

Чекбокс

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

index.html

index.html

copy

Радіокнопка

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

index.html

index.html

copy

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

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

index.html

index.html

index.js

index.js

copy
Note
Примітка

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

Дата та час

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

index.html

copy
Note
Примітка

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

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

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

question mark

Яка основна відмінність між полями введення з type="email" та type="password"?

Select the correct answer

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Suggested prompts:

Can you give examples of how to use each input type in HTML?

What are some best practices for validating user input with these types?

How do I style these input types with CSS?

bookДослідження Різних Типів Полів Введення в HTML

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

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

Електронна пошта та пароль

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

index.html

copy

Число

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

index.html

index.html

copy

Телефон

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

index.html

index.html

copy

Чекбокс

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

index.html

index.html

copy

Радіокнопка

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

index.html

index.html

copy

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

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

index.html

index.html

index.js

index.js

copy
Note
Примітка

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

Дата та час

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

index.html

copy
Note
Примітка

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

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

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

question mark

Яка основна відмінність між полями введення з type="email" та type="password"?

Select the correct answer

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

Як ми можемо покращити це?

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

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