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

nas2017/08/28

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

確認環境
・Windows10
・Google Chrome

目次

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

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

コード

上記サンプルのコードです。

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

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

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

 

datalist要素

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

関連の記事

HTML5 進捗状況を表示するサンプル(プログレスバー)
HTML5 スライダーで数値を入力するサンプル(range)
[HTML5] number 上下ボタンで数値を入力する
[HTML5] detailsとsummary クリックで詳細を開く

△上に戻る