Radio button HTML: примеры и код

Радиокнопки в HTML

Радиокнопки в HTML являются элементами управления, позволяющими пользователю сделать выбор из набора взаимоисключающих вариантов. Они используются для создания списков, выбора опции и других сценариев взаимодействия с пользователем. В HTML радиокнопки создаются с помощью элемента <input> и атрибута type со значением radio.

Пример кода радиокнопок в HTML:

<form>
  <label for="option1">Option 1</label>
  <input type="radio" id="option1" name="options" value="option1">

  <label for="option2">Option 2</label>
  <input type="radio" id="option2" name="options" value="option2">

  <label for="option3">Option 3</label>
  <input type="radio" id="option3" name="options" value="option3">
</form>

В приведенном выше примере у нас есть три радиокнопки с одинаковым именем "options", что означает, что пользователь может выбрать только одну из них. Каждая радиокнопка имеет уникальный идентификатор с помощью атрибута id и отображается с помощью элемента <label>, связанного с радиокнопкой через атрибут for.

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

<?php
if(isset($_POST['options'])){
  $selectedOption = $_POST['options'];
  // Дальнейшая обработка выбранной радиокнопки...
}
?>

А в JavaScript вы можете получить значение выбранной радиокнопки с использованием объектов Document и метода getElementsByName:

const options = document.getElementsByName('options');
let selectedOption;

for(let i = 0; i < options.length; i++){
  if(options[i].checked){
    selectedOption = options[i].value;
    // Дальнейшая обработка выбранной радиокнопки...
    break;
  }
}

В заключение, радиокнопки в HTML являются важными элементами управления, позволяющими пользователям выбирать один вариант из множества. Они создаются с помощью элемента <input> и атрибута type со значением radio и могут быть обрабатываются на сервере или в JavaScript. Примеры кода показаны выше, и вы можете адаптировать их под свои потребности.