フォームの記入は面倒に感じることがあります。ユーザーに複数の選択肢を提示しつつ、自由に入力できるようにすることが重要です。datalist
要素(Chrome Canary(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
は、最新の Firefox、Opera、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」の両方をクエリ パラメータとしてキャッチするようにしてください。