फ़ॉर्म भरना कभी-कभी एक मुश्किल काम लगता है. उपयोगकर्ताओं को कई विकल्प देने के साथ-साथ, उन्हें खुलकर टाइप करने की सुविधा भी देना बहुत ज़रूरी है. 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”, दोनों को क्वेरी पैरामीटर के तौर पर कैच करता है.