In this tutorial we will show you the solution of how to use radio button in HTML, in html there is a button in html which is round in shape and they are multiples in number but you can select one button at once.
This is known as radio button. For example, in login form you have to select your gender and if you click on male it gets selected but when you click on female, the female gets selected and male automatically unselected.
This is working to radio button. To use this there are some assumptions that are given below.
Step By Step Guide On How To Use Radio Button In HTML :-
As, we know the radio button is mostly used in forms or form tag in html. But you want to use it alone, no worry it can also be done.
Now, to use this and to make one button select at one time. The value of the name attribute must be same to all radio tags.
We hope that it gets complicated and we will help you to understand the working of radio with the help of example given below.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
Please select your gender here :
<input type="radio" name="gender" id="male">male
<input type="radio" name="gender" id="female">female
<br><br>
Here You have to select the age range in which you lie :
<form action="">
<input type="radio" name="age" id="one"> 01-20
<input type="radio" name="age" id="two"> 20-40
<input type="radio" name="age" id="three"> 40-60
<input type="radio" name="age" id="four"> 60-80
<input type="radio" name="age" id="five"> 80 or more
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, first we specify some text for radio button that what is radio button is about.
- And after that there are two input tags in which we use type radio after this you find that the value of the name attribute is same for all values. This is because to make radio buttons to select once at one time.
- After this there is an example of age range, in this we again use same everything as above example. Also, in all input radio’s the value of name attribute is same to select one option at one time.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, radio buttons are very interesting thing in html. You are able to make what you want in which you allow the user to select one option at one time.
I hope this tutorial on how to use radio button in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
