Пошук уроків, статей та іншого контенту
Пов’язуйте підписи label з полями форми для зрозумілого інтерфейсу та кращої доступності.
labellabel — це підпис для елемента форми: текстове поле, прапорець, перемикач або інший елемент введення.
Підпис пояснює користувачеві, яку інформацію потрібно ввести або яку дію виконати:
<label for="email">Електронна пошта</label>
<input type="email" id="email">Користувач бачить текст «Електронна пошта» і розуміє призначення поля.
label також покращує доступність форми:
програми читання з екрана можуть озвучити призначення поля;
натискання на підпис активує пов’язане поле;
користувачам легше взаємодіяти з прапорцями та перемикачами;
збільшується область, на яку можна натиснути.
for та idНайпоширеніший спосіб пов’язати підпис із полем — використати атрибути for і id.
Значення for у label має точно збігатися зі значенням id у відповідного поля:
<form>
<label for="name">Ім’я</label>
<input type="text" id="name" name="name">
<label for="email">Електронна пошта</label>
<input type="email" id="email" name="email">
<button type="submit">Зареєструватися</button>
</form>У цьому прикладі:
for="name" пов’язує підпис із id="name";
for="email" пов’язує підпис із id="email";
натискання на текст підпису встановлює фокус у відповідне поле.
for та idЗначення id має бути унікальним на сторінці. Не можна використовувати однаковий id для кількох полів:
<!-- Неправильно -->
<label for="value">Ім’я</label>
<input id="value" type="text">
<label for="value">Місто</label>
<input id="value" type="text">Правильний варіант використовує різні ідентифікатори:
<label for="user-name">Ім’я</label>
<input id="user-name" type="text">
<label for="city">Місто</label>
<input id="city" type="text">id може містити дефіси, цифри та латинські літери. Важливо, щоб він був зрозумілим і не повторювався на сторінці.
label і placeholderplaceholder — це підказка всередині поля, а не повноцінний підпис:
<input
type="email"
name="email"
placeholder="example@mail.com"
>Після введення тексту підказка зникає. Крім того, користувач може не зрозуміти, що саме потрібно ввести, якщо поле вже містить значення.
Краще використовувати label разом із placeholder, якщо потрібен приклад формату:
<label for="phone">Номер телефону</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="+380 00 000 00 00"
>label пояснює призначення поля, а placeholder показує приклад значення.
labelТакий код візуально може виглядати як форма, але текст «Пароль» не пов’язаний із полем:
<!-- Неправильно -->
<p>Пароль</p>
<input type="password" name="password">Потрібно використати label:
<label for="password">Пароль</label>
<input type="password" id="password" name="password">Інший спосіб — помістити поле безпосередньо всередину label:
<label>
Ім’я
<input type="text" name="name">
</label>У цьому випадку браузер розуміє, що поле належить цьому підпису, навіть без for та id.
Такий підхід особливо зручний для простих елементів:
<label>
<input type="checkbox" name="agreement">
Я погоджуюся з умовами використання
</label>Тепер натискання на текст також перемикає прапорець.
Для звичайних полів форми часто використовують явний зв’язок через for і id, оскільки структура стає очевидною:
<label for="username">Ім’я користувача</label>
<input type="text" id="username" name="username">Головне — щоб кожне поле мало пов’язаний із ним підпис.
Прапорець зазвичай означає незалежний вибір:
<form>
<label>
<input type="checkbox" name="newsletter">
Отримувати новини електронною поштою
</label>
</form>Або з явним зв’язком:
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Отримувати новини електронною поштою</label>Перемикачі використовують, коли користувач має вибрати один варіант із кількох:
<form>
<p>Спосіб доставки:</p>
<input type="radio" id="delivery-home" name="delivery" value="home">
<label for="delivery-home">Кур’єром додому</label>
<input type="radio" id="delivery-post" name="delivery" value="post">
<label for="delivery-post">У поштове відділення</label>
</form>Усі перемикачі однієї групи мають однакове значення name, але різні id. Кожен перемикач повинен мати власний label.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Форма реєстрації</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 420px;
margin: 40px auto;
padding: 0 16px;
}
form {
display: grid;
gap: 12px;
}
label {
font-weight: bold;
}
input {
box-sizing: border-box;
width: 100%;
padding: 8px;
margin-top: 4px;
}
.option {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
}
.option input {
width: auto;
margin: 0;
}
button {
width: fit-content;
padding: 8px 16px;
}
</style>
</head>
<body>
<h1>Реєстрація</h1>
<form>
<div>
<label for="full-name">Повне ім’я</label>
<input
type="text"
id="full-name"
name="full-name"
required
>
</div>
<div>
<label for="email">Електронна пошта</label>
<input
type="email"
id="email"
name="email"
required
>
</div>
<div>
<label for="password">Пароль</label>
<input
type="password"
id="password"
name="password"
required
>
</div>
<p>Тип облікового запису:</p>
<label class="option">
<input type="radio" name="account-type" value="personal" checked>
Особистий
</label>
<label class="option">
<input type="radio" name="account-type" value="business">
Робочий
</label>
<label class="option">
<input type="checkbox" name="agreement" required>
Я погоджуюся з правилами сервісу
</label>
<button type="submit">Створити обліковий запис</button>
</form>
</body>
</html>У цій формі:
кожне текстове поле має окремий підпис;
підписи для текстових полів пов’язані через for та id;
прапорець і перемикачі пов’язані з підписами через вкладеність;
натискання на текст підпису активує відповідний елемент форми.
<!-- Погано -->
<input type="text" name="city">Користувач може не зрозуміти призначення поля, а програма читання з екрана не матиме пов’язаного опису.
<!-- Добре -->
<label for="city">Місто</label>
<input type="text" id="city" name="city">for не збігається з id<!-- Неправильно -->
<label for="user-email">Електронна пошта</label>
<input type="email" id="email">for="user-email" посилається на елемент, якого не існує. Значення мають збігатися:
<label for="email">Електронна пошта</label>
<input type="email" id="email">id використовується кілька разів<!-- Неправильно -->
<label for="contact">Телефон</label>
<input id="contact" type="tel">
<label for="contact">Електронна пошта</label>
<input id="contact" type="email">Кожне поле повинно мати унікальний id.
<!-- Неправильно -->
<span>Ім’я</span>
<input type="text">span не замінює label. Для підпису поля використовуйте саме елемент label.
Для кожного поля форми перевірте:
Чи є зрозумілий текстовий підпис?
Чи використано елемент label?
Чи пов’язаний label із правильним полем?
Чи є id унікальним?
Чи активується поле після натискання на його підпис?
Якщо використовується явний зв’язок, шаблон має такий вигляд:
<label for="unique-id">Опис поля</label>
<input id="unique-id" name="field-name">label описує призначення елемента форми.
Для явного зв’язку використовуйте однакові значення for і id.
id кожного поля має бути унікальним.
Натискання на label переводить фокус у пов’язане поле або перемикає прапорець чи перемикач.
placeholder не замінює label.
Прапорці та перемикачі також повинні мати зрозумілі підписи.
Правильне використання label робить форму зручнішою та доступнішою.