Heim >Web-Frontend >HTML-Tutorial >Wählen Sie „Tag in HTML' aus

Wählen Sie „Tag in HTML' aus

王林Original: 2024-09-04 16:28:11561Durchsuche

Das Select-Tag in HTML ermöglicht eine Auswahlfunktion aus der Liste der Optionen, z. B. ein Dropdown-Menü oder ein Mehrfachauswahlmenü. Es handelt sich um ein Tag, das in der Form des HTML-Codes verwendet werden kann, der zum Erstellen und Implementieren einer Webseite verwendet wird. Die Syntax lautet wie folgt: „, wobei jedes Element in der Liste vom Option-Tag umschlossen wird und die Benutzerauswahlfunktion ermöglicht. Um andere Auswahlmethoden wie „Opt-Gruppe“ und „Mehrfachauswahl“ zu erleichtern, ist die Option -Tag kann innerhalb des verwendet werden. Tag bzw..

Syntax von Tag auswählen in HTML

Auswahl-Tag kann Tag.

Die Syntax für dieses Tag lautet wie folgt:

<select>
<option> Value  </option>
<option> Value  </option>
</select>

Die obige Syntax Auch das Einfügen eines Tags in die Auswahlliste ist möglich. Diese Syntax ist dieselbe wie die normale Tag dient dazu, eine Optionsgruppe in der Liste zu erstellen. Es werden mehrere Optionen als Gruppe erstellt und die Gruppenüberschrift wird in Fettschrift angezeigt.

Die Syntax hierfür lautet wie folgt:

<select >
<optgroup label  = "labelname">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</select>

Größe: Die obige Syntax kann auch die Größe definieren, sodass nur definierte Größen angezeigt werden

Option nur das ist wie folgt:

<select value="" size="4">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

automatisches Ausfüllen: Wählen Sie das Tag aus, das auch zum automatischen Ausfüllen der Feldwerte wie folgt verwendet wird:

<select >
<option value=" " autocomplete="off"> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Autofokus: Wir können uns wie folgt jeweils auf eine bestimmte Option aus der Liste konzentrieren. Auf einer einzelnen Seite kann nur ein Autofokus verwendet werden.

<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Link: Tag auswählen wird verwendet, um den Formularlink über die angegebene Option zu öffnen, wie in der folgenden Syntax definiert:

<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>

erforderlich: Diese Option im Select-Tag definiert eine obligatorische Option aus der definierten Liste vor der eigentlichen Übermittlung des Formulars.

<select name="value" required>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Platzhalter: Wie wir wissen, wird bei Verwendung einer Auswahlbezeichnung die erste Option als Standardoption betrachtet. Wenn wir jedoch eine Option als Standard anzeigen möchten, können wir das ausgewählte Schlüsselwort festlegen zur spezifischen Option wie folgt:

<select name="value" >
<option value=" "> Content Name </option>
<option value=" " selected> Content Name </option>
</select>

deaktiviert: ein weiterer nützlicher Trick in der Option zum Auswählen des Tags zum Anzeigen im deaktivierten Format wie folgt:

Mit dieser Option kann die Option angezeigt werden, es ist jedoch nicht möglich, Maßnahmen zu ergreifen.

<select name="value" >
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>

Beispiele für „Tag auswählen“ in HTML

Hier sind die folgenden Beispiele.

Beispiel #1

In diesem Beispiel zeigen wir ein einfaches Select-Tag als Auswahlliste, Optgroup und zum gleichzeitigen Auswählen mehrerer Optionen, wie unten gezeigt:

Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div-container {
display: table;
width: 100%;
}
.block {
display: table-cell;
padding: 10px;
}
</style>
</head>
<body>
<div class="div-container">
<div class="block">
<h4>Simple Select tag </h4>
<select name="Web Languages">
<option> HTML 5  </option>
<option> CSS 3</option>
<option> Bootstrap  </option>
<option>Angular </option>
<option> React JS </option>
<option> Vue JS</option>
<option>Python  </option>
<option>PHP</option>
</select> <br>
</div>
<div class="block" >
<h4>Optgroup Select tag </h4>
<select>
<optgroup label="2 wheeler">
<option value="Honda">Shine</option>
<option value="Suzuki">Access</option>
</optgroup>
<optgroup label="4 wheeler">
<option value="m">Mercedes</option>
<option value="o">Audi</option>
</optgroup>
</select>
</div>
<div class="block" >
<h4>Multiple Selection in Select tag </h4>
<select multiple>
<option> Green  </option>
<option> Orange</option>
<option> Blue </option>
<option>Red </option>
<option> Yellow </option>
</select>
</div>
</div>
</body>
</html>

Ausgabe:

Wählen Sie „Tag in HTML' aus

Beispiel #2

Dieses Beispiel definiert, wie über den Link über