ウェブランサー

<datalist> 入力欄に候補となる選択肢を提供する

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージングコンテンツ
親にできる要素 フレージング・コンテンツが期待される場所
子にできる要素 <option>要素
対応ブラウザ <datalist>の対応状況を確認する

<datalist>タグの説明

<datalist>は、フォームの入力欄に入力候補となる選択肢を提供するために使用します。例えば、<input>要素で作られたテキストエリアに、予め予想される内容の入力候補を指定しておくことができます。

入力候補となるデータは、<datalist>を親要素として、子要素に<option>要素を記述することによって定義します。<input>要素のlist属性と<datalist>要素のid属性の値を同じ文字列にすることで関連付けることができます。

<datalist>〜</datalist>に記述された内容は、ブラウザ上の見た目には表示されません。

<datalist>タグの特徴

<datalist>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。<datalist>はHTML5から追加された要素です。

<datalist>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。

<datalist>タグの使い方とサンプル

<datalist>を使ったマークアップのサンプルです。

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タグ

入力フォームに関連する要素
<command> ページ内のメニューに操作コマンドを設定する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する
<fieldset> フォームの入力項目をグループ化する
<form> フォームを作成する
<input> フォームを構成する部品を作成する
<label> フォームの入力項目と項目名を関連付ける
<legend> 入力項目グループにタイトルを付ける
<meter> 規定範囲内の数量や測定値を表す
<optgroup> セレクトボックスの選択肢をグループ化する
<option> セレクトボックスの選択肢を作成する
<output> 計算結果やユーザーアクションの出力欄を作成する
<progress> 作業の進捗状況を示すプログレスバーを表示する
<select> セレクトボックスを作成する
<textarea> 複数行のテキストエリアを作成する