Елементи Інпут та Лейбл Форми

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

Типи Input

Текстовий Input

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

Парольний Input

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

Email Input

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

Телефонний Input

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

Числовий Input

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

Checkbox

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

Radio Button

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

File Input

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

Date Input, Time Input, and DateTime Input

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

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

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

Labels

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

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

• Коли ви натискаєте на мітку Username:, автоматично фокусується відповідне поле введення;
• label та input пов'язані між собою за допомогою атрибутів for та id відповідно;
• Обидва атрибути for та id мають однакове значення (username).

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

Відео-урок