HTML select tags – Drop down and list box HTML select tags – Drop down and list box

Very similar to the checkbox and radio button controls are the dropdown and list box controls in HTML. The role of dropdown and list box is to provide a list of options to the user and let him select from this list. The user can select a single option like with radio buttons and multiple options like with checkboxes. To create both the drop down and list box you will have to use the same tag. Both drop down as well as list box are created using the select tag in HTML. Look at the mark-up below

<select name="sometext">        
    <option>text1</option>        
    <option>text2</option>        
    <option>text3</option>        
    <option>text4</option>        
    <option>text5</option>  
</select>

Here we have used the select tag to create a drop down and provided the options from which the user can choose from using the <option> tag. The markup we have written above will only show one option at a time in the browser. If you want the user to see more than one options, then you can set the size attribute of the select tag to some integer value. Look at the mark-up below

<select name="sometext" size="3">        
    <option>text1</option>        
    <option>text2</option>        
    <option>text3</option>        
    <option>text4</option>        
    <option>text5</option>  
</select>

Here the user can see three option at one time and for other options he or she can scroll down the list. If you do not set the size attribute you will see a drop down, but if you set the size attribute you will see a list box in the browser.

Look at this complete HTML mark-up for the webpage with a dropdown and a listbox.

<html>      
    <head>      
    </head>      

    <body>          
        <form action="http://abc.com/index.html" method="GET">                
            Select your favorite color (You will see a dropdown)              
            <br>              
            <select name="sometext">                    
                <option>text1</option>                    
                <option>text2</option>                    
                <option>text3</option>                    
                <option>text4</option>                    
                <option>text5</option>              
            </select>              
            <br>                            
            Select your favorite game (You will see a listbox)              
            <br>                
            <select name="sometext" size="3">                    
                <option>text1</option>                    
                <option>text2</option>                    
                <option>text3</option>                    
                <option>text4</option>                    
                <option>text5</option>              
            </select>            
        </form>      
    </body>  
</html>

This is how the browser will display the above mark-up

Image 

In case of a drop down you just see one option and when you click on it you will see all other options from which you can select the one you want. In case of a list box you see more than one options at a time and you can scroll down to see other options in the list.

By default, you can select only one option from the drop down or list box. To select multiple options at a time you will have to set the multiple attribute value for the select tag. Look at the markup below.

<select name="sometext" size="3" multiple="multiple">        
    <option>text1</option>        
    <option>text2</option>        
    <option>text3</option>        
    <option>text4</option>        
    <option>text5</option>  
</select>

Here we have set the multiple attribute to be equal to multiple. This will enable the user to make multiple selection by pressing the control key from the keyboard and selecting multiple options.

dropdown और list box control दोनों checkbox और radio buttons की तरह ही काम करते हैं | dropdown और list box का काम user को options की lists देना है जिस में से उसको अपनी पसंद के हिसाब से select करना है | radio buttons की तरह user सिर्फ एक option को ही select कर सकता है और checkbox की तरह ज्यादा options  को भी select कर सकता है | आपको dropdown या list box बनाने के लिए same tag को इस्तेमाल करना पड़ता है और वो tag है select tag | आप निचे दिए गये mark-up को देखिये –

<select name="sometext">        <option>text1</option>        <option>text2</option>        <option>text3</option>        <option>text4</option>        <option>text5</option>  </select>

ऊपर हमने select tag का इस्तेमाल करके user के लिए  dropdown को बनाया है जिसमे options को <options> tag के अन्दर दिया गया है और वो जिस option को चाहे select कर सकता है | जो mark-up हमने ऊपर लिखा है उसके हिसाब से user को browser में एक वक़्त पर सिर्फ एक ही option नज़र आएगी | अगर आप चाहते हैं की user को एक वक़्त में एक से ज्यादा option नज़र आये तो आपको select tag के size attribute में कोई integer value को set करना होता है | इसको समझने के लिए निचे दिए गये mark-up को देखिये

<select name="sometext" size="3">        <option>text1</option>        <option>text2</option>        <option>text3</option>        <option>text4</option>        <option>text5</option>  </select>

ऊपर हमने select tag के साथ size attribute का इस्तेमाल किया है जिस से की अब browser में user को एक वक़त में 3 options नज़र आएँगी और अगर बाकी की options को check करना हो तो list को निचे करके यानी की scroll करके देखना होगा |  अगर आप select tag के साथ size attribute का इस्तेमाल नहीं करते हैं तो आपके पास dropdown list बनेगी जिसमे click करने पर आपको options नज़र आएँगी लेकिन अगर आप size attribute का इस्तेमाल करते हैं तो आपको browser में listbox नज़र आएगा |

आप dropdown और listbox दोनों के html mark-up को समझने के लिए निचे देखिये :-

<html>      <head>      </head>      <body>          <form action="http://abc.com/index.html" method="GET">                Select your favorite color (You will see a dropdown)              <br>              <select name="sometext">                    <option>text1</option>                    <option>text2</option>                    <option>text3</option>                    <option>text4</option>                    <option>text5</option>              </select>              <br>                            Select your favorite game (You will see a listbox)              <br>                <select name="sometext" size="3">                    <option>text1</option>                    <option>text2</option>                    <option>text3</option>                    <option>text4</option>                    <option>text5</option>              </select>            </form>      </body>  </html>



This is how the browser will display the above mark-up
 
Image

आप देख सकते हैं की dropdown में आपको सिर्फ एक option नज़र आ रही है और जब आप us पर click करेंगे तो आपको बाकी की सारी options नज़र आ जाएँगी फिर आपको जिसको भी select करना है आप कर सकते हैं | दूसरी तरफ आप listbox में भी देख सकते हैं की आपको एक से ज्यादा options नज़र आ रही हैं पर अगर आप list की बाकी की options को भी देखना चाहते हैं तो आप scroll करके देख सकते हैं |
आप dropdown और listbox में से सिर्फ select ही एक option को कर सकते हैं पर अगर आप एक वक़्त में एक से ज्यादा options को select करना चाहते हैं तो आपको select tag के attribute के साथ multiple को लिखना पड़ेगा |

<select name="sometext" size="3" multiple="multiple">        <option>text1</option>        <option>text2</option>        <option>text3</option>        <option>text4</option>        <option>text5</option>  </select>


आप ऊपर देख सकते हैं की attribute के साथ multiple लिखा गया है जिस से अप एक वक़्त पर एक से ज्यादा options को select कर पायेंगे इसके लिए आपको अपने keyboard से control key का इस्तेमाल भी करना होगा |

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