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>, які дозволяють отримувати різні типи даних від користувачів. Розглянемо деякі з найбільш поширених типів полів введення:

email та password

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

index.html

copy

number

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

index.html

index.html

copy

telephone

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

index.html

index.html

copy

прапорець

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

index.html

index.html

copy

radio

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

index.html

index.html

copy

range

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

index.html

index.html

index.js

index.js

copy

Примітка

JavaScript не є основною темою цього курсу, тому його логіка буде пропущена.

дата та час

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

Приклад:

index.html

index.html

copy

Примітка

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

question mark

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

Select the correct answer

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Suggested prompts:

Can you explain more about how browser validation works for these input types?

What are some best practices for using these different input types in forms?

Can you show examples of how to use these input types in an HTML form?

Awesome!

Completion rate improved to 2.56

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

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

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

email та password

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

index.html

copy

number

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

index.html

index.html

copy

telephone

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

index.html

index.html

copy

прапорець

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

index.html

index.html

copy

radio

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

index.html

index.html

copy

range

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

index.html

index.html

index.js

index.js

copy

Примітка

JavaScript не є основною темою цього курсу, тому його логіка буде пропущена.

дата та час

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

Приклад:

index.html

index.html

copy

Примітка

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

question mark

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

Select the correct answer

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

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

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

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