datalist とは
- ここで説明する datalist とは次の語句からなるHTMLの要素です。
- data
- 読み: データ
意味: 事実、資料 - list
- 読み: リスト
意味: 一覧、目録
datalist 要素の概要
この要素は内包する option 要素の value 値を使って他の入力要素に入力候補を提供します。
この要素には、開始タグと終了タグが必要です。
<datalist> </datalist>
サンプルコードと実行結果
datalist 要素は input などの入力要素に list 属性を使って入力する候補の一覧を関連付けることができます。 これは select 要素を使う場合と同じで、datalist 要素に内包された option 要素の value 値が関連付けされます。
このサンプルコードで着目するポイントは、input 要素の list 属性の値と datalist 要素の id 属性の値が一致しているところです。 このlist属性の値と id 属性の値が一致していることで項目候補の参照ができるようになります。
なお、select 要素を利用するときのように option 要素の value 属性を省略しても内包コンテンツが value 値の代替として機能します。
サンプルコード: HTML
<body>
<form action="送信先URL">
<input list="val-list" type="text" name="val">
<datalist id="val-list">
<option value="val-A"></option>
<option value="val-B"></option>
<option value="val-C"></option>
</datalist>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
</body>