HTML input tags – Checkbox HTML input tags – Checkbox

The text input tag you learnt about in the previous tutorial is used for collecting inputs in the form of text from the user. In this tutorial you will learn about the checkbox input tag using which the user can select multiple options from a given list of options. For example, if you want to ask the user to select his or her favorite colors from a given list of colors then you will have to use the checkbox input tags.  

Look at the code below where we are asking the user to select the colors he or she likes

<html>      
    <head>      
    </head>      

    <body>          
        <form action="http://abc.com/index.html" method="GET">                
            Select the colors you like              
            <br>              
            <input type="checkbox" value="1" /> Red              
            <br>              
            <input type="checkbox" name=”color” value="2" /> Yellow              
            <br>              
            <input type="checkbox" name=”color” value="3" /> Blue              
            <br>              
            <input type="checkbox" name=”color” value="4" /> Green              
            <br>              
            <input type="checkbox" name=”color” value="5" /> Orange              
            <br>              
            <input type="submit" value="Submit my choice" />          
        </form>      
    </body>  
</html>


Notice that we have set the type attribute of the input tag to checkbox in order to tell the browser that we want to show a checkbox to the user. Also notice that we have given the same name to all the checkboxes to make sure that when the user selects colors of his/her choice we are able to get the selected values in the form of an array. You will understand this concept better when you will learn server side programing. We have given a unique integer value to each color which we are setting in the value attribute for the input tag. The values of the colors selected by the user will be sent to the server when the user submits the form. It’s your choice as to what you want to use as the value for any checkbox. Using numeric values is not compulsory.

This is how the browser displays the output for the above HTML mark-up

Image 

When the user selects a checkbox a tick appears in the box marking it as selected. Very similar to the checkbox control is the radio control which we will discuss in the next tutorial.

आपने पिछले tutorial में text input tag के बारे में सीखा जिसका इस्तेमाल तब किया जाता है जब आपको user से text की form में कोई जानकारी लेनी हो | अब इस tutorial में आप सीखेंगे checkbox input tag को जिसका इस्तेमाल वहां किया जाता है जब आपको दी हुई बहुत सारी options में से एक से ज्यादा option को select करना हो | जैसे की  – अगर आप अपने user को एक color की list दिखाना चाहते हैं जिसमे से उसको अपने पसंद के colors को select करना है तब आप वहां checkbox input tag का इस्तेमाल करते है |  

आप निचे दिए गये code को देखिये जिसमे user को दी गयी list में से उसके पसंद के color को चुन ने के लिए कहा गया है

<html>      <head>      </head>      <body>          <form action="http://abc.com/index.html" method="GET">                Select the colors you like              <br>              <input type="checkbox" value="1" /> Red              <br>              <input type="checkbox" name=”color” value="2" /> Yellow              <br>              <input type="checkbox" name=”color” value="3" /> Blue              <br>              <input type="checkbox" name=”color” value="4" /> Green              <br>              <input type="checkbox" name=”color” value="5" /> Orange              <br>              <input type="submit" value="Submit my choice" />          </form>      </body>  </html>

 

आप दिए गये code को देखिये उसमें input tag type में checkbox को लिखा गया है जिस से की browser को समझ आ सके की हम user को checkbox दिखाना चाहते हैं | इसके साथ साथ हमने सारे  checkboxes को एक ही name दिया है जिस से की user जिन भी colors को select करे हम सारी values को array की form में देखें | आपको ये सारी चीज़े और अच्छे से समझ आएँगी जब आप server side programming सीखेंगे | हमने हर color को एक अलग integer value दी है जिसको input tag के value attribute में लिखा गया है | user जो भी values को select करेगा उसको server के पास भेजा जायेगा जब form को submit किया जायेगा | ये आपकी मर्ज़ी है की आपको checkbox के लिए क्या value रखनी है, आप कोई numeric value ही रखे ये ज़रूरी नहीं है |

ऊपर दिया गया html code browser में कुछ ऐसे दिखाई देगा

Image 

user जब भी checkbox में दी गयी लिस्ट में से किसी को भी select करेगा तो वहां पर tick नज़र आने लगेगा | checkbox की तरह ही एक और input tag है और वो है radio control जिसको हम अगले tutorial में सीखेंगे |

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