So richten Sie das HTML-Dropdown-Feld ein

HTML (Hypertext Markup Language) ist eine häufig verwendete Webentwicklungssprache und auf Webseiten sind häufig Dropdown-Felder erforderlich. Ein Dropdown-Feld ist ein häufig verwendetes interaktives Steuerelement, mit dem Benutzer normalerweise eine von mehreren Optionen auswählen können. Das Einrichten einer Dropdown-Box in HTML ist sehr einfach. In diesem Artikel erfahren Sie, wie Sie eine HTML-Dropdown-Box einrichten.

So richten Sie das HTML-Dropdown-Feld ein

Das HTML-Dropdown-Feld wird über das -Tag erstellt und seine Syntax lautet wie folgt: # 🎜🎜#

<select>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
……
</select>

wobei die Bezeichnung jede Dropdown-Box-Option darstellt, ihr Wertattribut verwendet wird, um den Wert der Option bei der Verarbeitung von Formulardaten im Hintergrund zu identifizieren, und die Die Beschriftung wird verwendet, um alle Optionen zu umgeben.

Das Folgende ist ein einfaches Beispiel für ein Dropdown-Feld:

<select>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

Dieser Code generiert ein Dropdown-Feld mit drei Optionen.

Attribute des Dropdown-Felds

Durch das Hinzufügen von Attributen können Sie verschiedene Attribute des Dropdown-Felds festlegen, z. B. die Auswahl einer Option und das Festlegen der Größe des Dropdown-Box usw.

Im Folgenden sind einige häufig verwendete Attribute aufgeführt:

ausgewähltes Attribut

1. <option selected value="选项1">选项1</option>

ausgewähltes Attribut kann zum Festlegen verwendet werden Dropdown-Felder Die Standardoption. Wenn das ausgewählte Attribut nicht festgelegt ist, ist die Standardoption die erste Option.

Mehrfachattribut

2. <select multiple>
   <option value="选项1">选项1</option>
   <option value="选项2">选项2</option>
   <option value="选项3">选项3</option>
   </select>

Das Mehrfachattribut kann dafür sorgen, dass das Dropdown-Feld Mehrfachauswahlen unterstützt. Sobald mehrere Optionen ausgewählt sind, können Sie die Auswahl aufheben, indem Sie die Strg-Taste gedrückt halten und auf die Optionen klicken.

Größenattribut

3. <select size="5">
   <option value="选项1">选项1</option>
   <option value="选项2">选项2</option>
   <option value="选项3">选项3</option>
   </select>

Das Größenattribut kann die Anzahl der Optionen festlegen, die im Dropdown-Feld angezeigt werden können. Wenn die Anzahl der Optionen die angegebene Anzahl überschreitet, wird eine Bildlaufleiste angezeigt, um zusätzliche Optionen anzuzeigen.

deaktiviertes Attribut

4. <select disabled>
   <option value="选项1">选项1</option>
   <option value="选项2">选项2</option>
   <option value="选项3">选项3</option>
   </select>

Das deaktivierte Attribut kann dazu führen, dass das Dropdown-Feld nicht verfügbar ist und der Benutzer keine Auswahl treffen kann.

Namensattribut

5. <select name="mySelect">
   <option value="选项1">选项1</option>
   <option value="选项2">选项2</option>
   <option value="选项3">选项3</option>
   </select>

Das Namensattribut wird verwendet, um den Namen des Dropdown-Felds anzugeben. Dieses Attribut wird normalerweise für das Formular verwendet Übermittlung oder Zugriff im JavaScript-Dropdown-Feld.

onchange-Attribut

6. <select onchange="myFunction()">
   <option value="选项1">选项1</option>
   <option value="选项2">选项2</option>
   <option value="选项3">选项3</option>
   </select>

onchange-Attribut kann verwendet werden, um die Verarbeitungsfunktion festzulegen, nachdem die Dropdown-Box-Option geändert wurde.

Das Obige ist die Einstellungsmethode des HTML-Dropdown-Felds. Ich hoffe, dass die Leser es beherrschen.

Das obige ist der detaillierte Inhalt vonSo richten Sie das HTML-Dropdown-Feld ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!