Select tag and option tag | Option list | सेलेक्ट आप्शन | Hindi

HTML select tag और option tag का उपयोग बहुत सारे options (item list) देने के लिए किया जाता हैं। साधारण Hindi भाषा में समझते हैं जैसे हम किसी वेबसाइट पर रजिस्ट्रेशन करते हैं तो वहां पर एक field होता हैं जिस पर क्लिक करने से पूरी लिस्ट options (item list) खुल जाती हैं। जिनमे से कोई भी option को select कर सकते हैं जैसे – हमारे पास बहुत सारी language हैं ओर उमे से हमें user की language को choose करना हैं तो हम सभी लैंग्वेज को option (item list) बना कर लिख देते हैं जिसमे से यूजर अपनी अपनी language choose कर सकते हैं ।

अक अन्य उदाहरण से समझ सकते हैं जिसमे सभी city को आप्शन (option , item list) बना देते हैं और यूजर उन city में से अपनी city choose कर सकते हैं वहां पर हम HTML सेलेक्ट आप्शन ( select tag and otipn tag ) का उपयोग करते हैं ।

Select tag and Option tag | HTML in Hindi

सेलेक्ट option list बहुत सारे आप्शन की एक लिस्ट होती हैं जिसमे किसी भी आप्शन choose किया जा सकता हैं ।आइटम की पूरी लिस्ट को HTML select tag और HTML item tag के द्वारा बनाया जाया हैं।

चलिए उदाहरण से समझते हैं की HTML पेज पर select option list को कैसे बनाते हैं –

सेलेक्ट आप्शन को हम सिलेक्शन बॉक्स (HTML selection box) के नाम से भी जानते हैं या सेलेक्ट लिस्ट ( Select list item) के नाम से भी जाना जाता हैं ।

HTML सेलेक्ट टैग और ऑप्शन टैग का उदाहरण | Example of select tag and option tag

आप्शन को सेलेक्ट करने के लिए हम कुछ इस प्रकार सेलेक्ट आप्शन का उपयोग करते हैं ।

<!DOCTYPE html>
<html>
<head>
<title> HTML select tag and option tag | Select Language   </title>
</head>
<body>



</body>
</html>

Output

उपर दिए गए उदाहरण में हमने सेलेक्ट tag और option tag का उपयोग किया हैं ।Select tag के साथ attribute name की वैल्यू भी डिफाइन की हैं । यहाँ पर हमने कुछ लैंग्वेज (language) के आप्शन (option) भी बनाये हैं ।

Option tag का उपयग करके ओर value को डिफाइन किया गया हैं जिसके द्वारा value का उपयोग किया जा सकता हैं ।

यहाँ पर option tag और select tag को क्लोज भी करना होता हैं । Option tag के attribute value के द्वारा option की वैल्यू को सेट भी किया जाता हैं इस वैल्यू को डेटाबेस (database) में save या अन्य तरिके से उपयोग भी किया जा सकता हैं।

इस तरह से हम सेलेक्टआप्शन list (select option list) बना बॉक्स बना सकते हैं जिसे हम आप्शन लिस्ट ( Option list , Item list ) के नाम से भी जानते है।

इसी तरह से एक अन्य उदाहरण से समझते हैं जिसमे हम city के नाम आप्शन लिस्ट में देंगे ।

<!DOCTYPE html>
<html>
<head>
<title> List of city   </title>
</head>
<body>

<select name="city" required>




</select>

</body>
</html>

Output

उपर दिए गए उदाहरण में आप देख सकते हैं की हमने city की एक लिस्ट बनाई है जिसमे से यूजर अपनी city को आसानी से choose कर सकते हैं । Select tag साथ हमने require भी दिया हैं जो की एक वेलिडेशन का काम करता हैं जिसका मतलब यह होता हैं की यूजर को city सेलेक्ट करनी जरूरी हैं ।

यदि आप नही चाहते की यूजर बिना city सेलेक्ट किये फॉर्म submit करदे तो आपको required attribute का उपयग करना चाहिए जिस से यूजर को city सेलेक्ट करना या कह सकते हैं कोई एक आप्शन सेलेक्ट करना ही पड़ता हैं ।

HTML option tag disabled attribute-

यदि आपको किसी आप्शन को disabled करना हैं जिसका मतलब हैं वो आप्शन सेलेक्ट न किया जा सके तो आप आप्शन टैग में disabled देकर आप्शन को अक्षम (disabled) कर सकते हैं जिस से उस पैर क्लिक नही किया जा सकता न ही उस वैल्यू को select किया जा सकता हैं ।

चलिए उदाहरण से समझते हैं की सेलेक्ट आप्शन में disabled को किस तरह से उपयोग करते हैं जिस से option डिसएबल (disable) हो जाता हैं परन्तु दिखाई देता हैं ।

<!DOCTYPE html>
<html>
<head>
<title> disabled attribute of option tag </title>
</head>
<body>



</body>
</html>

Output

उपर दिए उदाहरण में हमने कुछ आप्शन लिए हैं जिसमे से एक आप्शन को हमने डिसएबल (disable) किया हैं जिस से उस पर कोई क्लिक नही जाता और न ही use सेलेक्ट किया जा सकता हैं कभी कभी यह रहता हैं की कुछ option को disable करना पड़ता हैं तब वहां पर हम disabled का उपयोग कर सकते हैं ।

इस तरह से HTML में सेलेक्ट आप्शन को बनाया जा सकता हैं ।

Please Share