Wie erstellen Sie Dropdown -Listen mit dem & lt; auswählen & gt; und & lt; Option & gt; Tags?-HTML-Tutorial-php.cn

Wie erstellen Sie Dropdown -Listen mithilfe der Tags

Durch das Erstellen einer Dropdown -Liste in HTML werden die Tags <select></select> und <option></option> verwendet. Das Element <select></select> fungiert als Container für die Dropdown, während jedes <option></option> Element ein Element in der Dropdown -Liste darstellt.

Hier finden Sie eine Schritt-für-Schritt-Anleitung zum Erstellen einer grundlegenden Dropdown-Liste:

Beginnen Sie mit dem <select></select> -Tag:
Das <select></select> -Tag ist das äußerste Element, das eine Dropdown -Liste definiert. Es kann verschiedene Attribute haben, wie z. B. name , die nach der Übermittlung der Formulardaten verwendet werden.
```
 <code class="html"><select name="fruits">  </select></code>
```
Nach dem Login kopieren
Nach dem Login kopieren
Fügen Sie <option></option> Tags in die <select></select> hinzu:
Jede <option></option> stellt im Dropdown -Bereich ein ausgewählbares Element dar. Sie können einen Wert mit dem value -Attribut angeben, das bei der Übermittlung des Formulars gesendet wird. Wenn das value -Attribut weggelassen wird, wird der Textinhalt der <option></option> stattdessen gesendet.
```
 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
Nach dem Login kopieren
Legen Sie optional eine Standardoption aus:
Um eine Standardoption für die ausgewählte Standardeinstellung festzulegen, können Sie das selected Attribut für die vorgewählte <option></option> verwenden.
```
 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <option value="cherry">Cherry</option> </select></code>
```
Nach dem Login kopieren

Mit dieser Grundstruktur können Sie eine funktionale Dropdown -Liste erstellen, mit der Benutzer interagieren können, um ihre bevorzugte Option auszuwählen.

Kann ich einer Dropdown -Liste mehrere Auswahlen hinzufügen?

Ja, Sie können mehrere Auswahlmöglichkeiten in einer Dropdown -Liste aktivieren, indem Sie das multiple auf dem Tag <select></select> verwenden. Wenn dieses Attribut vorhanden ist, können Benutzer mehr als eine Option aus der Liste auswählen.

Hier erfahren Sie, wie Sie eine Dropdown-Liste mit mehreren Selekten implementieren:

Fügen Sie das multiple Attribut zum <select></select> -Tag hinzu:

 <code class="html"><select name="fruits" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

Nach dem Login kopieren

Geben Sie optional die Größe an:
Um mehr als eine Option gleichzeitig anzuzeigen, können Sie das size auf dem <select></select> -Tag einstellen. Wenn size größer als 1 ist, wird der Dropdown zu einem Listenfeld, in dem angezeigt wird, dass viele Optionen ohne Scrollen erforderlich sind.
```
 <code class="html"><select name="fruits" multiple size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
Nach dem Login kopieren

Mit dem multiple können Benutzer mehrere Optionen auswählen, indem sie die Taste Ctrl (Windows) oder Cmd (MAC) gedrückt halten, während Sie auf Optionen klicken. Die ausgewählten Werte werden als Array mit dem gleichen Namensattribut eingereicht, wenn das Formular eingereicht wird.

Wie style ich eine Dropdown -Liste, um das Design meiner Website zu entsprechen?

Das Stylen einer Dropdown -Liste, die dem Design Ihrer Website entspricht, kann über CSS erreicht werden. Da Dropdown -Listen Formularelemente sind, sind einige Eigenschaften nicht direkt stilbar, aber es gibt noch viele Möglichkeiten, ihr Erscheinungsbild anzupassen.

Hier ist eine Anleitung zum Stil einer Dropdown -Liste:

Grundlegendes Styling für das <select></select> -Tag:

Sie können das <select></select> -Element selbst so stylen, um seine Größe, Schriftart, Rand und Hintergrund anzupassen.
```
 <code class="css">select { width: 200px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('arrow.png') 96% / 15% no-repeat #eee; }</code>
```
Nach dem Login kopieren
Beachten Sie die Verwendung des appearance: none zum Entfernen der Standard -Browserstile und ein benutzerdefiniertes Pfeilbild für die Dropdown -Anzeige.
Styling der <option></option> -Elemente:

Styling <option></option> Elemente ist begrenzter. Sie können einige Eigenschaften ändern, aber die vollständige Anpassung ist jedoch aufgrund von Sicherheitsbeschränkungen für alle Browser nicht möglich.
```
 <code class="css">option { font-weight: normal; display: block; white-space: nowrap; min-height: 1.2em; padding: 0px 2px 1px; }</code>
```
Nach dem Login kopieren
Styling bei Auswahl:

Sie können das Element <select></select> stylen, wenn es sich im Fokus befindet oder wenn eine Option ausgewählt ist.
```
 <code class="css">select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); }</code>
```
Nach dem Login kopieren
Responsive Design:

Sie können Medienabfragen verwenden, um das Styling für verschiedene Bildschirmgrößen anzupassen.
```
 <code class="css">@media (max-width: 600px) { select { width: 100%; } }</code>
```
Nach dem Login kopieren

Denken Sie daran, dass die Browserkompatibilität variieren kann. Testen Sie daher immer Ihre gestalteten Dropdowns auf verschiedenen Browsern und Geräten.

Was werden einige gängige Attribute mit dem Tag

Mit dem Tag <select></select> -Tags können mehrere Attribute verwendet werden, um sein Verhalten zu steuern und zusätzliche Informationen bereitzustellen. Hier sind einige der häufigsten:

Name:
Gibt den Namen des Steuerelements an, der mit den Formulardaten gesendet wird, wenn das Formular eingereicht wird.
```
 <code class="html"><select name="fruits">  </select></code>
```
Nach dem Login kopieren
Nach dem Login kopieren

mehrere:
Ermöglicht dem Benutzer, mehr als eine Option auszuwählen.

 <code class="html"><select name="fruits" multiple> <!-- Options go here --> </select></code>

Nach dem Login kopieren

Größe:
Definiert die Anzahl der sichtbaren Optionen in der Dropdown -Liste. Wenn size größer als 1 ist, wird es zu einem Listenfeld anstelle eines Dropdowns.
```
 <code class="html"><select name="fruits" size="3">  </select></code>
```
Nach dem Login kopieren
deaktiviert:
Deaktiviert das Element auswählen und verhindern die Benutzerinteraktion.
```
 <code class="html"><select name="fruits" disabled>  </select></code>
```
Nach dem Login kopieren

erforderlich:
Gibt an, dass der Benutzer eine Option auswählen muss, bevor das Formular eingereicht wird.

 <code class="html"><select name="fruits" required> <option value="">Select a fruit</option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select></code>

Nach dem Login kopieren

Autofokus:
Setzt sich automatisch den Fokus auf das Element <select></select> , wenn die Seite geladen wird.
```
 <code class="html"><select name="fruits" autofocus>  </select></code>
```
Nach dem Login kopieren

Diese Attribute können die Funktionalität und Benutzererfahrung Ihrer Dropdown-Listen verbessern und sie vielseitiger und benutzerfreundlicher machen.

Das obige ist der detaillierte Inhalt vonWie erstellen Sie Dropdown -Listen mit dem & lt; auswählen & gt; und & lt; Option & gt; Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!