HTML-входное радио

Элемент HTML <input> с type="radio" используется для создания переключателей в форме.

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

В этом уроке мы изучим синтаксис и то, как использовать элемент ввода с типом радиокнопки , создавать группу, связывать радиокнопки с метками, стилизовать радиокнопки и т. д. с помощью подробных примеров.

1. Базовый синтаксис

Основной синтаксис для переключателя:

<input type="radio" name="group1" value="Option1"> Option 1

Здесь:

type="radio" : Указывает, что вход является переключателем.
name : Группирует переключатели. Одновременно можно выбрать только одну кнопку из группы.
value : определяет значение, отправляемое на сервер при выборе переключателя.

Пример: index.html

<!DOCTYPE html>
<html lang="en">
<body>

<form>
  <input type="radio" name="group1" value="Option1"> Option 1
  <input type="radio" name="group1" value="Option2"> Option 2
</form>

</body>
</html>

Видео

2 Создание группы радиокнопок

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

<form>
  <label>
    <input type="radio" name="gender" value="male"> Male
  </label>
  

  <label>
    <input type="radio" name="gender" value="female"> Female
  </label>
  

  <label>
    <input type="radio" name="gender" value="other"> Other
  </label>
</form>

В этом примере пользователь может выбрать только один вариант пола из группы.

Пример: index.html

<!DOCTYPE html>
<html lang="en">
<body>

<form>
  <label>
    <input type="radio" name="gender" value="male"> Male
  </label>
  

  <label>
    <input type="radio" name="gender" value="female"> Female
  </label>
  

  <label>
    <input type="radio" name="gender" value="other"> Other
  </label>
</form>

</body>
</html>

Видео

3. Предварительный выбор радиокнопки

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

<input type="radio" name="payment" value="credit-card" checked> Credit Card

В этом примере при загрузке страницы предварительно выбирается опция «Кредитная карта».

Пример: index.html

<!DOCTYPE html>
<html lang="en">
<body>

<form>
  <label>
    <input type="radio" name="payment" value="credit-card" checked> Credit Card
  </label>
</form>

</body>
</html>

Видео

4. Связывание меток с радиокнопками

Для повышения удобства использования и доступности свяжите <label> с каждой радиокнопкой:

<label for="visa">
  <input type="radio" id="visa" name="payment" value="visa"> Visa
</label>

Нажатие на метку переключит соответствующий переключатель, что сделает форму более удобной для пользователя.

5 стилей радиокнопок

Несмотря на то, что внешний вид радиокнопок по умолчанию определяется браузером, вы можете стилизовать их с помощью CSS:

<style>
  .custom-radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
  }

  .custom-radio input {
    opacity: 0;
    position: absolute;
  }

  .custom-radio input:checked + span {
    background-color: #4CAF50;
    border-color: #4CAF50;
  }

  .custom-radio span {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: white;
  }
</style>

<label class="custom-radio">
  <input type="radio" name="custom" value="option1">
  <span></span> Option 1
</label>

В этом примере переключатель по умолчанию скрывается и заменяется стилизованным пользовательским кругом, который меняет цвет при выборе.

6 Использование JavaScript с радиокнопками

JavaScript может динамически обрабатывать взаимодействие с переключателями. Например, определять, какая кнопка выбрана:

<form id="form">
  <label>
    <input type="radio" name="size" value="small"> Small
  </label>
  <label>
    <input type="radio" name="size" value="medium"> Medium
  </label>
  <label>
    <input type="radio" name="size" value="large"> Large
  </label>
  <button type="button" onclick="getSelectedRadio()">Submit</button>
</form>

<script>
  function getSelectedRadio() {
    const radios = document.getElementsByName('size');
    let selectedValue = '';
    for(const radio of radios) {
      if(radio.checked) {
        selectedValue = radio.value;
        break;
      }
    }
    alert(`Selected size: ${selectedValue}`);
  }
</script>

Этот скрипт проверяет, какой переключатель выбран, и отображает его значение в окне оповещения.

7. Вопросы доступности

Чтобы обеспечить доступность радиокнопок:

Используйте описательное <label> для каждой радиокнопки.
Сгруппируйте связанные радиокнопки логически и используйте fieldset и legend для контекста.
Обеспечьте достаточный контраст между выбранными и невыбранными штатами.

8 реальных вариантов использования

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

Заключение

HTML-элемент <input type="radio"> — это простой, но мощный инструмент для создания полей ввода с одним выбором. Комбинируя его с метками, JavaScript и CSS, вы можете создавать удобные и доступные группы переключателей для своих веб-приложений.