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

HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

HTMLのlist属性とは

HTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。

<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。

list属性の基本的な使い方

list属性を使うには、以下の2つのステップを行います。

  • <datalist>要素に一意のidを設定し、<option>要素で選択肢を定義する
  • <input>要素のlist属性に、そのidの値を指定して紐付ける

これにより、テキスト入力欄とプルダウン候補を組み合わせた、柔軟なフォームUIを簡単に実装できます。

コード例

次のコードを実行すると、HTMLにおけるlist属性の使い方を確認できます。入力欄に文字を入力すると、「Image Editor」「Whiteboard」などの定義済み選択肢が候補として表示されます。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML list属性の例</title>
  </head>
  <body>
    <p>ツール名を入力してください：</p>
    <input list="tools" name="tool" />
    <datalist id="tools">
      <option value="Image Editor">
      <option value="Whiteboard">
      <option value="Image Optimizer">
      <option value="Document Viewer">
    </datalist>
  </body>
</html>

ブラウザの対応状況

list属性および<datalist>要素は、Chrome、Firefox、Edge、Safari、Operaなど、主要なモダンブラウザで広くサポートされています。古いブラウザでは単なる通常のテキスト入力欄として動作するため、サイトの機能が損なわれることはありません。

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&