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

HTMLのinput要素からdatalist要素の事前定義オプションを参照する方法

HTMLでは、<input>要素にlist属性を使用することで、事前定義された選択肢を持つ<datalist>要素を参照できます。この属性の値には、連携させたい<datalist>要素のidを指定します。

ユーザーが入力欄をクリックまたは入力すると、datalistで定義された候補がドロップダウン形式で表示され、入力内容に応じて候補が絞り込まれます。フォームの入力補完として非常に便利な機能です。

実装例

以下のコードは、list属性を使って<datalist>要素を参照する具体的な例です。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Datalist Tag</title>
    </head>
    <body>
        <input list = "tutorials" />
        <datalist id = "tutorials">
            <option value = "Java">
            <option value = "ASP">
            <option value = "PHP">
            <option value = "Ruby">
            <option value = "jQuery">
        </datalist>
        <p>上記のチュートリアル名を入力してみてください。</p>
    </body>
</html>

コードのポイント

  • <input>要素のlist属性に、<datalist>要素のidと同じ値（この例では「tutorials」）を指定します。
  • <datalist>要素内の各<option>要素のvalue属性が、入力候補として表示されます。
  • ユーザーは候補から選択することも、自由に入力することも可能です。

このようにlist属性と<datalist>要素を組み合わせることで、JavaScriptを使わずに簡単に入力候補機能を実装できます。

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

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

  2. HTML DOM Datalistのoptionsコレクションとは？プロパティ・メソッドと使い方を解説

    HTML DOMのDatalist optionsコレクションは、HTMLの<datalist>要素内に含まれる<option>要素のコレクションを取得・操作するために使用されます。コレクション内の要素は、ドキュメント上に出現する順序と同じ順序で並びます。 Datalist optionsコレクションのプロパティ Datalist optionsコレクションには、以下のプロパティが用意されています。 プロパティ説明 lengthコレクション内に存在する<option>要素の数を返します。読み取り専用のプロパティです。 Datalist opt