Select Element in HTML: Drop-Down Select Box User को एक Drop-Down Menu से किसी एक Item को Select करने की सुविधा प्रदान करता है। ये Control Web Page पर कम Space लेता है, इसलिए जब Web Page पर Space कम हो तब हम इस Control को उपयोग में लेते हैं।
Drop-Down Select Box हमें एक और प्रकार का Control उपलब्ध करवाता है, जिसमें सभी Options एक Single Line Text Box के List की तरह दिखाई देते हैं। इस Control में User उस Option को Select कर सकता है, जिसे वह Select करना चाहता है।
एक Drop-Down Select Box को <select> Element द्वारा Create किया जाता है, जिसमें दिखाई देने वाले सभी Options को <option> Element में लिखा जाता है। इस Control के प्रयोग करने के तरीके को हम निम्न Example Program द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.demo.com/flights.asp" name="frmFlightBooking" method="get"> <select name="selColor"> <option selected="selected" value="">Select color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </form> <body> <html>
जैसाकि हम इस उदाहरण में देख सकते हैं कि <option> Element के बीच लिखे गए Text Select Control के Option के रूप में दिखाई देते हैं, जबकि जो Value Web Server पर Send होनी होती है, उस Value को value Attribute के साथ लिखा जाता है। इस उदाहरण में हम देख सकते हैं कि पहले <option> Element में value Attribute में कोई मान Specify नहीं किया गया है, लेकिन फिर भी ये एक Text Display करता है, जो User को एक Option Select करने का Massage देता है।
एक बात ध्यान रखें कि Select Control की Width उसें लिखे जाने वाले Options के Text आधार पर तय होता है। Select Control की Width उसमें लिखे जाने वाले सबसे बडे Option के आधार पर तय होती है। चूंकि हमारे उदाहरण में सबसे बडा Option “Select color” है, इसलिए हमारे Select Control की Width भी इसी String के बराबर है।
The <select> Element
<select> Element एक Container Element है, जिसमें <option> Element Contained होता है। इस Element में हम निम्न Attributes का प्रयोग कर सकते हैं।
name Attribute
इस Attribute में <select> Element का वह नाम होता है, जिसे Coding में उपयोग में लिया जा सकता है।
size Attribute
इस Attribute का प्रयोग करके हम एक Scrollable Select Control Create कर सकते हैं। इस Attribute में हमें एक Numerical मान देना होता है, जो Select Control के एक साथ दिखाई देने वाले Options यानी Rows की संख्या को Specify करता है।
multiple Attribute
ये Attribute User को एक से ज्यादा Options को Select करने की सुविधा प्रदान करता है। यदि ये Attribute उपलब्ध ना हो, तो User एक समय में केवल एक ही Option को Select करने में सक्षम हो पाता हा। XHTML में हमें इस Attribute में मान के रूप में भी “multiple” Specify करना होता है। ध्यान रखें कि इस Attribute को उपयोग में लेने पर दिखाई देने वाले Select Control Box का Look Change हो जाता है।
The <option> Element
इस Element का प्रयोग <select> Element के अन्दर किया जाता है और किसी भी <select> Element के बीच कम से कम एक <option> Element जरूर होता है। इस Element के बीच हम जो भी Text लिखते हैं, वह Text हमें Select Control में दिखाई देने वाले Option के रूप में दिखाई देता है। इस Element के साथ हम निम्न Attribute का प्रयोग कर सकते हैं:
value Attribute
इस Attribute में हम जो मान लिखते हैं, Option को Select करने पर वह मान Web Server पर Send होता है।
selected Attribute
जब हम Web Page के Load होते समय किसी Option को Initially Selected रखना चाहते हैं, तब हम उस <option> Element में इस Attribute का प्रयोग करते हैं और उसमें Value के रूप में “selected” लिखते हैं। इस Attribute को उस स्थिति में कई <option> Element के साथ उपयोग में लिया जा सकता है, जबकि हमने <select> Element में multiple Attribute को उपयोग में लिया हो। क्योंकि इस Attribute को उपयोग में लेने पर हम एक से ज्यादा Options को Select कर सकते हैं।
label Attribute
इस Attribute का प्रयोग करके भी हम वही काम कर सकते हैं, जिसे हम <option> Element का प्रयोग करके करते हैं। इसका प्रयोग तब किया जाता है, जब <optgroup> Element का प्रयोग करते हैं:
Scrollable Select Boxes Creation
जब हम Scrollable Select Box Create करना चाहते हैं, तब हमें <select> Element में size Attribute को उपयोग में लेना जरूरी होता है। इस Attribute में हमें उन Rows की संख्या को Specify करना होता है, जितने Options को हम एक समय में Select Control में Visible रखना चाहते हैं। इस प्रकार के Select Box को Create करने के तरीके को हम अगले उदाहरण द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.demo.com/flights.asp" name="frmFlightBooking" method="get"> <select size="4" name="selDay"> <option value="Mon">Monday</option> <option value="Tue">Tuesday</option> <option value="Wed">Wednesday</option> <option value="Thu">Thursday</option> <option value="Fri">Friday</option> <option value="Sat">Saturday</option> <option value="Sun">Sunday</option> </select> </form> <body> <html>
यदि हम एक से ज्यादा Options को एक साथ Select करना चाहें, तो हमें multiple Attribute को उपयोग में लेना जरूरी होता है। जब हम इस Attribute को उपयोग में लेते हैं, तब हमारा Select Control Box Automatically एक Scrolling Select Box की तरह दिखाई देने लगता है। इस प्रक्रिया को हम अगले उदाहरण द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.demo.org/days.asp" method="get" name="frmDays"> Please select more than one day of the week:<br /> <select name="selDays" multiple="multiple"> <option value="Mon">Monday</option> <option value="Tue">Tuesday</option> <option value="Wed">Wednesday</option> <option value="Thu">Thursday</option> <option value="Fri">Friday</option> <option value="Sat">Saturday</option> <option value="Sun">Sunday</option> </select> <br /><br /><input type="submit" value="Submit"> </form> <body> <html>
इस Output में हम देख सकते हैं कि हमारे सामने एक Scrollable Select Box Display हो रहा है, जबकि हमने इस HTML Form में size Attribute का प्रयोग नहीं किया है। (Select Element in HTML)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
