कभी-कभी फ़ॉर्म भरना मुश्किल लगता है. उपयोगकर्ताओं को कई विकल्प देने के साथ-साथ, उन्हें स्वतंत्र रूप से टाइप करने की सुविधा देना ज़रूरी है. datalist एलिमेंट (यह हाल ही में Chrome Canary (M20) पर लॉन्च हुआ है) की मदद से, यह आसानी से किया जा सकता है.
datalist का इस्तेमाल करके, आपका ऐप्लिकेशन सुझाए गए नतीजों की सूची तय कर सकता है. उपयोगकर्ताओं को इन नतीजों में से कोई एक चुनना होगा. वे सूची में से कोई विकल्प चुन सकते हैं या फ़्री फ़ॉर्म टेक्स्ट डाल सकते हैं.
input एलिमेंट के list एट्रिब्यूट में id की वैल्यू डालकर, विकल्पों को datalist के साथ जोड़ा जा सकता है:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist, Firefox, Opera, और Internet Explorer के नए वर्शन पर उपलब्ध है. हालांकि, यह सुविधा Internet Explorer के 10 वर्शन के बाद के वर्शन पर ही उपलब्ध है. इसलिए, आपको इस बात की ज़्यादा चिंता नहीं करनी चाहिए कि यह सुविधा किन ब्राउज़र के साथ काम करती है. हालांकि, अगर आपको यह पक्का करना है कि यह सभी ब्राउज़र के साथ काम करे, तो यह तरीका आज़माएं:
<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”, दोनों को कैप्चर करे.