HTML5 入力欄に入力候補を表示するサンプル(datalist)

HTML5の入力欄に入力候補を表示するサンプルです。
datalist要素(datalistタグ)を使用します。

確認環境
・Windows10
・Google Chrome

目次

入力候補を表示するサンプル

1.入力欄に「あ」と入力すると、入力候補に「あいうえお」が表示されます。
2.入力欄が空白の状態で右の三角をクリックすると入力候補の一覧が表示されます。

コード

上記サンプルのコードです。
2行目は、テキストボックスです。
5行目から8行目が、入力候補です。
4行目のid属性のlist1は、2行目のinput要素(テキストボックス)のlist属性と紐付いています。

<body>
<input type="text" list="list1">

<datalist id="list1">
	<option value="あいうえお"></option>
	<option value="かきくけこ"></option>
	<option value="さしすせそ"></option>
	<option value="たちつてと"></option>
</datalist>
<body>

datalist要素

  • 入力候補を、datalistタグでくくります。<datalist>~</datalist>。
  • datalistタグのid属性が、input要素のlist属性と紐付きます。
  • 入力候補は、option要素で記述します。
  • Safari,iOS,Androidは、未対応です。
  • 以下はMDNのdatalist要素のリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist

関連の記事

HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)

△上に戻る