Установка начального значения radio button в HTML

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

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

<input type="radio" name="option" value="Option1" checked>Интересный вариант
<input type="radio" name="option" value="Option2">Скучный вариант

Атрибут checked обеспечивает автоматический выбор радиокнопки Option1 при инициализации страницы.

Приемы для различных сценариев

Простое добавление атрибута checked – лишь начало. Важно понимать, как его правильно использовать в различных сценариях и учесть лучшие практики:

Динамическое обновление через JavaScript

Если требуется изменение радиокнопки в режиме реального времени, JavaScript поможет достичь этого:

document.getElementById("option1").checked = true;

Для использования данного кода, радиокнопке присваивается атрибут id:

<input type="radio" id="option1" name="option" value="Option1">Интересный вариант
<input type="radio" name="option" value="Option2">Скучный вариант

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

Обеспечение доступности

Для поддержки скринридеров и других адаптивных средств к каждому элементу радиокнопки следует добавить соответствующий элемент <label>:

<label for="option1">Интересный вариант</label>
<input type="radio" id="option1" name="option" value="Option1" checked>
<label for="option2">Скучный вариант</label>
<input type="radio" id="option2" name="option" value="Option2">

Управление группой радиокнопок

Чтобы в группе радиокнопок возможно было выбрать лишь один вариант, они должны иметь одинаковый атрибут name:

<input type="radio" name="option" value="Option1" checked>Интересный вариант
<input type="radio" name="option" value="Option2">Скучный вариант

Использование фреймворков

В Angular установка атрибута checked происходит так:

<input type="radio" [checked]="choice === defaultChoice">

В случае с React:

<input type="radio" checked={this.state.choice === defaultChoice} onChange={this.handleChange} />

Не забывайте о контроле состояния при работе с динамическими формами в современных веб-приложениях.

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

🦄 <input type="radio" name="pet" value="unicorn"> Единорог
🐎 <input type="radio" name="pet" value="horse"> Лошадь
🐕 <input type="radio" name="pet" value="dog" checked> Собака
🐈 <input type="radio" name="pet" value="cat"> Кот
🐠 <input type="radio" name="pet" value="goldfish"> Золотая рыбка

Собака выбрана по умолчанию, поскольку только её радиокнопка установлена атрибутом checked.

Завершение

Обработка сброса формы

Для восстановления значений по умолчанию после сброса формы в JavaScript используется метод reset:

formElement.reset();

Улучшение взаимодействия с пользователем

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

input[type="radio"]:checked + label {
  font-weight: bold; 
}

Тестирование совместимости с браузерами

Необходимо проверить работу вашего решения в разных браузерах и на различных устройствах. Даже маленькие отличия могут сильно влиять на пользовательский опыт.

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

1. Элементы форм в HTML – Здесь вы найдёте больше информации о различных элементах форм в HTML, включая радиокнопки.
2. <input type="radio"> – HTML: HyperText Markup Language | MDN – Документация MDN подробно описывает каждый аспект работы с радиокнопками.
3. Пример использования подклассов? – Stack Overflow – Обсуждение на Stack Overflow рассматривает методы установки значений по умолчанию для HTML элементов, включая радиокнопки.
4. Просто мгновение... — Это руководство по HTML радиокнопкам поможет углубить ваши знания в этом вопросе.