Як ми вже бачили раніше, найпотужнішим елементом форми є input. Цей елемент очікує дані від користувача. Зосередимося на ньому.

Типи Input

Текстовий Input

Призначений для введення коротких текстових даних, таких як імена користувачів, електронні адреси або короткі повідомлення.

html
Скопіювати код
Expand

Парольний Input

Використовується для введення паролів, де символи маскуються з метою безпеки. Забезпечує конфіденційність, приховуючи введені символи.

html
Скопіювати код
Expand

Email Input

Використовується для збору електронних адрес від користувачів. Виконує валідацію на стороні клієнта, щоб переконатися, що введене значення є дійсним у форматі електронної пошти.

html
Скопіювати код
Expand

Телефонний Input

Використовується для збору телефонних номерів від користувачів. Дозволяє користувачам вводити телефонні номери в різних форматах, включаючи міжнародні номери.

html
Скопіювати код
Expand

Числовий Input

Використовується для збору числових даних від користувачів. Забезпечує цифрову клавіатуру на мобільних пристроях для зручного введення.

html
Скопіювати код
Expand

Checkbox

Дозволяє користувачам вибирати один або кілька варіантів зі списку. Підходить для сценаріїв, де дозволено кілька виборів, наприклад, вибір кількох елементів зі списку або погодження з умовами.

html
Скопіювати код
Expand

Radio Button

Дозволяє користувачам вибирати один варіант зі списку взаємовиключних виборів. Підходить для сценаріїв, де слід вибрати лише один варіант, наприклад, вибір статі або вибір способу оплати.

html
Скопіювати код
Expand

File Input

Дозволяє користувачам завантажувати файли з їхнього пристрою, вибирати з локальної файлової системи та надсилати їх разом з даними форми. Ця функція особливо корисна при прикріпленні документів або зображень.

html
Скопіювати код
Expand

Date Input, Time Input, and DateTime Input

Дозволяє користувачам вводити дати, час або обидва. Надає зручні інтерфейси для вибору дат і часу. Корисно для введення дат народження, часу зустрічей або розкладу подій.

html
Скопіювати код
Expand

Приклад: Введіть щось у поля, і вони запропонують різні варіанти. Не хвилюйтеся; дані не будуть зібрані.

Ви могли помітити, що заповнювати форму не дуже зручно, коли ви не розумієте, що саме запитується в кожному полі. Ось чому на допомогу приходять мітки.

Labels

Мітки (<label>) є важливими для зв'язування текстових міток з елементами введення форми, підвищуючи доступність та зручність для користувача. Важливо, щоб атрибут for тега <label> відповідав атрибуту id пов'язаного елемента input.
Приклад:

html
Скопіювати код
Expand

У наведеному вище прикладі:

• Коли ви натискаєте на мітку Username:, автоматично фокусується відповідне поле введення;

• label та input пов'язані між собою за допомогою атрибутів for та id відповідно;

• Обидва атрибути for та id мають однакове значення (username).

Давайте полегшимо заповнення форми, додавши мітки до полів введення з попереднього прикладу.
Приклад:

Відео-урок