HTML vordefinierte Eingabemöglichkeiten: Autovervollständigung

Einführung

Das HTML-Datalist-Tag wird verwendet, um eine Liste vordefinierter Optionen bereitzustellen, die erscheinen, wenn ein Benutzer in einem Eingabefeld tippt. In diesem Lab werden Sie lernen, wie Sie das Datalist-Tag verwenden, um die Autovervollständigung auf einem Formular zu aktivieren.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) 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 vordefinierte Eingabemöglichkeiten"}} html/forms -.-> lab-70732{{"HTML vordefinierte Eingabemöglichkeiten"}} html/form_access -.-> lab-70732{{"HTML vordefinierte Eingabemöglichkeiten"}} html/inter_elems -.-> lab-70732{{"HTML vordefinierte Eingabemöglichkeiten"}} html/custom_attr -.-> lab-70732{{"HTML vordefinierte Eingabemöglichkeiten"}} end

Hinzufügen des Eingabefelds

Erstellen Sie eine HTML-Datei namens "index.html".

Fügen Sie einem Eingabefeld zu Ihrer HTML-Datei hinzu, indem Sie das <input>-Tag verwenden.

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

Erstellen eines Datalists

Erstellen Sie einen Datalist, indem Sie das <datalist>-Tag und das id-Attribut verwenden.

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

Hinzufügen von Optionen zum Datalist

Fügen Sie einige Optionen zum Datalist hinzu, indem Sie das <option>-Tag verwenden.

<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>

Verknüpfen des Eingabefelds mit dem Datalist

Verknüpfen Sie das Eingabefeld mit dem Datalist, indem Sie das list-Attribut verwenden und seinen Wert auf die ID des Datalists setzen.

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

Speichern Sie die Änderungen und testen Sie die Autovervollständigung auf dem Formular mit mehreren Automarken.

Zusammenfassung

Indem Sie diese einfachen Schritte befolgen, können Sie das Datalist-Tag in Ihrem HTML-Code implementieren, um die Autovervollständigung auf einem Formular bereitzustellen. Das Datalist-Tag ermöglicht es Benutzern, aus einer Liste vorgegebener Optionen auszuwählen, und bietet gleichzeitig die Möglichkeit, Werte außerhalb der vorgegebenen Optionen einzugeben, wenn dies erforderlich ist.