Options-Tag in HTML-HTML-Tutorial-php.cn

Options-Tag in HTML

WBOY

Freigeben： 2024-09-04 16:24:57

Original

1148 Leute haben es durchsucht

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. verwenden können. Wo auch immer der Benutzer datalist über Skripte aufrufen oder Daten an den Server senden möchte, dann 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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Ausgabe:

Options-Tag in HTML

Beispiel #2

Beispiel für die Anzeige von “ verwendet.

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>

Nach dem Login kopieren

Ausgabe:

Options-Tag in HTML

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>

Nach dem Login kopieren

Ausgabe:

Options-Tag in HTML

Fazit

Aus all den oben genannten Informationen haben wir erfahren, dass die Element.

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!