In diesem Artikel zeige ich Ihnen, wie Sie das Option-Tag in HTML verwenden. Dies ist das Tag, das mit dem select-Tag geliefert wird, um Optionen in der Liste zu erstellen.

Das Option-Tag erstellt eine Option in der Optionsliste des <select> -Tags.

Verwenden Sie das <option>-Tag in einem <select> – oder <datalist> -Tag-Paar.

Hinweis :

• Das Tag < optton> kann ohne Attribute verwendet werden. Wenn Sie jedoch ausgewählte Daten an den Server senden möchten, müssen Sie das value-Attribut verwenden.
• Wenn Sie zu viele Optionen haben, können Sie das Tag <optgroup> verwenden.

1. Verwendung des Option-Tags in HTML

Beispiel : Verwenden Sie die Option, um Optionen in der Liste der Kurse unter web888.vn zu erstellen.

 <select> <option>PHP</option> <option>Javascript</option> <option>HTML-CSS</option> <option>Database</option> <option>Lập trình mobile</option> </select>

Jeder Kurs befindet sich in einem Paar <option> -Tags. Wenn Sie eine Option auswählen, ist der Wert dieser Option der Wert des <select> -Tags.

2. Attribut des Option-Tags in HTML

Hier ist ein häufig verwendetes Attribut im select-Tag.

• deaktiviert – deaktiviert die Option, sie wird weiterhin sichtbar sein, aber der Benutzer kann sie nicht auswählen.
• Bezeichnung – Legen Sie eine kurze Bezeichnung für die Option fest.
• selected – Wenn eine Option dieses Attribut hat, wird es der Standardwert sein, der nach dem Laden der Seite ausgewählt wird.
• value – der Wert der Option, auch der Wert von select, wenn die Option ausgewählt ist.

Verwenden Sie beispielsweise den Wert und die ausgewählten Attribute des Options-Tags. Beim Senden wird der Wert von select angezeigt.

 <form> <select id="select"> <option value="php">PHP</option> <option value="js">Javascript</option> <option value="html/css" selected="selected">HTML-CSS</option> <option value="db">Database</option> <option value="mobile">Lập trình mobile</option> </select> <input type="submit" name="Submit" onclick='alert(document.getElementById("select").value)'> </form>

3. Fügen Sie CSS für das html .option-Tag hinzu

Wir verwenden CSS selten für Options-Tags. Wenn Sie es jedoch stylen möchten, verwenden Sie Folgendes:

 option{ color:red }

Oder Sie legen eine ID / Klasse dafür fest und verwenden dann eine Selektorabfrage.