【HTML】datalist要素：テキスト入力（input）と選択（select）ができるフォーム作成

2022.04.28 / 2022.04.28

本記事ではHTMLのdatalist要素の使い方について解説していきます。

datalist要素を使用することで「テキスト入力」と「入力候補からの選択」の両方が可能なフォームを作成できます。

inputとselectの入力形式をもつフォームを作成したい、という方はdatalist要素の利用を検討してみてください。

ぜひ本記事を通して、datalist要素の理解を深めてください。

datalist要素

datalist要素とは

datalist要素はフォーム入力で使用する要素で、input要素に使用することでinput要素にサジェスト機能を追加します。

IT用語の確認

サジェスト機能とは、入力ボックスで入力候補を表示する機能です。GoogleやYahooの検索窓で候補が下に表示するやつです。サジェスト（suggest）は日本語で「提案する」という意味です。

より分かりやすく言うと、input要素とdatalist要素で「テキスト入力」と「入力候補からの選択」の両方が可能なフォームを作成します。

つまり<input type=”text”>と<select>による入力形式２つを兼ね備えたフォームを作成できるということです。

datalist要素はHTML５から導入された新しい要素です。

datalist要素のブラウザ別サポート状況

datalist要素のブラウザ毎のサポート状況は以下のようになっています。

PCブラウザ	対応バージョン
Chrome	20
Edge	12
Firefox	4
Internet Explore	10
Opera	9.5
Safari	12.1
スマフォブラウザ	対応バージョン
WebView Android	4.4.3
Android Chrome	33
Android Firefox	4
iOS Safari	12.2
Samsung Internet	2.0

datalist要素を紹介している一部のサイトでは、スマートフォンでは利用できないと説明していますが、今現在では多くのブラウザで対応しています。

datalist要素によるフォームデモ

以下にdatalist要素を使ったフォームのデモを表示しています。ぜひクリックしてどのように動くか確認してみてください。

上記フォームのコードを以下に記します。

<input type="text" name="" list="language" placeholder="テキスト入力または選択" autocomplete="off">
<datalist id="language">
    <option value="英語">
    <option value="日本語">
    <option value="スペイン語">
</datalist>

詳しい使い方は次項より解説していきます。

datalist要素の使用方法

datalist要素を使ったフォームでは、基本的にinput要素とdatalist要素、option要素の３つの要素を使用します。

<input type="text" name="" list="language" placeholder="テキスト入力または選択" autocomplete="off">
<datalist id="language">
    <option value="英語">
    <option value="日本語">
    <option value="スペイン語">
</datalist>

input要素にはdatalist要素と関連付けるためにlist属性にdatalist要素のid属性の値を指定します。

input要素で利用できるtype属性は以下の通りです。

text、search、tel、url、email、datetime、date、month、week、time、number、range、color

option要素で選択肢を作成します。value属性に表示する選択肢の文字列を指定してください。またlabel属性で選択肢の補助情報を表示することもできます。

<input type="text" name="" list="language" placeholder="テキスト入力または選択" autocomplete="off">
<datalist id="language">
    <option value="英語" label="English">
    <option value="日本語" label="Japanese">
    <option value="スペイン語" label="Spanish">
</datalist>