はじめに
HTMLのdatalistタグは、ユーザーが入力フィールドに入力しているときに表示される事前定義済みのオプションのリストを提供するために使用されます。この実験では、datalistタグを使用してフォームにオートコンプリート機能を有効にする方法を学びます。
注: index.html
でコーディングを練習し、Visual Studio CodeでHTMLを書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/FormsandInputGroup -.-> html/forms("Form Elements")
html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes")
subgraph Lab Skills
html/basic_elems -.-> lab-70732{{"HTML の事前定義済み入力オプション"}}
html/forms -.-> lab-70732{{"HTML の事前定義済み入力オプション"}}
html/form_access -.-> lab-70732{{"HTML の事前定義済み入力オプション"}}
html/inter_elems -.-> lab-70732{{"HTML の事前定義済み入力オプション"}}
html/custom_attr -.-> lab-70732{{"HTML の事前定義済み入力オプション"}}
end