<datalist> 入力欄に候補となる選択肢を提供する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | <option> |
対応ブラウザ | caniuseで確認 |
<datalist>タグの説明
<datalist>
は、フォームの入力欄に入力候補となる選択肢を提供するために使用します。例えば、<input>
で作られたテキストエリアに、予め予想される内容の入力候補を指定しておくことができます。
入力候補となるデータは、<datalist>
の子要素に<option>
を記述することによって定義します。そして、<input>
のlist
属性と<datalist>
のid
属性の値を同じ文字列にすることで関連付けることができます。
<datalist>
の範囲内に記述された内容は、ユーザーが操作しない限りブラウザ上の見た目には表示されません。
<datalist>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられませんが、ユーザーが操作した場合にポップアップリストなどが表示されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<datalist>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<datalist>の使い方とサンプル
このタグを使ったマークアップのサンプルです。対応しているブラウザでは、入力項目にフォーカスした時に<datalist>
へ格納した<option>
の内容が表示されます。
HTML
<form>
<input type="search" name="q" autocomplete="on" list="keywords">
<datalist id="keywords">
<option value="キーワード候補 1">
<option value="キーワード候補 2">
<option value="キーワード候補 3">
</datalist>
<input type="submit" value="検索">
</form>
表示確認
<datalist>に関連するHTMLタグ
入力・送信フォームに関連する要素 | |
---|---|
<form> | フォームを作成する |
<fieldset> | フォームの入力項目をグループ化する |
<legend> | 入力項目のグループにキャプションを与える |
<input> | フォームを構成する部品を作成する |
<label> | 入力項目にキャプションを与えて関連付ける |
<textarea> | 複数行に渡るテキスト編集項目を作成する |
<button> | ボタンを設置する |
<select> | セレクトボックスを作成する |
<option> | セレクトボックスの選択肢を作成する |
<optgroup> | セレクトボックスの選択肢をグループ化する |
<datalist> | フォームの入力欄に入力候補となる選択肢を提供する |