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

Поширені атрибути для елементів введення

Placeholder

placeholder надає підказку або приклад тексту всередині поля введення, орієнтуючи користувачів щодо очікуваного типу даних. Корисно для надання контексту або інструкцій користувачам перед введенням даних.

<input type="text" placeholder="Enter your email" />

Name

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

<input type="text" name="username" />

Value

value встановлює початкове або стандартне значення поля введення. Попередньо заповнює поле введення певним значенням під час завантаження сторінки.

<input type="tel" value="+1 (484) 298-9732" />

Обов'язкове поле

required вказує, що поле введення має бути заповнене перед відправленням форми. Запобігає відправленню форми, якщо обов'язкове поле залишено порожнім.

<input type="password" required />

Вимкнене поле

disabled вимикає поле введення, не дозволяючи користувачам взаємодіяти з ним або вводити дані. Корисно для відображення полів лише для читання або неактивних полів введення.

<input type="text" value="New York" disabled />

Тільки для читання

readonly робить поле введення лише для читання, дозволяючи користувачам переглядати значення, але не змінювати його. Подібно до атрибута disabled, але дозволяє фокусуватися на полі та виділяти його.

<input type="text" value="USA" readonly />

Min і Max

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

<input type="number" min="21" max="99" />

Приклад: Розглянемо приклад, що містить усі необхідні атрибути та елементи для форми.

Відео-урок