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

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

HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。

例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。

list属性の基本構文

list属性の基本的な書き方は以下の通りです。

<input list="テキスト">

list属性には、関連付けたい<datalist>要素のid値を指定します。これにより、input要素とdatalist要素が紐づけられます。

HTML list属性の使用例

それでは、実際にlist属性を使用したサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    input {
        display: block;
        width: 60%;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML list属性のデモ</h1>
<input list="subject" placeholder='選択科目を選んでください'>
<datalist id='subject'>
<option>数学</option>
<option>物理</option>
<option>経済学</option>
</datalist>
</body>
</html>

実行結果

上記のコードを実行すると、入力欄にフォーカスしたときや文字を入力したときに、「数学」「物理」「経済学」という選択肢が候補として表示されます。ユーザーは候補から選ぶこともできますし、自由に入力することも可能です。

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

list属性のポイント

  • <input>要素のlist属性の値と、<datalist>要素のid属性の値を一致させる必要があります。
  • <datalist>内の選択肢は<option>要素で定義します。
  • 候補はあくまで「提案」なので、リストにない値をユーザーが入力することも可能です。
  • 主要なブラウザ（Chrome、Firefox、Edge、Safariなど）で広くサポートされています。

このように、list属性とdatalist要素を組み合わせることで、JavaScriptを使わずに簡単なオートコンプリート機能を実装できます。セレクトボックスとは異なり自由入力も許容したい場面で特に便利です。

  1. HTMLのid属性とは？基本ルールと実践的なサンプルコードを解説

    HTMLのid属性とはHTMLのid属性は、ページ内の特定の要素に一意の識別子（ユニークなID）を割り当てるための属性です。この識別子を利用することで、CSSによるスタイル適用や、JavaScriptによる要素の操作を、その要素だけに限定して行うことができます。重要なルールとして、1つのHTMLページ内で同じidを複数の要素に付けることはできません。idは必ずページ内で一意である必要があります。また、CSSやJavaScriptからidを参照する際には、先頭にハッシュ記号（#）を付けます。id属性の主な用途CSSでのスタイリング：「#id名」セレクタを使って、特定の要素のみにスタイルを適用でき

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属