Was ist das Option-Tag in HTML?

Was Ist Das Option Tag In Html



Der ' Das Tag „“ wird verwendet, um eine Option zu definieren, die ein Benutzer aus einem Dropdown-Menü oder aus den Auswahllisten in Webformularen auswählen kann. Der ' Mit dem Tag „Tag“ können Entwickler eine Reihe von Optionen erstellen, aus denen der Benutzer eine beliebige Option auswählen kann. Es wird in verschiedenen Anwendungen wie Umfragen, Online-Shopping-Sites, Registrierungsformularen usw. verwendet.

Dieser Artikel demonstriert das Option-Tag in HTML zusammen mit praktischen Beispielen:





Was ist das Option-Tag und wie wird es in HTML verwendet?

Das Options-Tag kann mit dem „“ verwendet werden. ' Und ' ' Stichworte. Im Fall des „ ”-Tag erstellt es eine Liste von Optionen, die von einem Browser automatisch vervollständigt werden können. Lassen Sie uns einige Beispiele durchgehen, um die Beziehung zwischen „ ”-Tag mit dem „ ' Und ' ' Stichworte:



Beispiel 1: Erstellung einer Dropdown-Liste



Der ' ”-Tag wird mit dem „ ”-Tag, um eine Dropdown-Liste auf der Webseite zu erstellen. Der ' „erstellt jede Option/jedes Listenelement in der Dropdown-Liste. Zum besseren Verständnis folgen wir dem folgenden Codeausschnitt:



< h2 > Programmiersprachen h2 >
< Etikett für = „Prog-Waffe“ > Wählen Sie eine Programmierwaffe: Etikett >
< wählen Ausweis = „Prog-Listen“ >
< Möglichkeit Wert = „“ > Wähle eine Option Möglichkeit >
< Möglichkeit Wert = „c++“ > C++ Möglichkeit >
< Möglichkeit Wert = '.Netz' > Punkt net Möglichkeit >
< Möglichkeit Wert = „nodejs“ > Knoten js Möglichkeit >
wählen >

Im obigen Codeausschnitt:



  • Zuerst die ' Das Tag „“ wird zum Anzeigen der Daten verwendet und ihm ist das Tag „“ zugewiesen. ”-Tag mit seinem „ für ” Attribut.
  • Danach wird das „ Das Tag „“ wird verwendet, um eine Umgebung für die Dropdown-Liste zu erstellen.
  • Als nächstes wird das „ Das Tag „“ wird zum Erstellen von Listenelementen verwendet, die als Dropdown-Listenelemente platziert werden sollen.

Nachdem wir die Struktur der Dropdown-Liste eingerichtet haben, wenden wir nun einige grundlegende Stile an:

Etikett {
Bildschirmsperre;
Rand unten: 5px;
}
wählen {
Polsterung: 5px;
Randradius: 5px;
Breite: 200px;
}

Nachfolgend wird die Erklärung der CSS-Eigenschaften beschrieben:

  • Wählen Sie zunächst „ Etikett ”-Element und setzen Sie dann die Werte von „block“ und „5px“ auf das CSS „ Anzeige ' Und ' Rand unten ' Eigenschaften.
  • Als nächstes wird das „ wählen Das Element wird ausgewählt und stellt dem CSS die Werte „5px“, „5px“ und „200px“ zur Verfügung. Polsterung “, „ Grenzradius ' Und ' Breite ” Eigenschaften bzw. Diese Eigenschaften werden verwendet, um die Benutzersichtbarkeit zu verbessern.

Nach der Ausführung der oben genannten Codeausschnitte sieht die Webseite folgendermaßen aus:

Die obige Ausgabe zeigt, dass das Dropdown-Menü mit dem Befehl „ erstellt wurde. ”-Tag mit dem „ ' Schild.

Beispiel 2: Erstellung einer Autovervollständigungsliste

Der ' ”-Tag wird mit dem „ ”-Tag, um eine Autovervollständigungsliste zu erstellen. Es wird zusammen mit dem „ ”-Tag, das mit den in der Autovervollständigungsliste verfügbaren Optionen gefüllt wird. Der Code für die Erstellung einer Autovervollständigungsliste mithilfe von HTML ist im folgenden Codeausschnitt dargestellt:

< Etikett für = „Prog-Tools“ > Oder Typ ein Programmiertool: Etikett >
< Eingang Typ = 'Text' Ausweis = „Prog-Tools“ Liste = 'Werkzeug' >
< Datenliste Ausweis = 'Werkzeug' >
< Möglichkeit Wert = „C++“ >
< Möglichkeit Wert = 'Montage' >
< Möglichkeit Wert = '.Netz' >
< Möglichkeit Wert = „PHP“ >
< Möglichkeit Wert = 'Rubin' >
< Möglichkeit Wert = 'Schnell' >
< Möglichkeit Wert = „Knoten js“ >
< Möglichkeit Wert = 'Reagieren' >
< Möglichkeit Wert = „Mongo“ >
< Möglichkeit Wert = 'Java' >
< Möglichkeit Wert = 'Python' >
Datenliste >

Im obigen Codeausschnitt:

  • Fügen Sie zunächst „ ”-Tag, das den Text zusammen mit dem HTML-Element anzeigt.
  • Als nächstes verwenden Sie die „ ”-Tag, das vom Benutzer manuell ausgefüllt wird oder durch die in der Autovervollständigungsliste verfügbaren Optionen automatisch ausgefüllt werden kann.
  • Nutzen Sie danach die Funktion „ ” Tag und legen Sie sein „ fest Ausweis Attributwert gleich dem Wert des „ Liste ” Attribut des „ ' Schild.
  • Als nächstes verwenden Sie die „ ”-Tag innerhalb des „“-Tags, um ein Element für die Autovervollständigungsliste zu erstellen.

Nach der Ausführung des obigen Codeausschnitts sieht die Webseite folgendermaßen aus:

Die Ausgabe zeigt, dass die Autovervollständigungsliste mithilfe des „ ”-Tag mit der Kombination „ ' Und ' ' Stichworte.

Abschluss

Der ' Mit dem Tag „“ kann der Entwickler Optionen für die Optionsliste erstellen, aus denen der Benutzer eine beliebige Option auswählen kann. Dieses „