परिचय
HTML list एट्रिब्यूट एक <datalist> एलिमेंट को संदर्भित करता है जिसमें <input> एलिमेंट के लिए पूर्व-परिभाषित विकल्प होते हैं। यह उपयोगकर्ता को सुझावों की एक सूची प्रदान करता है, लेकिन कस्टम इनपुट की भी अनुमति देता है (ड्रॉपडाउन के विपरीत)।
सिंटैक्स
<input list="text">
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
input {
display: block;
width: 60%;
margin: 1rem auto;
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
datalist {
font-family: Arial, sans-serif;
}
</style>
<body>
<h1>HTML list एट्रिब्यूट डेमो</h1>
<input list="subject" placeholder='अपना वैकल्पिक विषय चुनें'>
<datalist id='subject'>
<option>गणित</option>
<option>भौतिकी</option>
<option>अर्थशास्त्र</option>
</datalist>
</body>
</html>
आउटपुट
एक इनपुट फ़ील्ड दिखाई देगी। जब उपयोगकर्ता उस पर क्लिक करता है या टाइप करना शुरू करता है, तो डेटालिस्ट से सुझाव (गणित, भौतिकी, अर्थशास्त्र) ड्रॉपडाउन के रूप में दिखाई देंगे। उपयोगकर्ता सूची से चुन सकता है या अपना खुद का टेक्स्ट दर्ज कर सकता है।
महत्वपूर्ण बिंदु
listएट्रिब्यूट का मान<datalist>केidसे मेल खाना चाहिए<datalist>पेज पर कहीं भी रखा जा सकता है (आमतौर पर इनपुट के पास)<select>के विपरीत, उपयोगकर्ता कस्टम मान दर्ज कर सकता है<option>के अंदरvalueएट्रिब्यूट सबमिट किए जाने वाले मान को नियंत्रित करता है- यह एक "ऑटोकम्प्लीट" जैसा अनुभव प्रदान करता है
value एट्रिब्यूट के साथ उदाहरण
<input list="countries" placeholder="देश चुनें या टाइप करें"> <datalist id="countries"> <option value="IN">भारत</option> <option value="US">संयुक्त राज्य अमेरिका</option> <option value="UK">यूनाइटेड किंगडम</option> <option value="CA">कनाडा</option> </datalist>
ब्राउज़र समर्थन
सभी आधुनिक ब्राउज़रों में समर्थित (IE10+ के लिए आंशिक, Safari में पूर्ण समर्थन नए संस्करणों में)।
