HTML <datalist> टैग क्या है?
<datalist> टैग HTML5 में पेश किया गया एक टैग है जो <input> एलिमेंट के लिए पूर्व-निर्धारित विकल्पों (pre-defined options) की सूची प्रदान करता है। जब उपयोगकर्ता इनपुट फ़ील्ड में कर्सर रखता है या टाइप करना शुरू करता है, तो ये विकल्प ड्रॉपडाउन के रूप में दिखाई देते हैं।
यह उपयोगकर्ता अनुभव को बेहतर बनाता है क्योंकि उपयोगकर्ता को पूरा टाइप नहीं करना पड़ता; वह सुझावों में से चुन सकता है।
वाक्यविन्यास (Syntax)
<input list="datalist_id"> <datalist id="datalist_id"> <option value="विकल्प1"> <option value="विकल्प2"> ... </datalist>
उदाहरण
नीचे एक फॉर्म है जिसमें "पसंदीदा विषय" के लिए एक इनपुट फ़ील्ड है और <datalist> के माध्यम से पूर्व-निर्धारित विकल्प दिए गए हैं:
<!DOCTYPE html>
<html>
<body>
<p>पसंदीदा विषय</p>
<form action="" method="get">
<input list="subject" name="subject">
<datalist id="subject">
<option value="प्रोग्रामिंग">
<option value="नेटवर्किंग">
<option value="डेटाबेस">
<option value="बिग डेटा">
<option value="क्लाउड">
<option value="फ्रेमवर्क">
</datalist>
<input type="submit">
</form>
</body>
</html>
आउटपुट
जब उपयोगकर्ता इनपुट बॉक्स में क्लिक करता है, तो पूर्व-निर्धारित विकल्प दिखाई देते हैं:
कर्सर रखने पर विकल्प:
स्पष्टीकरण
उदाहरण में <datalist> की id "subject" है और <input> का list एट्रिब्यूट भी "subject" है, जिससे दोनों जुड़ जाते हैं। प्रत्येक <option> एक संभावित मान दर्शाता है।
<datalist id="subject"> <option value="प्रोग्रामिंग"> <option value="नेटवर्किंग"> <option value="डेटाबेस"> <option value="बिग डेटा"> <option value="क्लाउड"> <option value="फ्रेमवर्क"> </datalist>
ब्राउज़र समर्थन
<datalist> सभी आधुनिक ब्राउज़रों (Chrome, Firefox, Edge, Safari, Opera) में समर्थित है। पुराने ब्राउज़र इसे नज़रअंदाज कर देते हैं और इनपुट सामान्य टेक्स्ट फ़ील्ड की तरह काम करता है।
