HTML Select List Option

Einführung

Das HTML <option>-Tag wird verwendet, um die Optionen in einer Dropdown-Liste in einem HTML-Formular zu definieren. Es wird an das <select>-Tag und seine Varianten wie <datalist> und <optgroup> angehängt. Dieses Tag hilft Benutzern, eine Auswahl aus einer Liste von Optionen zu treffen. In diesem Lab werden Sie durch die Schritte geführt, um eine HTML Dropdown-Liste mit dem <option>-Tag zu implementieren.

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.

Erstellen eines <form>-Elements

Erstellen Sie in Ihrem bevorzugten Texteditor eine HTML-Datei namens index.html.

Beginnen Sie mit der Erstellung eines einfachen HTML-Formulars:

<form></form>

Erstellen eines <select>-Elements und Hinzufügen von Optionen

Innerhalb des <form>-Elements fügen Sie ein <select>-Element hinzu, das eine Dropdown-Liste erstellt.

<form>
  <select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

Hier haben wir drei <option>-Tags innerhalb der <select>-Tags hinzugefügt, wobei das value-Attribut auf "option1", "option2" und "option3" gesetzt ist.

Hinzufügen einer Aufforderung

Fügen wir einen Aufforderungstext hinzu. Innerhalb des <select>-Tags fügen Sie folgenden Code hinzu:

<select>
  <option value="" disabled selected>Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Hier haben wir ein neues <option>-Tag mit folgenden Attributen hinzugefügt:

• value="", das den Wert auf eine leere Zeichenfolge setzt.
• disabled, das die Option davon abhält, ausgewählt zu werden.
• selected, das verwendet wird, um die Standardauswahl für die Dropdown-Liste anzuzeigen.
• Der Text innerhalb des <option>-Tags, der als Aufforderung fungiert.

Hinzufügen einer Abschicken-Schaltfläche

Wir benötigen eine Abschicken-Schaltfläche, um das Formular abzuschicken. Fügen Sie folgenden Code nach dem <select>-Tag hinzu:

<form>
  <select>
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Submit" />
</form>

Speichern Sie die Datei und führen Sie sie in einem Webbrowser aus, um die Dropdown-Liste in Aktion zu sehen.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man das HTML <option>-Tag verwendet, um eine Dropdown-Liste zu erstellen. Wir haben begonnen, indem wir ein HTML-Formular erstellt haben, dann ein <select>-Element hinzugefügt, Optionen mit dem value-Attribut darin hinzugefügt und einen Aufforderungstext hinzugefügt. Schließlich haben wir eine Abschicken-Schaltfläche hinzugefügt, um das Formular abzuschicken. Das <option>-Tag spielt eine entscheidende Rolle bei der Erstellung dynamischer HTML-Formulare.