एचटीएमएल <डेटालिस्ट> टैग

<घंटा/>

<डेटालिस्ट> टैग का उपयोग <इनपुट> टैग के लिए पूर्व-निर्धारित विकल्पों को सेट करने के लिए किया जाता है। जब भी कोई उपयोगकर्ता माउस कर्सर को <इनपुट> में रखता है, तो ये सभी पूर्व-निर्धारित विकल्प दिखाई देने चाहिए।

आइए अब HTML में टैग को लागू करने के लिए एक उदाहरण देखें -

उदाहरण

<!DOCTYPE html>
<html>
<body>
<p>Favorite Subject</p>
<form action="" method="get">
   <input list="subject" name="subject">
   <datalist id="subject">
      <option value="Programming">
      <option value="Networking">
      <option value="Database">
      <option value="Big Data">
      <option value="Cloud">
      <option value="Framework">
   </datalist>
   <input type="submit">
</form>
</body>
</html>

आउटपुट

एचटीएमएल डेटालिस्ट टैग

अब, माउस कर्सर को इनपुट बॉक्स के अंदर रखें। निम्नलिखित पूर्व-निर्धारित विकल्प अब दिखाई देंगे -

एचटीएमएल डेटालिस्ट टैग

उपरोक्त उदाहरण में, हमने <इनपुट> −

. के लिए पूर्व-निर्धारित विकल्प निर्धारित किए हैं

<datalist id="subject">
   <option value="Programming">
   <option value="Networking">
   <option value="Database">
   <option value="Big Data">
   <option value="Cloud">
   <option value="Framework">
</datalist>

अब, उपरोक्त <इनपुट> के अंदर कर्सर रखने पर, निम्नलिखित विकल्प दिखाई देंगे, जिन्हें हमने <डेटालिस्ट> तत्व का उपयोग करके पूर्व-परिभाषित किया है -

Programming
Networking
Database
Big Data
Cloud
Framework