html5 एचटीएमएल फॉर्म: चयन-विकल्प बनाम डेटालिस्ट-विकल्प




html-select html-form (7)

मैं सोच रहा था कि चयन-विकल्प और डेटालिस्ट-विकल्प के बीच मतभेद क्या हैं। क्या कोई ऐसी स्थिति है जिसमें एक या दूसरे का उपयोग करना बेहतर होगा? प्रत्येक का एक उदाहरण निम्नानुसार है:

विकल्प चुनें

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-विकल्प

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

यह चुनने के समान है, लेकिन डेटलिस्ट के पास ऑटो सुझाव जैसे अतिरिक्त कार्यक्षमताएं हैं। जब आप टाइप करते हैं तो आप सुझाव टाइप और देख सकते हैं।

उपयोगकर्ता उन वस्तुओं को भी लिखने में सक्षम होगा जो सूची में नहीं हैं।


मैंने देखा कि डातालिस्ट में कोई चयनित सुविधा नहीं है। यह केवल आपको पसंद देता है लेकिन इसमें डिफ़ॉल्ट विकल्प नहीं हो सकता है। आप या तो अगले पृष्ठ पर चयनित विकल्प नहीं दिखा सकते हैं।


इसके बारे में एक आवश्यकता और सुझाव के बीच अंतर के रूप में सोचें। select तत्व के लिए, उपयोगकर्ता को आपके द्वारा दिए गए विकल्पों में से एक का चयन करना आवश्यक है। datalist तत्व के लिए, यह सुझाव दिया जाता है कि उपयोगकर्ता आपके द्वारा दिए गए विकल्पों में से एक का चयन करता है, लेकिन वह वास्तव में इनपुट में जो कुछ भी चाहता है उसे दर्ज कर सकता है।

संपादित करें 1: तो आप जो भी उपयोग करते हैं वह आपकी आवश्यकताओं पर निर्भर करता है। यदि उपयोगकर्ता को आपके विकल्पों में से एक दर्ज करना होगा , तो select तत्व select उपयोग select । यदि उपयोग जो भी हो, datalist तत्व का उपयोग करें।

संपादित करें 2: एचटीएमएल लिविंग स्टैंडर्ड में इस tidbit को मिला: "प्रत्येक विकल्प तत्व जो datalist तत्व के वंशज है ... एक सुझाव का प्रतिनिधित्व करता है।"


विशेष रूप से अपने प्रश्न के एक हिस्से का जवाब देने के लिए "क्या कोई ऐसी स्थिति है जिसमें एक या दूसरे का उपयोग करना बेहतर होगा?", दोहराने वाले अनुभागों के साथ एक फॉर्म पर विचार करें। यदि दोहराने वाले अनुभाग में कई select टैग हैं, तो प्रत्येक पंक्ति के लिए प्रत्येक चयन के लिए option एस प्रस्तुत किया जाना चाहिए।

ऐसे मामले में, मैं input साथ datalist का उपयोग करने पर विचार करता हूं, क्योंकि उसी datalist का उपयोग किसी भी input एस के लिए किया जा सकता है। यह संभावित रूप से सर्वर पर प्रतिपादन समय की एक बड़ी मात्रा को बचा सकता है, और किसी भी पंक्तियों के लिए बहुत बेहतर पैमाने पर स्केल करेगा।


डातालिस्ट में स्वतः पूर्ण और सुझाव शामिल हैं, यह उपयोगकर्ता को उस मान को दर्ज करने की अनुमति भी दे सकता है जो सुझावों में परिभाषित नहीं है।

चयन केवल आपको पूर्व परिभाषित विकल्प देता है जिसे उपयोगकर्ता को चुनना है


एचटीएमएल 5 समर्थित ब्राउज़र में डेटा सूची एक नया HTML टैग है। यह विकल्पों की कुछ सूची के साथ एक टेक्स्ट बॉक्स के रूप में प्रस्तुत करता है। लिंग टेक्स्ट बॉक्स के उदाहरण के लिए यह आपको टेक्स्ट बॉक्स में 'एम' या 'एफ' टाइप करते समय पुरुष महिला के रूप में विकल्प देगा।

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

