लोड हो रहा है...
HTML Datalist
पहले select बंद सूची से चुनना था। datalist अलग काम है: सामान्य input में टाइप करें और ब्राउज़र सुझाव दे। सूची से लें या सूची से बाहर लिखें।
datalist क्यों है
खोज, रंग और शहर को आम जवाब चाहिए बिना दुर्लभ मना किए। select सूची के बाहर अस्वीकार करता है; खाली input संकेत नहीं देता। datalist मुक्त टाइपिंग के साथ सुझाव भरता है।
सीधा उत्तर
1) option value वाला datalist। 2) input पर list = id। 3) label और name इनपुट पर — datalist सबमिट नहीं करता। 4) सुझाव या कस्टम दोनों ठीक। 5) केवल सूची हो तो पिछले select का उपयोग करें।
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
ब्राउज़र सुझाव डेमो
Browser फ़ील्ड Firefox से Safari। Brave टाइप करना काम करता है — सूची रोकती नहीं।
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
ब्राउज़र डेमो पढ़ें
- सबमिट नियंत्रण input है, datalist नहीं
- list को id से मिलना चाहिए
- हर option value एक सुझाव
- name इनपुट मान की कुंजी
- label फ़ील्ड नाम देता है
- select से अलग: चार नामों तक सीमित नहीं
शहर सुझाव datalist से
दूसरा स्निपेट: शहर सुझाएँ, गाँव भी टाइप हो। पिछले बंद select से तुलना करें।
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
शहर डेमो पढ़ें
- वही label/name पैटर्न
- list/id संकेत जोड़ता है
- सबमिट = इनपुट पाठ
- autocomplete=off वैकल्पिक
- अगला: व्यापक accessibility
datalist बनाम select बनाम input
- केवल निश्चित सेट: select
- संकेत + मुक्त पाठ: input + list + datalist
- बिना सुझाव: सादा input
- datalist label/name नहीं बदलता
- datalist को input में नेस्ट न करें; id से जोड़ें
अभ्यास — सुझाव जोड़ें
- पाँचवाँ option Opera
- id जानबूझकर तोड़ें फिर ठीक करें
- कस्टम नाम टाइप करें
- शहरों में Mashhad जोड़ें
- वही शहर select में; एक वाक्य अंतर
- वाक्य: datalist सुझाता है; select सीमित करता है
- अगले accessibility पाठ में नामकरण
आसान गलतियाँ
- list और id मेल न खाना
- मुक्त टाइप अस्वीकार की उम्मीद
- label भूलना
- input पर name भूलना
- datalist पर name
- बिना value खाली option
- मुक्त फ़ील्ड पर केवल-select सोच
सार
- datalist + option value = इनपुट सुझाव
- list और id जोड़ें
- सूची से बाहर टाइप ठीक
- label और name इनपुट पर
- बंद चयन के लिए select
- अगला: accessibility
🧠 अपने ज्ञान की परीक्षा करें
शुरू करने के लिए तैयार
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
5
प्रश्न
70%
पास करने के लिए
∞
समय
∞
प्रयास
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी