Heim > Artikel > Web-Frontend > Options-Tag in HTML
Options-Tag in HTML
- WBOYOriginal
- 2024-09-04 16:24:571124Durchsuche
Options-Tag ist das nützlichste Element im HTML, das in der Dropdown-Liste verwendet wird, um bestimmte Benutzereinstellungen aus der Auswahlliste auszuwählen. Ein Benutzer kann jeweils eine oder mehrere Optionen aus der angegebenen Liste auswählen. Dies ist der Hauptvorteil von Options-Tags in HTML.
Syntax mit Beispiel
Hier ist die Syntax, die uns hilft, zu bestimmen, wo genau das Options-Tag in unserer Webseite oder im HTML definiert wird.
Syntax:
<select> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
Wie oben gezeigt, gilt ist ein Tag, der zum Erstellen einer Datenliste verwendet wird.
Mit Hilfe von CSS können wir unserer Auswahlliste Effekte verleihen, Positionen wie relative, absolute usw. festlegen, die Breite festlegen und viele andere Funktionen ausführen. Die Position für die Dropdown-Liste wird in zwei Werten definiert: Position relativ, die verwendet wird, um den Inhalt der Liste genau direkt unter der Schaltfläche „Liste auswählen“ anzuzeigen. Mit Hilfe von position: absolute;
Beispiel:
Dadurch wird der Benutzer darauf beschränkt, eine einzelne Option aus der Auswahlliste auszuwählen.
<select name="State"> <option value="MH">Maharashtra</option> <option value="GJ"> Gujarat </option> <option value="MP"> Madhya Pradesh </option> <option value="RJ">Rajasthan </option> <option value="AP">Andhra Pradesh </option> </select>
Ähnlich können wir, wie wir alle wissen, auch mehrere Optionen nach Wahl in der Auswahlliste auswählen.
Syntax:
<select multiple> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
Ein Beispiel für dieselbe Syntax lautet wie folgt:
<select name="laptops" multiple> <option value="hp">HP</option> <option value="dell">Dell</option> <option value="lv">Lenovo</option> <option value="sony">Sony </option> </select>
Attribute des Option-Tags in HTML
- deaktiviert: Dieses Attribut wird verwendet, um einen booleschen Wert in den Formen „wahr“ und „falsch“ festzulegen. Wenn es auf „true“ gesetzt ist, wird die Option aus der Liste deaktiviert; andernfalls ist es falsch.
- label: Angenommen, wir möchten Text als Beschriftung angeben, dann ist dies im Option-Tag möglich. Es wird als Wert für dieses Element betrachtet.
- ausgewählt: Beim Entwerfen von Webseiten kommt es manchmal vor, dass wir die Option in der Anzeigeansicht als bereits ausgewählt anzeigen möchten. Durch Festlegen ausgewählter Attribute für die Optionen können ausgewählte Optionen in der Liste angezeigt werden. Es kann nur ein ausgewähltes Element aus der Liste angezeigt werden.
- Wert:Man kann den Wert auch auf die Option in der Auswahlliste setzen.
Beispiele für Option Tag in HTML
Unten sind die verschiedenen Beispiele für Option-Tags in HTML:
Beispiel #1
Dies ist ein einfaches Beispiel einer Auswahlliste mit
Code:
<!DOCTYPE html> <html> <head> <title>Option tag in HTML</title> </head> <body> <h4>List of IIT colleges in INDIA</h4> <form> <select name = "dropdown"> <option value = "im" >IIT Madras</option> <option value = "id" >IIT Delhi</option> <option value = "ib" >IIT Bombay </option> <option value = "ikh" >IIT Kharagpur</option> <option value = "ikn">IIT Kanpur</option> <option value = "ir" >IIT Roorkee</option> <option value = "ig" >IIT Guwahati</option> <option value = "ih">IIT Hyderabad </option> <option value = "ii">IIT Indore</option> <option value = "ib">IIT Bhubaneswar</option> <option value = "it" >IIT Tirupati</option> <option value = "ib">IIT Bhilai</option> <option value = "ig">IIT Goa</option> <option value = "ij" >IIT Jammu</option> <option value = "idb">IIT Dhanbad </option> <option value = "ip">IIT Palakkad</option> <option value = "idhe">IIT Dharwad, Est</option> </select> </form> </body> </html>
Ausgabe:
Beispiel #2
Beispiel für die Anzeige von
Code:
<!DOCTYPE html> <html> <head> <title>Option tag in HTML</title> </head> <body> <h4>Select your favourite Bakery product from the list</h4> <form> <select name = "dropdown"> <optgroup label="Cakes"> <option value = "BS" >Butterscotch Cake</option> <option value = "DC" >Dark Chocolate Cake</option> <option value = "FC" >Fruit Cake</option> <option value = "RC" >Rasmali Cake</option> </optgroup> <option value = "cc">Cupcakes</option> <option value = "vp" required>Veg Puff</option> <option value = "ap" disabled>Anda Puff</option> <option value = "cb">Crunchy Biscuits </option> <option value = "cob">Chocolate Biscuits</option> <option value = "clc">Choco Lava Cake</option> <option value = "wb" >White Bread</option> <option value = "bb">Brown Bread</option> <option value = "mf" selected>Muffin</option> <option value = "br" >Bread Roll</option> <option value = "bw">Brownie </option> <option value = "ps">Pastry</option> <option value = "vgs">Veg Grill Sandwich</option> </select> </form> </body> </html>
Ausgabe:
Beispiel #3
In diesem Beispiel wählen wir mehrere Optionen aus der Datenliste aus.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Top IT training Institutes in Pune </h2>
<form id="multidd">
<select id="multiselectopt">
<option> ABCIS Learning </option>
<option> MindScripts Technologies </option>
<option> Sysap technologies </option>
<option> IclassPune</option>
<option> IIHT</option>
<option> Magneto Academy </option>
<option> Certification Guru </option>
<option> I Cert Global </option>
<option> Technogeeks </option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here. Press ctrl key and select multiple option from the list.</p>
<script>
function multipleFunc() {
document.getElementById("multiselectopt").multiple = true;
}
</script>
</body>
</html>
Ausgabe:
Fazit
Aus all den oben genannten Informationen haben wir erfahren, dass die
Das obige ist der detaillierte Inhalt vonOptions-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!