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

Типи Input

Текстовий Input

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

<input type="text" />

Парольний Input

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

<input type="password" />

Email Input

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

<input type="email" />

Телефонний Input

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

<input type="tel" />

Числовий Input

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

<input type="number" />

Checkbox

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

<input type="checkbox" />

Radio Button

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

<input type="radio" />

File Input

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

<input type="file" />

Date Input, Time Input, and DateTime Input

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

<input type="date" />
<input type="time" />
<input type="datetime-local" />

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

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

Labels

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

<label for="username">Username:</label>
<input type="text" id="username" />

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

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

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

Відео-урок