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

2022.04.28 /

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

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

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

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

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

datalist要素

datalist要素とは

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

IT用語の確認

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

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

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

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

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要素の3つの要素を使用します。

<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>

使用する際の注意点

datalist要素によるテキスト入力+選択フォームは非常に便利です。しかし以下に示すような使用上の注意点もあります。

datalist要素:使用上の注意点
  • inputに文字列が入ると選択肢は表示されない
  • ブラウザによって対応・非対応がある
  • ブラウザによって表示が異なる

すでにフォームを触ってお気づきかもしれませんが、フォームになにか入力すると選択肢は表示されなくなります。再度選択肢を表示するには入力ボックスの中身をすべて削除する必要があります。

また利用するブラウザによって表示に多少ばらつきが出るので注意が必要です。

まとめ

本記事「【HTML】datalist要素:テキスト入力(input)と選択(select)ができるフォーム作成」はいかがでしたか。

HTML5から追加されたdatalist要素を利用して、希望にあったフォームを作成できるようになってください。