HTML input tags – Radio buttons HTML input tags – Radio buttons

In the previous tutorial you learnt about the checkbox control in HTML. You need to set the type attribute of the input tag to checkbox in order to display a checkbox in the browser. In this tutorial you will learn about radio button control which is very similar to a checkbox but with one difference – you can only select one option out of a group as compared to a checkbox where you can select more than one options out of a group.

Suppose that you want a user to select his favorite color from a list of colors with the condition that only one color can be selected. If you provide the user with checkboxes, then the user can select more than one options. This is where radio button control comes handy. It forces the user to select only one options out of a list of options.

Like checkbox control you must make sure that you give the same name to all the related radio buttons so that the browserknows which radio buttons belong to the same group. Look at the HTML mark-up below

<html>      
    <head>      
    </head>      

    <body>          
        <form action="http://abc.com/index.html" method="GET">                
            Select your favorite color              
            <br>              
            <input type="radio" name="color" value="1" /> Red              
            <br>              
            <input type="radio" name="color" value="2" /> Yellow              
            <br>              
            <input type="radio" name="color" value="3" /> Blue              
            <br>                            
            Select your favorite game              
            <br>              
            <input type="radio" name="game" value="1" /> Hockey              
            <br>              
            <input type="radio" name="game" value="2" /> Badminton              
            <br>              
            <input type="radio" name="game" value="3" /> Football              
            <br>              
            <input type="submit" value="Submit my choice" />          
        </form>      
    </body>  
</html>

 

Here we have asked use two questions – select favourite color and favourite game. For this we have created the first set of radio buttons with the name color and second set with the name game. This will help the user select one option out of the first group and select one option out of the second group. Also notice that the type of the input tag is set to radio in the HTML we have written above.

This is how the browser display the output of the above mark-up

Image 

In the next tutorials you will learn about dropdown list and list box controls in HTML which play the same role as checkbox and radio buttons but are different in their visual representation.

आपने पिछले tutorial में checkbox control क्या है वो सीखा | जब भी आप browser में checkbox दिखाना चाहते हैं तो आपको input tag के type attribute में checkbox लिखना होता है | अब इस tutorial में आप सीखेंगे radio button control के बारे में जो की checkbox control की तरह ही है लेकिन दोनों में एक फर्क है और वो ये है की checkbox में आपको एक पूरी list दी गयी होती है जिसमे से आपको एक से ज्यादा options को select करना होता है पर radio button control में आपको group में options दी होती हैं जिसमे से आप सिर्फ एक ही को select कर सकते हैं |

अब मान लीजिये अगर आप चाहते हैं की user दी गयी लिस्ट में से सिर्फ एक color को ही select करे तो अगर user के पास checkbox हुए तो वो एक से ज्यादा option select कर लेगा इसलिए ऐसी जगह पर radio buttons का इस्तेमाल किया जाता है जिस से की user सिर्फ एक option को ही select कर पायेगा |
आपको इस बात को याद रखना है की checkbox control की ही तरह आप radio buttons में भी name एक ही रखे जिस से की browser को ये समझने में मुश्किल न हो की ये सारे radio buttons एक group के ही है | निचे दिए html mark-up को देखिये  

<html>      <head>      </head>      <body>          <form action="http://abc.com/index.html" method="GET">                Select your favorite color              <br>              <input type="radio" name="color" value="1" /> Red              <br>              <input type="radio" name="color" value="2" /> Yellow              <br>              <input type="radio" name="color" value="3" /> Blue              <br>                            Select your favorite game              <br>              <input type="radio" name="game" value="1" /> Hockey              <br>              <input type="radio" name="game" value="2" /> Badminton              <br>              <input type="radio" name="game" value="3" /> Football              <br>              <input type="submit" value="Submit my choice" />          </form>      </body>  </html>

 

आप देख सकते हैं की यहाँ user से 2 सवाल पूछे गये हैं एक उसको अपनी पसंद का color चुन न है और दूसरा अपनी पसंद की game को चुन न है इसीलिए हमने 2 radio buttons के set बनाये हैं एक को name color दिया है और दुसरे को name game दिया है ताकि user को ये बात आसानी से समझ आ सके की उसको एक option पहले group में से select करना है और एक option दूसरे group में से select करना है | इसके साथ ही type attribute में भी radio लिखा गया है |
 
ऊपर दिए गये html mark-up को browser में ऐसे दिखाया जायेगा

Image 

आने वाले अगले tutorial में आप dropdown list और list box control के बारे में सीखेंगे जिनका काम बिलकुल checkbox और radio buttons जैसा ही है लेकिन वो देखने में उन दोनों से अलग है |

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp