<input list>入力項目をリスト表示

<input>タグのlist属性は、入力候補としてデータをリスト表示したい場合に使用します。

またlist属性はautocompleteに似ていますが、違いはその入力補完値を制作者があらかじめ用意するという点になります。 予め入力値を用意しておくことで、ユーザーは入力の手間を省くことができますが、必ずしもリストから選択する必要はなく、任意の値を入力する事もできます。

入力候補として表示されるデータは、<datalist>と<option>を使用し定義します。 <datalist>でデータリストを定義し、さらにその中に<option>タグを配置し各リストの項目を定義します。 そして<datalist>のid属性とinput要素のlist属性の値を一致させる事で、関連付ける事ができます。

なおtype属性の値がpasswordの場合は、list属性を指定する事はできません。

書式

  • <input list="値" 属性="値"> ……… 予め準備された項目を表示

使用した時の例

<form action="sample.php" method="post">
  <p>食べ物:<input type="text" list="list"></p>
  <datalist id="list">
    <option value="りんご"></option>
    <option value="なし"></option>
    <option value="ばなな"></option>
    <option value="ぶどう"></option>
  </datalist>
</form>

ブラウザ上の表示例

食べ物:

対応ブラウザなどのデータ

形式 <input type=""> カテゴリ フローコンテンツ, フレージングコンテンツ,フォーム関連要素(リスト化・ラベル付け・送信・リセット可能) / type属性値がhiddenでない場合はインタラクティブコンテンツ, パルパブル・コンテンツ
親要素 フレージングコンテンツが期待できる場所 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Google Chrome14~ , Firefox7~ , Opera11.5~