All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Radio Button In HTML Form

Last Updated : Mar 11, 2024

Radio Button In HTML Form

In this tutorial we will show you the solution of radio button in HTML form, in html, we all know that there is a form tag in html and in form tag there are many tags that are used under this tag. And one from them is input tag, an input tag also has many varieties in itself.

Varieties means like an input tag can be used for many purposes and ways as you say. And from those varieties today’s our topic is about radio buttons.

Today, here we will show you that what is a radio tag, how they are used and what’s the purpose behind there usage.

Step By Step Guide On Radio Button In HTML Form :-

As, radio buttons are used in forms. So, the basic thing that the radio button is used to get feedback or information from the user.

By looks a radio button is round in shape, and when user clicked or puts information in this, it becomes filled from inside with a disc or circle.

Also, you are able to click on one radio button at one time. Because it is used where we have to make decisions or choices. The next example will clear you that it works and used in html code.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
	  </head>
	  <body>
    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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, here we will show you an example in which we use form tag. You are able to make form tags as much as you want.
  5. After this we make input tags with type radio to show them radio buttons on browser. The value must be same on all the input tags, so that at one time only one radio button gets clicked.
  6. You are also able to customize the radio buttons with your own choice, this topic is also explained in our next session.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that you are able to make radio buttons in html. There are also topics on radio buttons like, how to make them checked by default and how to customize them according to editor’s choice.

We also cover these topics in or next session. We hope that you will understand the codes properly. I hope this tutorial on radio button in HTML form helps you.

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