टैग select
टैग select HTML फॉर्म में उपयोग के लिए
एक ड्रॉप-डाउन सूची बनाता है।
सूची का अलग-अलग आइटम
टैग option में संग्रहीत होना चाहिए।
विशेषताएँ
| विशेषता | विवरण |
|---|---|
multiple |
इस विशेषता की उपस्थिति एक मल्टी-सिलेक्ट बनाती है -
एक ड्रॉप-डाउन सूची जिसमें Ctrl दबाकर या
माउस से चुनकर कई आइटम चुने जा सकते हैं।
ऐच्छिक विशेषता। |
name |
ड्रॉप-डाउन सूची का नाम। PHP में इनपुट फ़ील्ड का डेटा प्राप्त करने के लिए आवश्यक है। फॉर्म के सही काम करने के लिए, इनपुट फ़ील्ड के नाम एक दूसरे के साथ मेल नहीं खाने चाहिए (एक ही फॉर्म में)। यदि वे मेल खाते हैं - तो PHP में उस इनपुट फ़ील्ड का डेटा आएगा जो HTML कोड में नीचे है। |
उदाहरण
आइए देखें कि ड्रॉप-डाउन सूची कैसे काम करती है:
html<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
उदाहरण
आइए ड्रॉप-डाउन सूची की चौड़ाई सबसे बड़े एलिमेंट की चौड़ाई के
बराबर करते हैं (यदि यह सीएसएस प्रॉपर्टी width
का उपयोग करके स्पष्ट रूप से निर्दिष्ट नहीं की गई है):
html<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
उदाहरण . डिफ़ॉल्ट चयन
और अब डिफ़ॉल्ट रूप से एक शहर चुनने का प्रयास करते हैं।
विशेषता selected का उपयोग करके इसे करते हैं:
html<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
उदाहरण . मल्टी-सिलेक्ट
आइए अब विशेषता multiple का उपयोग करके एक सामान्य सिलेक्ट को
मल्टी-सिलेक्ट में बदलते हैं:
html<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
ध्यान दें कि विशेषता name में दिए गए सिलेक्ट का नाम
अंत में वर्गाकार कोष्ठक के साथ होना चाहिए। यह इसलिए आवश्यक है ताकि PHP में
सभी चयनित मान आएँ (अन्यथा केवल एक - अंतिम मान आएगा)।
उदाहरण . मल्टी-सिलेक्ट में एक से अधिक डिफ़ॉल्ट मान
और अब, मल्टी-सिलेक्ट में डिफ़ॉल्ट रूप से, एक से अधिक मान चुनने का प्रयास करते हैं:
html<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
Результат: