Тег <label>
Описание
Тег <label> создает текстовую метку для элементов формы, улучшая доступность и UX. Связывает описание с полем ввода через атрибут for или вложение элемента.
<label for="username">Имя пользователя:</label>
<input type="text" id="username">
<label>
<input type="checkbox"> Согласен с условиями
</label>
<style>
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.required::after {
content: " *";
color: #e53935;
}
</style>
<label for="email" class="form-label required">Email:</label>
<input type="email" id="email" required>
Преимущества использования:
- Улучшает доступность (скринридеры объявляют связь)
- Расширяет кликабельную область (можно кликнуть по тексту)
- Повышает юзабилити форм
- Обязателен для соответствия WCAG
- Позволяет кастомизировать оформление
Тег <label> является обязательным элементом доступных и удобных веб-форм, обеспечивая четкую связь между описанием и полем ввода.
Атрибуты
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 7.0 | 1.0 | 4.0 | 1.0 | 1.2 |