HTMLのdatalistタグとは？入力候補を表示する使い方を実例付きで解説
datalistタグとは？
<datalist>タグは、<input>タグに対してあらかじめ定義した選択肢（入力候補）を設定するためのHTML要素です。ユーザーが入力欄にマウスカーソルを合わせると、定義済みの選択肢が一覧で表示されるため、入力の手間を省き、入力ミスを防ぐことができます。
<datalist>を使用する際は、<input>側のlist属性に<datalist>のid属性と同じ値を指定することで、両者を関連付けます。また、<select>タグと異なり、リストからの選択だけでなく自由な入力も可能な点が特徴です。
それでは、<datalist>タグを実際に実装した例を見ていきましょう。
実装例
<!DOCTYPE html> <html> <body> <p>好きな科目</p> <form action="" method="get"> <input list="subject" name="subject"> <datalist id="subject"> <option value="Programming"> <option value="Networking"> <option value="Database"> <option value="Big Data"> <option value="Cloud"> <option value="Framework"> </datalist> <input type="submit"> </form> </body> </html>
表示結果
次に、入力ボックスの中にマウスカーソルを置いてみましょう。すると、以下のように事前に定義しておいた選択肢が一覧で表示されます。
コードのポイント
上記の例では、<input>タグに対して<datalist>要素を使って、次のように入力候補を設定しています。
<datalist id="subject"> <option value="Programming"> <option value="Networking"> <option value="Database"> <option value="Big Data"> <option value="Cloud"> <option value="Framework"> </datalist>
ポイントは、<input>タグのlist属性と<datalist>タグのid属性を同じ値（ここでは「subject」）に揃えることです。これにより、入力欄と候補リストが紐づけられます。
その結果、<input>内にカーソルを置くと、<datalist>要素で事前定義した以下の選択肢が表示されます。
Programming Networking Database Big Data Cloud Framework
datalistタグを使うメリット
- 候補から選ぶだけで入力できるため、入力の手間を大幅に削減できる
- 表記ゆれや入力ミスを防ぎ、データの一貫性を保てる
- 候補にない内容も自由に入力できるため、柔軟なフォームを作れる
検索ボックスや住所・氏名の入力補助など、さまざまな場面で活用できるので、ぜひ実務でも取り入れてみてください。
-
HTMLのdataタグとは？機械可読なデータを紐付ける使い方を解説
HTMLの<data>タグは、表示するコンテンツに機械が読み取り可能な形式の値（machine-readable value）を関連付けるために使用される要素です。人間には見やすいテキストを表示しながら、ブラウザやスクリプト、検索エンジンなどに対しては数値やコードといった処理しやすいデータを提供できます。基本構文<data>タグの基本的な書き方は以下の通りです。<data value="">表示するテキスト</data>value属性には、コンテンツの内容に対応する機械可読な値を指定します。この属性は必須であり、省略した場合に
-
HTMLのtextarea disabled（無効）属性の使い方
<textarea>要素のdisabled（無効）属性は、テキストエリアを操作できない状態にするために使用します。この属性を指定すると、ユーザーは<textarea>内のテキストを編集することはもちろん、テキストを選択することすらできなくなります。 構文 disabled属性の基本的な構文は以下のとおりです。 <textarea disabled> 使用例 それでは、<textarea>要素のdisabled属性を実装した具体例を見ていきましょう。以下のコードでは、学生情報フォームの中で「Info」欄のテキストエリアを無効化しています。 <