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:

Запитайте мені питання про цей предмет

Сумаризуйте цей розділ

Покажіть реальні приклади

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