Установка радиокнопки в HTML по умолчанию: атрибут checked

Быстрый ответ

Для того чтобы установить радиокнопку выбранной по умолчанию, добавьте к ней атрибут checked:

<input type="radio" name="group" value="A">
<input type="radio" name="group" value="B" checked> <!-- Этот атрибут 'checked' обеспечивает выбор по умолчанию -->
<input type="radio" name="group" value="C">

Так, по умолчанию, будет выбрана кнопка с значением "B". Чтобы изменить этот выбор, достаточно переместить атрибут checked на другой элемент <input>.

Детальное разбирательство выбора по умолчанию

Работа атрибута 'checked'

Атрибут checked служит указанием браузеру отметить данную радиокнопку. Ему нерелевантны значения такие как true или false; важно только его наличие.

Подробнее об этом расскажет наш спикер на видео

HTML и XHTML

В XHTML корректно использовать checked="checked". Тем не менее, в стандартном HTML достаточно просто checked, что делает код изящнее и соответствующим стандартам.

Особенности работы в Angular

Если вы работаете с Angular, используйте ng-model для связки с радиокнопкой, которая будет выбрана по умолчанию в AngularJS. В Angular 2 и новее применяйте [(ngModel)] для достижения той же цели.

Группировка и расстановка приоритетов для улучшения читаемости

Атрибут name для объединения радиокнопок в группу

Для того чтобы браузер воспринимал набор радиокнопок как единый выбор, присвойте им одинаковое значение атрибута 'name'.

Подчеркивание значимости важных атрибутов

Код должен быть читаемым и понятным — это залог его легкой поддержки. Поэтому выделяйте в тегах ключевые атрибуты, например, checked.

Визуализация

Можно представить, что ваша форма — это ипподром, а радиокнопки — это жокеи:

🏁🏇1️⃣    🏇2️⃣    🏇3️⃣

Установка радиокнопки по умолчанию схожа с изначальным преимуществом одного из жокеев:

<input type="radio" name="race" value="horse1" checked> Жокей 1 🏇✅ <!-- Вот он, лидирующий с самого старта! -->
<input type="radio" name="race" value="horse2"> Жокей 2
<input type="radio" name="race" value="horse3"> Жокей 3

Первый жокей получает преимущество сразу после стартового сигнала!

Стремление к чистому и доступному коду форм

Чистый код — залог комфорта работы разработчиков

Код пишется не только для выполнения задач машинами. Он должен быть простым, эффективным и понятным для людей, которые будут его поддерживать.

Доступность

Экранные читалки и прочие ассистивные технологии полагаются на правильное использование атрибута checked, это позволяет пользователям ориентироваться и эффективно интеракцировать с вашими формами.

Преимущества Angular

В Angular используйте [checked]="condition" или [value]="expression" для создания форм, которые позволят динамично и реактивно фиксировать выбор по умолчанию.

Полезные материалы

1. <input type="radio"> – HTML: HyperText Markup Language | MDN — на странице MDN Web Docs приведены подробности работы радиокнопок в HTML.
2. The "Checkbox Hack" (и как его использовать) | CSS-Tricks — на CSS-Tricks представлены последние инновации в стилизации радиокнопок.
3. Обучение работе с формами | web.dev — на Web.dev доступно руководство по всем аспектам работы с формами, включая радиокнопки. Очень рекомендуется к прочтению!
4. Чекбоксы против радиокнопок — Nielsen Norman Group предлагает конкретные рекомендации о том, когда стоит использовать флажки, а когда радиокнопки.
5. Формы в HTML-документах — Официальная спецификация W3C, в которой подробно описаны все аспекты работы форм, включая радиокнопки.
6. WebAIM: Создание доступных форм – Управляемые элементы форм — данное руководство подчеркивает важность вопросов доступности и лучшие практики использования радиокнопок.