Mastering Radio Buttons: Selecting Only One Option in a Group
Radio Button is an icon representing one of a set of options, only one of which can be selected at any time. To select multiple options at a time we use checkboxes.
So, to select only one option at a time in radio we have a trick here!!
Let us consider a sample HTML script to understand the trick!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h1>Did you understand the Explanation ?</h1>
<label>
<input type="radio" name="question">
Yes
</label>
<br>
<label>
<input type="radio" name="question">
No
</label>
<br>
<label>
<input type="radio" name="question">
Maybe Yes
</label>
<br>
<label>
<input type="radio" name="question">
Maybe No
</label>
<br>
<label>
<input type="radio" name="question">
Need more Explantion
</label>
</form>
</body>
</html>The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
Let’s shorten the HTML for better understanding.,
<form>
<label>
<input type="radio" name="question">
Yes
</label>
<br>
<label>
<input type="radio" name="question">
No
</label>
</form>To make the radio button to select only one option at a time, observe carefully that the name attributes should be same for all the options provided as a part of question.
So, the name attributes of both<input> radio isname=“question” this makes us possible to select only one option at a time.
For more articles like this, please check the FullStack Development Series in Madhu Sri Sushmitha Chowdary — Medium
Thank you 🙂
