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

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

サンプル

入力欄または入力欄の右の三角をクリックすると入力候補が表示されます。

datalist要素

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

コード

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

<html lang="ja">
<head>
<meta charset="utf-8">
<title>progressのサンプル</title>
<script>
</script>
</head>
<body >
<input type="text" list="list1">

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

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 Video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル




△上に戻る