Связать label и checkbox без 'for=id': решение для IE
Быстрый ответ
Для связывания checkbox
и его label
без применения for
и id
следует разместить флажок внутри самого тега label
, как показано ниже:
<label><input type="checkbox"> Отметьте здесь</label>
Теперь, при нажатии на текст метки, вы сможете менять состояние чекбокса.
Повышение удобства использования с помощью CSS
Связывание метки и чекбокса — это только первый шаг. Для улучшения пользовательского взаимодействия можно применить CSS:
Сделайте метки более привлекательными, добавив курсор руки:
CSSСкопировать кодlabel { cursor: pointer; /* курсор в форме руки при наведении */ }
Отображайте метки активированных чекбоксов жирным шрифтом, используя соседние селекторы в CSS:
CSSСкопировать кодinput[type="checkbox"]:checked + label { font-weight: bold; /* делаем текст активных меток жирным */ }
Скрывайте чекбоксы, оставляя метки в поле зрения, что будет полезно при создании кастомизированных чекбоксов:
CSSСкопировать кодinput[type="checkbox"] { position: absolute; left: -9999px; /* чекбокс теперь невидим */ }
Создание индивидуального дизайна чекбоксов
Если вам не подходят стандартные чекбоксы и потребуется создать собственный дизайн:
- Вместо стандартного вида используйте псевдоэлементы или изображения.
Свяжите скрытый чекбокс со стилизованными метками:
HTMLСкопировать код<label> <input type="checkbox" style="position: absolute; left: -9999px;"> <span class="custom-checkbox"></span> Отметьте здесь </label>
CSSСкопировать код.custom-checkbox { display: inline-block; width: 15px; height: 15px; background: url('checkbox-unchecked.svg') no-repeat; /* внешний вид неактивного пользовательского чекбокса */ cursor: pointer; } input[type="checkbox"]:checked + .custom-checkbox { background: url('checkbox-checked.svg') no-repeat; /* изображение активного чекбокса */ }
Работа с атрибутом name
Атрибут name
не влияет на связывание чекбокса с меткой, однако он необходим для группировки чекбоксов. Одно и то же имя name
объединяет набор элементов в группу:
<form>
<label><input type="checkbox" name="interests" value="coding"> Программирование</label>
<label><input type="checkbox" name="interests" value="design"> Дизайн</label>
</form>
При таком подходе на сервер будет отправлен массив, отражающий выбор пользователя.
Содействие доступности
Неявная связь будет эффективна при стандартном использовании, однако для обеспечения доступности лучше использовать for
:
- Это поможет программам для чтения с экрана лучше понять связь между элементами.
- Некоторые вспомогательные технологии зависят от явной связи для корректной работы.
Устранение проблем совместимости браузеров
В различных браузерах user controls могут отображаться по-разному. Поэтому:
- Проверяйте внешний вид сайта в разных браузерах, включая IE, Firefox, Chrome и Safari.
- Стремитесь обеспечить одинаковый пользовательский опыт для пользователей, работающих как с мышью, так и с клавиатурой.
Инструменты вроде Can I use... помогут проверить работоспособность CSS-свойств и элементов HTML.
Визуализация
Можно представить, что чекбокс — это сундук с сокровищами (🧰), а метка — это карта (🗺️), которая к нему приведет.
Без использования "for=id":
🗺️ ➡️ 🏝️ ... ❓ 🧰 (Метка и чекбокс остались на острове, но путь между ними не определен)
При вложении метки в чекбокс:
🗺️🤝🧰 (Карта и сундук с сокровищами всегда вместе, что подчеркивает их связь)
Так же как карта намекает на свою цель, включение метки в чекбокс создает ясную связь.
Тестирование функционала
Пригодность решения определяется его эффективностью. Необходимо:
- Создать прототип формы.
- Проверить ее функционирование на разных устройствах и в разных браузерах.
- Использовать JsFiddle или аналогичные сервисы для оценки решения и получения обратной связи.
Тщательное тестирование поможет избежать проблем с удобством использования после запуска.
Полезные материалы
- <label>: Элемент Label – HTML: Язык гипертекстовой разметки | MDN — подробное руководство от MDN по использованию элемента
<label>
. - Метки элементов управления | Инициатива по веб-доступности (WAI) | W3C — рекомендации по явному связыванию элементов форм и меток.
- html – Стоит ли помещать элементы ввода внутрь элемента label? – Stack Overflow — обсуждение на Stack Overflow преимуществ и недостатков вложения элементов ввода в тег label.
- H44: Использование элементов label для ассоциации текстовых меток с элементами форм | Техники для WCAG 2.0 — методика W3C по связыванию текстовых меток с элементами форм.
- WebAIM: Создание доступных форм – Доступные элементы управления форм — руководство по созданию доступных форм, в том числе с чекбоксами.
- Понимание критерия успеха 3.3.2: Метки или инструкции | WAI | W3C — разъяснение W3C необходимости меток и инструкций для пользовательского ввода.