तकनीकी दृष्टि से वे पूरी तरह से अलग हैं। <datalist> अन्य तत्वों के लिए विकल्पों का सार तत्व है। आपके मामले में आपने इसे <input type="text" साथ उपयोग किया है लेकिन आप इसे श्रेणियों, रंगों, तिथियों आदि के साथ भी उपयोग कर सकते हैं http://demo.agektmr.com/datalist/

यदि टेक्स्ट इनपुट के साथ इसे स्वत: पूर्ण प्रकार के रूप में उपयोग किया जाता है, तो सवाल वास्तव में है: क्या यह एक मुक्त-फॉर्म टेक्स्ट इनपुट, या विकल्पों की पूर्व निर्धारित सूची का उपयोग करना बेहतर है? उस मामले में मुझे लगता है कि जवाब थोड़ा और स्पष्ट है।

यदि हम टेक्स्ट फ़ील्ड के विकल्पों की सूची के रूप में <datalist> के उपयोग पर ध्यान केंद्रित करते हैं तो यहां उस चयन बॉक्स के बीच कुछ विशिष्ट अंतर हैं:

  • एक <datalist> फेड टेक्स्ट बॉक्स में डिस्प्ले लेबल और सबमिट दोनों के लिए एक स्ट्रिंग है। एक चयन बॉक्स में एक अलग सबमिट मूल्य बनाम प्रदर्शन लेबल <option value='ie'>Internet Explorer</option>
  • एक <datalist> खिलाया गया टेक्स्ट बॉक्स प्रदर्शन को व्यवस्थित करने के लिए विकल्प समूहों का समर्थन नहीं करता है।
  • आप <datalist> में विकल्पों की सूची में किसी उपयोगकर्ता को प्रतिबंधित नहीं कर सकते जैसे कि आप <select> साथ कर सकते हैं।
  • विनिमय कार्यक्रम अलग-अलग काम करता है। <select> Select <select> तत्व पर, परिवर्तन ईवेंट तुरंत परिवर्तन पर निकाल दिया जाता है, जबकि <input type="text" के साथ तत्व फोकस खो देता है या उपयोगकर्ता दबाता है के बाद ईवेंट निकाल दिया जाता है।
  • <datalist> ब्राउज़र में वास्तव में स्पॉटी समर्थन है। सभी उपलब्ध विकल्पों को दिखाने का तरीका असंगत है, और चीजें केवल वहां से भी बदतर होती हैं।

आखिरी बात मेरी राय में वास्तव में बड़ी है। चूंकि आपके पास अधिक सार्वभौमिक स्वतः पूर्ण फॉलबैक होगा, तो <datalist> को कॉन्फ़िगर करने की परेशानी से गुज़रने के लगभग कोई कारण नहीं है। इसके अलावा कोई भी सभ्य स्वत: पूर्ण प्लगिंग आपके विकल्पों के प्रदर्शन को शैलीबद्ध करने के तरीकों की अनुमति देगी, जो <datalist> नहीं करता है। यदि <datalist> स्वीकार किए गए <li> तत्व जिन्हें आप छेड़छाड़ कर सकते हैं, हालांकि आप चाहते हैं, यह वाकई बहुत अच्छा होगा! लेकिन नहीं।

जैसा कि मैं बता सकता हूं, इसके अलावा, <datalist> खोज स्ट्रिंग की शुरुआत से एक सटीक मिलान है। तो यदि आपके पास <option value="internet explorer"> और आपने 'एक्सप्लोरर' की खोज की तो आपको कोई परिणाम नहीं मिलेगा। अधिकांश स्वतः पूर्ण प्लगइन टेक्स्ट में कहीं भी खोज करेंगे।

मैंने कुछ आंतरिक पृष्ठों के लिए केवल <datalist> को त्वरित और आलसी सुविधा सहायक के रूप में उपयोग किया है, जहां मुझे 100% निश्चितता है कि उपयोगकर्ताओं के पास नवीनतम क्रोम या फ़ायरफ़ॉक्स है, और फर्जी मान सबमिट करने का प्रयास नहीं करेंगे। किसी भी अन्य मामले के लिए, बहुत खराब ब्राउज़र समर्थन के कारण <datalist> के उपयोग की अनुशंसा करना मुश्किल है।





html-datalist