datalistの概要
| 入力候補を提供する HTMLタグ | ||
|
<datalist> <option>…</datalist> 概要 datalistタグは、入力欄（inputタグ）に対して、候補リストを提供するためのタグです。 |
||
|
datalistタグの主な属性
| 属性 | 説明 | 使用例 |
|---|---|---|
id |
inputタグのlist属性と紐づけるための識別子 |
<datalist id="choices"></datalist> |
datalistタグの基本的な使い方
以下の例では、ユーザーが入力すると「Apple」「Banana」「Cherry」の選択肢が表示されます。
<label for="fruit">フルーツを選択してください:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>実行例：
datalistタグの応用：数値入力に候補を設定
以下の例では、数値入力欄に対して候補を設定しています。
<label for="quantity">数量を選択:</label>
<input type="number" list="quantities" id="quantity" name="quantity">
<datalist id="quantities">
<option value="10">
<option value="20">
<option value="30">
</datalist>実行例：
注意事項
- datalistタグは、直接ユーザーに表示されるわけではなく、inputタグの入力補助として機能する。
- 自由入力も可能であり、リストからの選択を必須にすることはできない。
- すべてのブラウザが完全にサポートしているわけではなく、一部の古いブラウザでは動作しない可能性がある。
- モバイル環境ではdatalistの動作が異なる場合があるため、事前に確認が必要。
よくある質問
- Q: datalistとselectの違いは何ですか？
- A: selectタグは選択肢からのみ選択可能ですが、datalistは選択肢を提示しつつ自由入力も可能です。
- Q: datalistタグの候補を動的に追加する方法はありますか？
- A: JavaScriptを使用して、option要素を動的に追加できます。
- Q: datalistタグはすべてのブラウザで動作しますか？
- A: ほとんどのモダンブラウザでは動作しますが、一部の古いブラウザではサポートされていない場合があります。
- Q: datalistの候補リストをカスタマイズすることは可能ですか？
- A: CSSではdatalistの見た目を直接変更することはできませんが、JavaScriptを使えばカスタムドロップダウンを作成できます。
まとめ
datalistタグは、inputタグの入力補助として候補リストを提供する。id属性をinputタグのlist属性と紐づけることで機能する。- ユーザーはリストから選択するだけでなく、自由入力も可能。
- 一部の古いブラウザではサポートされていないため、互換性に注意が必要。