Radio Button in HTML is a type of input form that allows a user to select one button from a group of button. When a user clicks on a radio button, it becomes checked, while all other button remains unchecked.
<input type> specifies the component type is radio button or not. If a programmer use type="radio" than it sets the control to a radio button.
<name> tells the group name of radio buttons. It is necessary that the name remains the same within a group so then one button is selected, all other buttons in the group remains unselected.
<value> specifies the output value of input element, which will be submitted if checked.
"label" for each radio button is written by the text next to the radio button. It is not the value attribute.
Use of a Radio Button in HTML:
The use of a radio button is to allow a user to make one selection from a given list.
Only one selection can be made at a time. Checkbox is used to make multiple selections and not Radio Button.
Important points to remember while using Radio Button:
- All Radio Buttons within a group must share the same name
- Value of the Radio Buttons within a group must be different
- Radio Button are not used for multiple selections
Code for creating Radio Button in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Radio button in html</title>
</head>
<h1>Radio Button</h1>
<body>
<form action="">
<input type="radio" name="Button" value="Water"> Water<br>
<input type="radio" name="Button" value="Beer"> Beer<br>
<input type="radio" name="Button" value="Wine" > Wine<br>
</form>
</body>
</html>