Input radio: выбор одного из нескольких вариантов

Input radio

Input radio is one of the types of web form elements that allow users to choose one of the offered options. This type of element is very useful for creating surveys, polls, questionnaires, and other interactive components on web pages.

Here is an example of code for creating input radio in HTML:

<form>
  <input type="radio" id="option1" name="choices" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="choices" value="option2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="choices" value="option3">
  <label for="option3">Option 3</label><br>
</form>

In the example above, we create a form with three radio buttons. Each button has a unique identifier (id) that corresponds to the "for" attribute in the associated label. The "name" attribute sets the name of the radio button group so that the browser can determine which options belong to the same set. The value of the radio button is specified with the "value" attribute.

When a user selects one of the options and submits the form, the selected radio button value will be sent to the server for processing or can be used in JavaScript to perform certain actions on the client-side.

Using JavaScript, additional processing and interaction with input radio elements can also be performed. Here is an example of JavaScript code that tracks the change of the selected option and outputs a message to the console:

let radioButtons = document.querySelectorAll('input[name="choices"]');
radioButtons.forEach(function(radioButton) {
  radioButton.addEventListener('change', function() {
    console.log("Selected option with value: " + this.value);
  });
});

Here, we use the `querySelectorAll` method to select all input radio elements with the attribute `name="choices"`. Then we add an event listener for the `change` event, which responds to the change of the selected option. When the change occurs, a message with the selected value is printed to the console.

Input radio provides the ability to create dynamic and interactive web pages. By knowing the basics of using and working with input radio, you can create various surveys and other forms for interactive user interaction. It is also important to remember about accessibility and using the correct semantics when creating web forms to meet the needs of all users.