HTML の事前定義済み入力オプション：オートコンプリート機能

はじめに

HTML の datalist タグは、ユーザーが入力フィールドに入力しているときに表示される事前定義済みのオプションのリストを提供するために使用されます。この実験では、datalist タグを使用してフォームにオートコンプリート機能を有効にする方法を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。

入力フィールドの追加

「index.html」という名前の HTML ファイルを作成します。

<input> タグを使用して HTML ファイルに入力フィールドを追加します。

<input type="text" id="car-brand" />

datalist の作成

<datalist> タグと id 属性を使用して datalist を作成します。

<datalist id="car-brands"> </datalist>

datalist にオプションを追加する

<option> タグを使用して datalist にいくつかのオプションを追加します。

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

入力フィールドを datalist にリンクする

list 属性を使用して入力フィールドを datalist にリンクし、その値を datalist の ID に設定します。

<input type="text" id="car-brand" list="car-brands" />

変更を保存し、複数の自動車ブランドを含むフォームのオートコンプリート機能をテストします。

まとめ

これらの簡単な手順に従うことで、HTML コードに datalist タグを実装して、フォームにオートコンプリート機能を提供することができます。datalist タグを使用することで、ユーザーは事前に定義されたオプションのリストから選択することができます。必要に応じて、事前に定義されたオプションの外で値を入力することもできます。