फ़ॉर्म भरना कभी-कभी एक मुश्किल काम लगता है. उपयोगकर्ताओं को कई विकल्प देने के साथ-साथ, उन्हें खुलकर टाइप करने की सुविधा भी देना बहुत ज़रूरी है. datalist
एलिमेंट (यह हाल ही में Chrome कैनरी (M20) पर आया है और इससे काम आसान हो गया है.
datalist
का इस्तेमाल करके, आपका ऐप्लिकेशन उन नतीजों की सूची तय कर सकता है जिन्हें लोगों को चुनना चाहिए. वह सूची से कोई विकल्प चुन सकता है या फ़्रीफ़ॉर्म टेक्स्ट डाल सकता है.
विकल्पों को datalist
के साथ जोड़ने के लिए, input
एलिमेंट के list
एट्रिब्यूट में id
की जानकारी देनी होती है:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist
, वर्शन 10 के बाद वाले नए Firefox, Opera, और Internet Explorer पर बड़े पैमाने पर उपलब्ध है. इसलिए, आपको इस बारे में ज़्यादा चिंता करने की ज़रूरत नहीं है कि यह सभी ब्राउज़र पर काम करता है या नहीं, लेकिन अगर आपको यह पक्का करना है कि यह सभी ब्राउज़र पर काम करे, तो इन्हें आज़माएं:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
अगर आपके ब्राउज़र पर datalist
उपलब्ध है, तो option
एलिमेंट को छोड़कर, datalist
में सब कुछ छिपा रहेगा. अगर इस फ़ॉलबैक तरीके का इस्तेमाल किया जाता है, तो पक्का करें कि आपका सर्वर “fruit_sel” और “fruit”, दोनों को क्वेरी पैरामीटर के तौर पर कैच करता है.