HTML Radio Button Label allows the to user choose only one option in a predefined set of options. The choosing-only option makes it distinct from a CheckBox button. It gives an option to a visitor as a circular button, as by default design if the user clicks on it. then it will fill with another full circle.
In this tutorial, you will learn about What is HTML Radio Button Label and how to use it. How the Input tag has to use to get the Radio button, Radio button Group and get checked value, etc with examples.
Syntax
A same as checkbox used input tag with define a type. here just you have to mentioned a type=”radio”.
<input type="radio">HTML Radio Button Example
You have to use a <input> tag with the radio type attribute. She is an example of how to use a Radio Button in HTML. In the example, we are creating an option button for select and gender.
There are 3 button options and for connection, they use the name attribute, which is the main purpose of a Radio button to work get together and allow only one option. The name Attribute should be the same identical name in this example all button has only name=”gender”.
<!DOCTYPE html>
<html>
<body>
<h1>HTML Radio Button</h1>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</body>
</html>Output: In a GIF, you can see only one option can select.
Radio Button checked
You can give checked as the default option in the Radio group. Just write checked in the input tag. See below code line example HTML Radio Button checked by default.
<input type="radio" name="gender" value="male" checked=""> Male<br>HTML Radio Button Value
To get the value of the selected item you need to first give the value on the element. Use this code line.
document.getElementById("id").valueBelow is a complete example of how it will work, for that you need to write some JavaScript code.
<!DOCTYPE html>
<html>
<body>
<h1>HTML Radio Button</h1>
<input type="radio" name="gender" id="gender_Male" value="Male" > Male</input>
<input type="radio" name="gender" id="gender_Female" value="Female"> Female</input>
<button onclick="display()">Display Value</button>
<script>
function display(){
if(document.getElementById('gender_Male').checked) {
var x = document.getElementById("gender_Male").value;
alert("The value of the checkbox is: " + x);
}else if(document.getElementById('gender_Female').checked) {
var x = document.getElementById("gender_Female").value;
alert("The value of the checkbox is: " + x);
}else{
alert("Please select one option ");
}
}
</script>
</body>
</html>
Output: When option is not selected and select will show popup with getting value.
Radio Button Group
You can define an HTML Radio Group. Here is an example html radio button group example. Using <form> then <filedset> for grouping a Radio input elements.
<form>
<fieldset id="group1">
<input type="radio" value="value1" name="group1">
<input type="radio" value="value2" name="group1">
</fieldset>
<fieldset id="group2">
<input type="radio" value="value1" name="group2">
<input type="radio" value="value2" name="group2">
<input type="radio" value="value3" name="group2">
</fieldset>
</form>Q: How to HTML Radio Button list horizontal?
Answer: You can write the Radio Button list horizontal by using an element one by one without using the <br> tag. To get The vertical html radio button list just use a <br> tag.
Q: How to html radio button label the same line?
Answer: There is 2 ways to do it either write a content in <label> tag or in <input> tag.
See the below code of line Radio button label in same line.
Male
Output:
Q: How to know HTML Radio Button checked?
Answer: Use this syntax, which Return the checked property in Boolean.
radioButtonObject.checked
It will returns true if the radio button is checked, and false if the radio button is not checked.
If you have any doubt and suggestions regarding this tutorial, then do comment in below. Mainly html radio button is used with form in
Note: The All HTML Radio Button Label Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version