HTML Radio Button – How to insert Radio Button in HTML

0
207

This is the 3rd part of HTML input series. In this tutorial you will learn about check box and radio button in HTML. If you didn’t read the previous tutorials then please go back to HTML Inputs Part One and HTML Inputs Part Two read them before moving to the next.

Why Radio Button ?

Suppose someone is signing up for your website and you want to ask the user’s gender. In this situation you will use the radio buttons to select male or female from the given options.

HTML Radio Button

An HTML radio button allows the user to select one choice from the given options. There are some attribute that you have to remember before working on radio buttons in HTML.

Syntax of HTML Radio Button

<input type=”radio”>

 

Code

Simple Radio Buttons in HTML

Output

Simple Radio Buttons in HTML output

Name Attribute in Radio Button

Name attribute allow you to name your radio button. To allow users to choose only one option from the selected box you have to name both radio buttons with same text. Name should be meaningful for radio buttons. See Example below.

 

Code

Name attribute in radio button

Output

Name attribute in radio button output

In above output user can only select one option from the given two options.

Value Attribute in Radio Button

Value attribute is used to get the value of the selected button. Suppose user selected “female” from the options so how we will know that the user selected male or female from the options ?. To get the value of the selected option to store in the database we use value attribute in every radio button in HTML. Value attribute will not affect the output in the browser.

Checked Attribute in Radio Button

Checked attribute allows you to set the default value in the given options. If you think that the most of the users coming to you website are male so you can make the male radio button checked by default so that users don’t even have to select the option. You can add only “checked” word in radio button tag but as every attribute has a value so writing checked=”true” make sense. Both do the same job.

Code

Checked Attribute in Radio Button

Output

Name attribute in radio button output

LEAVE A REPLY

Please enter your comment!
Please enter your name here