Webページを作成するにあたって、高頻度で必要になるのがフォーム。読者の感想はもちろん、簡単なアンケートも行える便利な機能ですが、その中で入力候補を表示できるタグがあるのをご存じですか？すでに存在していたselectタグとは少し違ったdatalistタグ。
datalistタグとは？使い方を知りたい！
今回は、datalistタグの
・基本的な使い方
・datalistタグとselectタグの違い
について説明します。全てサンプルコードを記載していますので、実際の動作を試しながら読み進めてくださいね！
目次
datalistタグとは
datalistタグの読み方
daatlistタグは「データリストタグ」と読みます。
datalistタグの説明
datalistタグはフォーム内で使用されるタグです。フォームの入力欄でユーザに向けて、入力候補をサポートします。フォームとはサイトの読者のために用意されたアンケートのようなもので、読者に回答を記入してもらい、サーバ上でその回答をまとめます。
datalistタグで利用できる属性
datalistタグでは以下のグローバル属性のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey | 要素に体するショートカットキーを指定するための属性です。 |
| autocapitalize | ブラウザでユーザーが要素に入力や編集をした際、入力欄で入力した文字列の最初の文字が自動的に大文字化されるかどうかを設定する属性です。 |
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です |
| contenteditable | 要素の内容を編集可能かどうかを指定する属性です。 |
| data-* | 要素にオリジナルのデータ属性を指定するための属性です。 |
| dir | テキストの文字の方向を右書き・左書きのどちらかに指定する属性です。 |
| draggable | 要素がドラッグ可能かどうかを指定する属性です。 |
| dropzone | 要素の上でコンテンツをドロップできるかどうかを指定する属性です。 |
| hidden | 要素の非表示を指定する属性です。 |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
| inputmode | 仮想キーボードの種類の構成に関するヒントを与えます。 |
| is | 登録したカスタム内臓要素のように振舞うように指定できます。 |
| itemid | 項目で一意なグローバル識別子です。 |
| itemprop | その要素で記述された内容がどのような意味を持つかを定義する属性です。 |
| itemref | 項目に関連付けることができます。 |
| itemscope | itemtypeとセットで使用する属性です。ブロックに含まれているHTMLが特定の項目に関するということを指定します。 |
| itemtype | アイテムの種類を指定するための属性です。 |
| lang | 要素の中で使われる言語を定義する属性です。 |
| part | CSSの疑似要素::partを使用するためにパート名を付けます。 |
| slot | 要素にシャドウツリーのスロットを割り当てるための属性です。 |
| spellcheck | 要素のスペルチェックを有効にするかどうかを指定する属性です。 |
| style | 要素に直接スタイル（見た目）を指定するための属性です。 |
| tabindex | Tabキーを使って要素を選択する際の優先順位を指定する属性です。 |
| title | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 20 |
| Edge | 12 |
| Firefox | 4 |
| nternet Explorer | 10 |
| Opera | 9.5 |
| Safari | 12.1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 4.4.3 |
| Android版Chrome | 33 |
| Android版Firefox | 4 |
| Android 版 Opera | 一部 |
| iOS版Safari | 12.2 |
| Samsung Internet | 2.0 |
datalistタグの基本的な使い方
datalistタグの使い方
datalistタグは候補を作成するoptionタグと一緒に使用します。datalistタグの中にoptionタグを入れ、候補を記述していきます。
See the Pen
datalist基本 by rabbittyu (@rabbittyu)
on CodePen.
まずはlabelタグで入力してもらう値について説明します。labelタグのfor属性とinputタグのid属性を結びつけることで、文字をクリックしても入力欄がフォーカスされるようになります。
そしてinputタグでは入力欄を生成します。ここでの属性はlist属性を指定。これはdatalistタグと必ずセットで使用する属性なので覚えておきましょう。さらにname属性で名前を付けておくと、CSSでの装飾が容易になります。
inputタグを記載したら、その下にdatalistタグを記載します。id属性を使用し、必ずinputのlist属性と同じ値を設定してください。<datalist></datalist>の間にoptionタグを使用して入力候補を指定していきます。optionタグ内、value属性で入力値の設定が行えます。
datalistタグと類似するselect要素との違い
ここではdatalistタグと同じように入力候補を表示する、selectタグとの違いを説明します。datalistタグはHTML5から新しく導入された要素です。selectタグとdatalistタグの明確な違いは、selectタグは決まった値しか選択できないの対し、datalistタグは選択肢からの選択はもちろん、自分でも値を入力できると言う事です。
これはdatalistタグで生成されるのがテキストボックスだから！selectタグではテキストボックスではなく、セレクトボックスが生成されるため、自由に値を入力することができないのです。挙動の違いを実際に確認していきましょう。
See the Pen
datalist 違い by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はdatalistタグについてご紹介しました。datalistタグは
- テキストエリアに入力候補を表示する
- inputタグにlist属性を指定して、datalistと紐づけて使用する
- selectタグとの違いは、入力候補だけでなく任意の値も入力できる点
以上の3点がポイントになります！特にselectボックスとの違いは、ややこしいですが覚えておくと便利です。また定義する際も、datalistタグだけでは動作しません。必ず直前でinputタグを使用し、その中のlist属性とdatalist属性のidを同じにして、紐づけを行うのを忘れないでください。
参考文献：
MDN web docks <datalist>
HTML5タグリファレンス：datalist
HTML5タグリファレンス：option
HTML5タグリファレンス：select
shirokumaoshiri ～HTML5の新要素「datalist」について
