【HTML Living Standard】datalist要素の使い方
datalist要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
datalistオブジェクトは、ユーザーが<input>要素に入力する値の候補リストを提供するHTML要素を表すオブジェクトです。この要素は、ユーザーがフォームの入力フィールドに入力する際に、あらかじめ用意された選択肢のヒントを提示する目的で利用されます。
具体的な利用方法としては、<input>要素のlist属性に、関連付けたいdatalist要素のid属性値を指定することで、両者を関連付けます。datalist要素の内部には、<option>要素を複数配置し、それぞれの<option>要素のvalue属性に、ユーザーに提示したい具体的な候補値を記述します。
ユーザーが関連付けられた<input>フィールドに文字を入力すると、入力された文字と一致する候補がドロップダウンリストとして自動的に表示されます。これにより、ユーザーは提示された候補の中から選択することも、あるいはリストにない自由な値を入力することも可能となります。datalistは、ユーザーの入力作業を補助し、入力ミスを減らしつつ、柔軟な入力体験を提供することで、ユーザビリティとアクセシビリティの向上に貢献します。
構文(syntax)
1<datalist id="example-list"> 2 <option value="Option 1"></option> 3 <option value="Option 2"></option> 4 <option value="Option 3"></option> 5</datalist> 6 7<input list="example-list">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML datalist で入力候補を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Datalist サンプル</title> 7</head> 8<body> 9 10 <!-- 11 datalist要素は、input要素に事前定義された選択肢のリストを提供します。 12 ユーザーはリストから選択することも、独自の値を入力することもできます。 13 これにより、入力の補助や予測候補の表示といった、ユーザーインターフェースの使いやすさを向上させます。 14 --> 15 <label for="country-choice">好きな国を入力してください:</label> 16 <input list="countries" id="country-choice" name="country-choice" placeholder="例: 日本"> 17 18 <!-- 19 input要素のlist属性の値（この例では "countries"）と、 20 datalist要素のid（この例でも "countries"）を一致させることで、 21 両者が関連付けられます。 22 option要素のvalue属性に、選択肢として表示したい値を指定します。 23 --> 24 <datalist id="countries"> 25 <option value="日本"></option> 26 <option value="アメリカ合衆国"></option> 27 <option value="カナダ"></option> 28 <option value="イギリス"></option> 29 <option value="フランス"></option> 30 <option value="ドイツ"></option> 31 <option value="中国"></option> 32 <option value="インド"></option> 33 <option value="ブラジル"></option> 34 <option value="オーストラリア"></option> 35 </datalist> 36 37</body> 38</html>
HTMLのdatalist要素は、ユーザーがデータを入力するinput要素（入力フィールド）に対して、あらかじめ定義された選択肢のリストを提供するものです。この要素を使用することで、ユーザーは入力時に表示される候補リストから値を選択できるだけでなく、リストにない新しい値を直接入力することも可能になります。これは、ユーザーが入力する際の手間を軽減し、入力ミスを防ぎ、全体的なユーザーインターフェースの使いやすさを向上させるために利用されます。
datalist要素を機能させるためには、まず入力フィールドであるinput要素のlist属性に任意の識別子（ID）を指定します。その後、その識別子と全く同じIDをdatalist要素自体に設定することで、input要素とdatalist要素が関連付けられます。datalist要素の内部には、提示したい各選択肢をoption要素として記述し、それぞれのoption要素のvalue属性に、実際に表示される選択肢の値を指定します。
datalist要素は、直接画面に表示される視覚的な要素ではなく、input要素の補助的な役割を果たすため、特定の引数を取ったり、値を戻したりする機能はありません。純粋なマークアップによって、入力補助という形でユーザー体験の向上に貢献する要素です。
datalist要素を使用する際は、input要素のlist属性の値と、datalist要素のid属性の値が完全に一致していることを必ず確認してください。これらが一致しないと、選択肢リストはinput要素に関連付けられず、機能しません。
datalistは、ユーザーに候補を提供する一方で、自由に値を入力することも可能にします。これは、選択肢の中から一つだけを選ばせるselect要素とは異なりますので、目的に応じて使い分けてください。
また、datalistが表示する候補リストの見た目（デザイン）は、Webブラウザによって大きく異なります。CSSで直接的に詳細なスタイルを制御することは難しい場合が多いです。もし厳密なデザインや高度なインタラクションが必要な場合は、JavaScriptなどを利用して独自の入力補完コンポーネントを実装することを検討すると良いでしょう。
アクセシビリティの観点から、input要素にはlabel要素をfor属性で正しく関連付けることが重要です。
HTML datalist と CSS で入力補完する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML datalist と CSS の基本サンプル</title> 7 <style> 8 /* ページ全体の基本的なスタイル設定 */ 9 body { 10 font-family: Arial, sans-serif; /* フォントを指定 */ 11 margin: 20px; /* ページの余白 */ 12 background-color: #f4f4f4; /* 背景色 */ 13 color: #333; /* 文字色 */ 14 } 15 16 /* フォームを囲むコンテナのスタイル設定 */ 17 .form-container { 18 background-color: #fff; /* 背景を白に */ 19 padding: 25px; /* 内側の余白 */ 20 border-radius: 8px; /* 角を丸く */ 21 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加 */ 22 max-width: 500px; /* 最大幅 */ 23 margin: 0 auto; /* 中央に配置 */ 24 } 25 26 /* 見出しのスタイル設定 */ 27 h2 { 28 color: #0056b3; /* 見出しの色 */ 29 margin-bottom: 25px; /* 下の余白 */ 30 } 31 32 /* ラベル（項目名）のスタイル設定 */ 33 label { 34 display: block; /* ブロック要素にして縦に並べる */ 35 margin-bottom: 8px; /* 下の余白 */ 36 font-weight: bold; /* 太字 */ 37 } 38 39 /* 入力フィールドのスタイル設定 */ 40 input[type="text"] { 41 width: calc(100% - 22px); /* パディングとボーダーを考慮した幅 */ 42 padding: 10px; /* 内側の余白 */ 43 margin-bottom: 20px; /* 下の余白 */ 44 border: 1px solid #ddd; /* 細いグレーの枠線 */ 45 border-radius: 4px; /* 角を丸く */ 46 font-size: 16px; /* フォントサイズ */ 47 } 48 49 /* ボタンのスタイル設定 */ 50 button { 51 background-color: #007bff; /* ボタンの背景色 */ 52 color: white; /* ボタンの文字色 */ 53 padding: 10px 15px; /* 内側の余白 */ 54 border: none; /* 枠線なし */ 55 border-radius: 4px; /* 角を丸く */ 56 cursor: pointer; /* マウスオーバー時にカーソルをポインタに */ 57 font-size: 16px; /* フォントサイズ */ 58 } 59 60 /* ボタンにマウスが乗ったときのスタイル（ホバーエフェクト） */ 61 button:hover { 62 background-color: #0056b3; /* 少し濃い青色に */ 63 } 64 </style> 65</head> 66<body> 67 <div class="form-container"> 68 <h2>好きなプログラミング言語を選択または入力してください</h2> 69 <form action="#" method="get"> 70 <!-- label要素はinput要素と関連付けられ、アクセシビリティを向上させます --> 71 <label for="programming-language-input">プログラミング言語:</label> 72 73 <!-- input要素のlist属性にdatalist要素のidを指定することで、選択肢を提供します --> 74 <!-- placeholder属性で入力例を表示します --> 75 <input type="text" id="programming-language-input" name="selectedLanguage" list="language-options" placeholder="例: Python"> 76 77 <!-- datalist要素は、input要素に提案される選択肢のリストを定義します --> 78 <!-- ユーザーはリストから選択するか、自分でテキストを入力できます --> 79 <datalist id="language-options"> 80 <option value="Python"> 81 <option value="JavaScript"> 82 <option value="Java"> 83 <option value="C#"> 84 <option value="Go"> 85 <option value="Ruby"> 86 <option value="PHP"> 87 <option value="Swift"> 88 <option value="Kotlin"> 89 <option value="Rust"> 90 </datalist> 91 92 <button type="submit">選択/入力内容を送信</button> 93 </form> 94 </div> 95</body> 96</html>
HTMLのdatalist要素は、ユーザーがフォームのテキスト入力欄（input要素）に文字を入力する際、あらかじめ定義された選択肢のリストを提案するために使用されます。この要素自体が直接画面に表示されることはなく、input要素と連携して機能します。ユーザーは提案されたリストから値を選択することも、自由に新しい値を入力することも可能で、入力の手間を省き、入力ミスを減らす効果があります。
datalist要素をinput要素と関連付けるには、input要素のlist属性に、datalist要素のid属性の値を指定します。datalistの内部には、option要素を使って具体的な選択肢を記述します。option要素のvalue属性に設定された値が、ユーザーに提案される候補として表示されます。
このサンプルコードでは、好きなプログラミング言語を入力するinput要素に対して、idが"language-options"のdatalist要素が連携されています。そのため、inputフィールドに文字を入力し始めると、「Python」や「JavaScript」といったプログラミング言語の候補がドロップダウン形式で表示されます。
datalist要素はHTMLの構造要素であり、プログラミング言語の関数のような引数を取ったり、値を返したりするものではありません。CSSは、このHTMLで構成されたフォームや入力欄、ボタンなどの要素の見た目を整える役割を担っています。例えば、背景色や文字色、要素の配置などを指定し、ウェブページの使いやすさやデザインを向上させています。
datalist要素は、input要素に対して入力候補のリストを提示するためのHTML要素です。この機能を利用するには、input要素のlist属性とdatalist要素のid属性の値を完全に一致させる必要があります。ここが異なっている場合、入力候補は表示されませんので特に注意が必要です。
datalistはユーザーに入力候補を提供するものですが、入力内容をリスト内の値に限定するものではありません。ユーザーはリストにない値を自由に直接入力できます。これは、選択肢を厳密に制限するselect要素とは異なる点です。
ブラウザによってはdatalistの表示方法や対応状況が異なる場合がありますので、開発中は主要なブラウザで動作確認を行うことが大切です。サンプルコードのCSSはフォーム全体の見た目を整え、入力フィールドの視認性を高めますが、datalist自体の詳細なスタイル調整は一般的に難しい点も覚えておきましょう。また、label要素とinput要素を適切に関連付けることで、アクセシビリティが向上し、より多くのユーザーが利用しやすくなります。