HTML फॉर्म: चयन-विकल्प बनाम डतालिस्ट-ऑप्शन

136

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

विकल्प चुनें

<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>

— user928984
स्रोत

11

क्योंकि HTML5 विशेष रूप से कहता है कि अछूता

— james.garriss

1

किसी को भी पता है कि हम optionटैग को डेंटलिस्ट-ऑप्शन में बंद क्यों नहीं करते ? उदात्त चाहता है

— जॉनी मेट्ज़

1

@ जॉनी मेट्ज़ आप टैग को बंद कर सकते हैं, लेकिन यह स्वयं बंद हो सकता है आप कुछ इस तरह से भी कर सकते हैं: code <इनपुट सूची = "ब्राउज़र" नाम = "ब्राउज़र"> <डटलिस्ट आईडी = "ब्राउज़र"> <विकल्प मूल्य = "फ़ायरफ़ॉक्स" > फ़ायरफ़ॉक्स </ विकल्प> <विकल्प मूल्य = ""> IE </ विकल्प> <विकल्प मूल्य = "क्रोम"> क्रोम </ विकल्प> <विकल्प मूल्य = "ओपेरा"> ओपेरा </ विकल्प> <विकल्प मूल्य = " सफारी "> सफारी </ विकल्प> </ datalist> codeपरिणाम अजीब है। सूची में मूल्य को प्रिंट करता है। वह मान तब इनपुट फ़ील्ड का मान बन जाता है।

— सारा एम जाइल्स

3

@JohnnyMetz, HTML 5, XHTML के खिलाफ एक प्रतिक्रिया थी। कुछ तत्वों के लिए, जैसे option, एक समापन टैग या स्व-समापन होने की आवश्यकता नहीं है। HTML 5! = XHTML।

— james.garriss

2

युक्ति कहती है, "कुछ सामान्य तत्वों के आरंभ और अंत टैग को छोड़ा जा सकता है।" यह भी कहता है, "यदि विकल्प तत्व को किसी अन्य विकल्प तत्व के तुरंत बाद या ऑप्टग्रेप तत्व द्वारा तुरंत अनुसरण किया जाता है, या यदि मूल तत्व में कोई अधिक सामग्री नहीं है, तो एक विकल्प तत्व का अंतिम टैग छोड़ा जा सकता है।" w3.org/TR/html/syntax.html#optional-tags

— james.garriss

180

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

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

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

— james.garriss
स्रोत

इसके अलावा, इसमें अन्य ब्राउज़रों में ज्यादातर [आंशिक समर्थन] (( caniuse.com/#feat=datalist ), बग के साथ जैसे कि लंबे डकैत बेकाबू हो रहे हैं, आदि

— गोविंद राय

इस समय क्रोम में, यदि डेटा दर्ज किया गया है (टाइप किया गया है) यह तीर को क्लिक करने से रोकता है। यह ज्यादातर मामलों में आदर्श नहीं है।

— डेविड

66

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

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

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

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

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

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

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

— mastaBlasta
स्रोत

3

बहुत बढ़िया जवाब !! क्या आप कृपया अपनी दूसरी बुलेट की व्याख्या कर सकते हैं? "विकल्प समूहों को प्रदर्शन को व्यवस्थित करने के लिए" से आपका क्या मतलब है? धन्यवाद।

— गोविंद राय

afaik (2019 में, क्रोम और फ़ायरफ़ॉक्स पर), <datalist> infixes से मेल खाता है (न कि सिर्फ उपसर्ग)। इसलिए "टाइपिंग" फिर से "फ़ायरफ़ॉक्स" और "इंटरनेट एक्सप्लोरर" दोनों का सुझाव देता है।

— sam boosalis

@ गोविंदराय I "ऑप्टग्रुप तत्व" की सरसरी खोज इस पृष्ठ को हमेशा उपयोगी

— एमडीएन से

मैंने फ़ायरफ़ॉक्स 66 और क्रोम 73 के तहत परीक्षण किया है - वास्तव में, डैटलिस्ट लेबल कहीं भी मेल खाते हैं, इसलिए उदाहरण के लिए यदि आपके डेंटलिस्ट में देश के नाम हैं, तो "टेड" "यूनाइटेड स्टेट्स" और "यूनाइटेड किंगडम" से मेल खाएगा।

— भालोटोस Bटेक

5

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

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

— user3167654
स्रोत

2

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

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

— दीपक
स्रोत

5

यह सच है, लेकिन यह एक अच्छा, नई जानकारी देता है, अर्थात् पहला अक्षर टाइप करने पर सूची में संबंधित आइटम का चयन होगा।

— james.garriss

1

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

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

— ब्रूस पियर्सन
स्रोत

यदि आप उपयोगकर्ता विकल्पों को चुनने के लिए परेशान नहीं करने जा रहे हैं, तो एक डेडलिस्ट का उपयोग करके परेशान क्यों करें? इसके बजाय केवल एक टेक्स्ट फ़ील्ड का उपयोग करें।

— james.garriss

0

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

— वेइहुई गुओ
स्रोत

एक इनपुट प्लस डेंटलिस्ट के लिए समतुल्य इनपुट पर मूल्य = "(डिफ़ॉल्ट विकल्प)" सेट किया जाएगा। टाइप = "टेक्स्ट" के साथ इनपुट के लिए, यह पाठ डिफ़ॉल्ट रूप से दिखाई देगा लेकिन संपादन योग्य होगा।

— बेमिसवा

0

वहाँ के बीच एक और महत्वपूर्ण अंतर है selectऔर datalist। यहां ब्राउजर सपोर्ट फैक्टर आता है।

चयन को व्यापक रूप से ब्राउज़र द्वारा समर्थित किया जाता है। कृपया इस पृष्ठ पर एक नज़र डालिए

Datalist ब्राउज़र समर्थन

जहाँ चयन के रूप में प्रभावी रूप से सभी ब्राउज़रों में समर्थित है (IE6 +, फ़ायरफ़ॉक्स 2+, क्रोम 1+ आदि के बाद से)

— नौसिखिया
स्रोत

0

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

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

— वियान झिंगडे
स्रोत