Radio input - выбор кнопки

Когда речь заходит о radio input (радио-кнопке) в контексте веб-разработки, обычно мы имеем дело с элементами управления формой, позволяющими пользователю выбрать одно из нескольких предопределенных значений. Radio input позволяет пользователям выбирать только один вариант из списка. Это особенно полезно, когда нужно получить от пользователя конкретный выбор, например, чтобы узнать его пол, интересы или предпочтения.

Для создания radio input необходимо использовать элемент <input>, указав атрибут type="radio". У каждого radio input на странице должен быть уникальный id и у него должно быть общее имя name, чтобы браузер знал, какие кнопки относятся к одной группе. Группа кнопок задается одинаковым значением атрибута name.

Пример кода для создания радио-кнопок:

    <form>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Мужской</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Женский</label><br>
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">Другой</label><br>
    </form>
  

В данном примере мы создаем группу радио-кнопок для выбора пола. У каждой кнопки есть уникальный id, общее имя name="gender" и значения value, которые будут передаваться на сервер при отправке формы.

Чтобы узнать, какая радио-кнопка выбрана пользователем, можно использовать JavaScript. Для этого мы можем использовать метод querySelector или querySelectorAll для выбора элемента или элементов и добавить обработчик событий addEventListener.

    const radioButtons = document.querySelectorAll('input[name="gender"]');
    let selectedGender;

    radioButtons.forEach(radioButton => {
      radioButton.addEventListener('change', () => {
        selectedGender = radioButton.value;
        console.log(selectedGender);
      });
    });
  

В данном примере мы выбираем все радио-кнопки с атрибутом name="gender". Затем мы добавляем обработчик события change каждой кнопке. Когда пользователь выбирает какую-либо кнопку, выбранное значение сохраняется в переменной selectedGender.

Таким образом, radio input - это мощный инструмент для создания опросных форм и сбора пользовательских данных. С помощью HTML и JavaScript можно создавать интерактивные и динамические формы с радио-кнопками, что делает их удобными и интуитивно понятными для пользователей.

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