HTML の事前定義済み入力オプション

はじめに

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

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

Skills Graph

入力フィールドの追加

「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タグを使用することで、ユーザーは事前に定義されたオプションのリストから選択することができます。必要に応じて、事前に定義されたオプションの外で値を入力することもできます。