HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのdatalistタグの使い方！入力候補リストを作成する方法

datalistタグとは？

HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。

<datalist>タグを使用する際のポイントは以下の2点です。
・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる
・選択肢は<datalist>〜</datalist>の中に<option>タグで記述する

使用例

次のコードを実行すると、<datalist>タグの動作を確認できます。ツール名の入力欄に文字を入力すると、候補リストが表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Datalist Tag</title>
   </head>

   <body>
      <p>Type the tool name:</p>
      <input list = "tools" />
      <datalist id = "tools">
         <option value = "Image Editor">
         <option value = "Whiteboard">
         <option value = "Image Optimizer">
         <option value = "Document Viewer">
      </datalist>
   </body>
</html>

このコードでは、<input>要素のlist属性に「tools」を指定し、<datalist>要素のid属性も同じく「tools」に設定しています。これにより両者が紐付けられ、入力欄をクリックまたは入力したタイミングで「Image Editor」「Whiteboard」「Image Optimizer」「Document Viewer」の候補が表示されます。

<datalist>は主要なモダンブラウザ（Chrome・Firefox・Edge・Safari・Operaなど）で広くサポートされており、JavaScript不要で実装できる手軽な入力補助機能として活用できます。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLのdatalistタグとは？入力候補を表示する使い方を実例付きで解説

    datalistタグとは？ <datalist>タグは、<input>タグに対してあらかじめ定義した選択肢（入力候補）を設定するためのHTML要素です。ユーザーが入力欄にマウスカーソルを合わせると、定義済みの選択肢が一覧で表示されるため、入力の手間を省き、入力ミスを防ぐことができます。 <datalist>を使用する際は、<input>側のlist属性に<datalist>のid属性と同じ値を指定することで、両者を関連付けます。また、<select>タグと異なり、リストからの選択だけでなく自由な入力も可能な点が特徴です。