【HTML Living Standard】datalist要素の使い方
datalist要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
datalistオブジェクトは、ユーザーが<input>要素に入力する値の候補リストを提供するHTML要素を表すオブジェクトです。この要素は、ユーザーがフォームの入力フィールドに入力する際に、あらかじめ用意された選択肢のヒントを提示する目的で利用されます。
具体的な利用方法としては、<input>要素のlist属性に、関連付けたいdatalist要素のid属性値を指定することで、両者を関連付けます。datalist要素の内部には、<option>要素を複数配置し、それぞれの<option>要素のvalue属性に、ユーザーに提示したい具体的な候補値を記述します。
ユーザーが関連付けられた<input>フィールドに文字を入力すると、入力された文字と一致する候補がドロップダウンリストとして自動的に表示されます。これにより、ユーザーは提示された候補の中から選択することも、あるいはリストにない自由な値を入力することも可能となります。datalistは、ユーザーの入力作業を補助し、入力ミスを減らしつつ、柔軟な入力体験を提供することで、ユーザビリティとアクセシビリティの向上に貢献します。
公式リファレンス: <datalist>: The HTML Data List element
構文(syntax)
1<datalist id="example-list"> 2 <option value="Option 1"></option> 3 <option value="Option 2"></option> 4 <option value="Option 3"></option> 5</datalist> 6 7<input list="example-list">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません