Чекбоксы в колонках: порядок DOM и удобные подписи
Набор независимых вариантов можно расположить сеткой, сохраняя нативные чекбоксы. Важно, чтобы визуальный порядок не противоречил последовательности клавиатурной навигации.
Назначение
Набор независимых вариантов можно расположить сеткой, сохраняя нативные чекбоксы. Важно, чтобы визуальный порядок не противоречил последовательности клавиатурной навигации.
Как это работает
Fieldset и legend задают общий вопрос. Каждый label охватывает input и подпись. Grid автоматически подбирает колонки, а DOM сохраняет обычный порядок слева направо по строкам.
Пример
<style>.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.8rem}.topic-grid label{display:flex;align-items:start;gap:.5rem;padding:.6rem;border:1px solid #91ad9b}</style>
<fieldset><legend>Какие темы включить?</legend><div class="topic-grid">
<label><input type="checkbox" name="topic" value="html">HTML</label><label><input type="checkbox" name="topic" value="css">CSS</label><label><input type="checkbox" name="topic" value="js">JavaScript</label><label><input type="checkbox" name="topic" value="http">HTTP</label>
</div></fieldset>Что должно получиться
Варианты переносятся в подходящее число колонок. Можно отметить несколько пунктов, а подпись каждого остаётся кликабельной. Данные не отправляются: это демонстрация компоновки.
Граница применения и частая ошибка
Не используйте многоколоночный поток текста, если он создаёт неожиданный порядок переходов между контролами. Не скрывайте стандартный фокус и не делайте всю группу одной огромной кликабельной областью без отдельных подписей.
Самостоятельная проверка
Пройдите все варианты клавишей Tab на узком и широком окне. Отметьте два пункта пробелом, удлините один текст и проверьте, что соседние подписи не перекрываются.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.