HTML/Tutorials/Formulare/Auswahllisten
Text-Info
- 20min
- einfach
- Kenntnisse in
● HTML-Formulare
● CSS
Sie können dem Anwender mit dem select-Element eine Auswahliste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann. Diese Einträge werden innerhalb eines option-Elements notiert. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.
Inhaltsverzeichnis
Anwendungsbeispiele
Das select-Element zeichnet Auswahllisten aus.
Folgende Attribute sollten / können hinzugefügt werden:
-
name: interner Bezeichnername, damit ihr Wert von der Zielseite verarbeitet werden kann. -
size: bestimmt die Anzeigegröße der Liste, also die Anzahl der Zeilen bzw. gleichzeitig anzuzeigenden Einträge. Wenn die Liste mehr Einträge enthält als angezeigt werden, kann der Anwender in der Liste scrollen. Wenn Siesize="1"angeben oder das Attribut ganz weglassen, definieren Sie eine so genannte „Dropdown-Liste“.
label-Element hinzufügen. Insbesondere Nutzer mit assistiven Technologien könnten sonst unter Umständen Ihr Formular nicht mehr benutzen.Mit option definieren Sie jeweils einen Eintrag der Auswahlliste. Hinter <option> muss der Text des Listeneintrags stehen. Sie können so viele Listeneinträge definieren, wie Sie wollen. Ein Abschluss-Tag </option> ist zwar optional, im Hinblick auf verarbeitende Programmiersprachen aber dringend zu empfehlen.
Die Breite der Listenanzeige wird automatisch ermittelt, abhängig vom längsten Eintrag an, es sei denn, Sie formatieren die Breite mit CSS.
Auswahllisten mit Mehrfachauswahl
Wenn Sie nichts anderes angeben, kann der Anwender aus einer Auswahlliste genau einen Eintrag auswählen. Sie können mit dem multiple-Attribut eine Mehrfachauswahl erlauben.
Falls Sie für eine spezielle Zielgruppe dennoch Mehrfachauswahl verwenden, sollten Sie darauf hinweisen, dass mehrere Einträge auswählbar sind. Auf modernen PC-Tastaturen geschieht das normalerweise durch Halten der Strg-Taste bei gleichzeitigem Anklicken der gewünschten Listeneinträge. Macintosh-Benutzer verwenden dafür die Befehlstaste.
Bitte beachten Sie auch, dass die Notation von [] im Namen des select Elements abhängig davon ist, wie Sie die Formulardaten auf dem Webserver verarbeiten. Wenn Sie PHP benutzen, sind die eckigen Klammern unbedingt erforderlich, weil Sie andernfalls nur einen der ausgewählten Werte in $_POST oder $_GET vorfinden. Durch die Klammern erzeugt PHP im $_GET bzw. $_POST Array ein Subarray mit den ausgewählten Werten. Sie finden dazu an dieser Stelle Hinweise im PHP Handbuch. Andere Programmiersprachen machen das möglicherweise anders.
Sollten Sie das select Element mittels JavaScript über seinen Namen ansprechen wollen, so beachten Sie bitte die Hinweise für den Zugriff mit JavaScript; ein Name wie "top5[]" ist nur über die Indexschreibweise (Schema 4) erreichbar.
Einträge vorselektieren
Wenn Sie nichts anderes angeben, ist zunächst kein Eintrag einer Auswahlliste vorselektiert. Sie können einen Eintrag mit dem selected-Attribut vorselektieren. Vorselektierte Einträge haben einen sichtbaren Markierungsbalken.
In Verbindung mit Mehrfachauswahl können Sie auch mehrere Einträge vorselektieren.
Mit der JavaScript-Eigenschaft options.selected können Sie das selected-Attribut auslesen oder ändern.
select und JavaScript
Absendewert von Einträgen bestimmen
Normalerweise wird beim Absenden des Formulars der Text eines ausgewählten Listeneintrags übertragen, der zwischen <option> und </option> notiert ist.
Um für einen Eintrag der Auswahlliste einen anderen Absendewert zu bestimmen, geben Sie im einleitenden <option>-Tag des betreffenden Eintrags das Attribut value an (value = Wert). Als Wert weisen Sie den gewünschten Absendewert zu. Beim Absenden des Formulars wird dann der hier bestimmte Text eines ausgewählten Eintrags übertragen, nicht der Text, der dem Anwender beim Listeneintrag angeboten wurde.
<script>
document.addEventListener('DOMContentLoaded', function () {
document.Testform.Pizza.addEventListener('change', CheckAuswahl);
function CheckAuswahl () {
var menu = document.Testform.Pizza;
document.querySelector('output').innerHTML = menu.options[menu.selectedIndex].value;
}
});
</script>
<form name="Testform">
<label>Bitte wählen Sie Ihre Pizza-Bestellung:
<select name="Pizza" size="9">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Funghi</option>
<option value="P103">Pizza Mare</option>
<option value="P104">Pizza Tonno</option>
<option value="P105">Pizza Mexicana</option>
<option value="P106">Pizza Regina</option>
<option value="P107">Pizza della Casa</option>
<option value="P108">Pizza Calzone</option>
<option value="P109">Pizza con tutto</option>
</select>
</label>
</form>
Im obigen Beispiel ist im einleitenden <select>-Tag ein so genannter Event-Handler notiert. Diesem wird im Beispiel eine JavaScript-Anweisung zugewiesen, die bewirkt, dass ein Meldungsfenster den internen Absendewert des Eintrags zur Kontrolle ausgibt, sobald der Anwender einen Eintrag selektiert.
select und CSS
Die Gestaltung mit CSS ist bei select-Menüs nur begrenzt möglich. Sie übernehmen ihr Aussehen vom Betriebssystem des Nutzers. Auf mobilen Geräten werden sie sogar aus der Seite herausgelöst und in einem eigenen Popup dargestellt.
Die CSS-Eigenschaft appearance (engl. Aussehen, Erscheinung) sollte es ursprünglich ermöglichen, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen. Die Umsetzung ist aber nicht zufriedenstellend.
select {
display: block;
font-size: 1.5em;
padding: .6em 1.4em .5em .8em;
width: 20em;
max-width: 100%; /* useful when width is set to anything other than 100% */
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgb(0 0 0 / .04);
border-radius: .5em;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082,0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right .7em top 50%, 0 0;
/* icon size, then gradient */
background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
select::-ms-expand {
display: none;
}
Alternativ könnten Sie ein Menu mit Radio-Buttons realisieren, diese mit CSS verstecken und die dazugehörigen label-Elemente entsprechend stylen.
- macrone.de: Das HTML Select-Element: Styling mit pure CSS
- css-tricks: Styling a Select Like It’s 2019
Verschachtelte Auswahllisten (Menüstruktur) definieren
Eine verschachtelte Auswahlliste sollte ein Web-Browser nicht wie üblich als einfache Auswahlliste anzeigen, sondern als verschachtelte Menüstruktur. Anwender moderner grafischer Oberflächen kennen solche verschachtelten Menüs. Das Startmenü vieler Betriebssysteme ist beispielsweise ein solches Menü. So in etwa ist es gedacht:
Die meisten aktuellen Browser beschränken sich bei der Darstellung jedoch auf eine visuelle Unterscheidung der Untergruppen (als Beispiel ein Screenshot aus Opera 8.5):
Für eine verschachtelte Menüstruktur definieren Sie Untergruppen von Auswahllisten. Dazu notieren Sie innerhalb von <select> und </select> für jede gewünschte Untergruppe ein optgroup-Element. Zwischen dem einleitenden <optgroup>-Tag und dem Abschluss-Tag </optgroup> notieren Sie jeweils eine Untergruppe von Einträgen. Im einleitenden <optgroup>-Tag vergeben Sie mit dem Attribut label eine Menübeschriftung für die Gruppe von Einträgen. Diese wird als Menüauswahl (wie im oberen Grafikbeispiel) oder als nicht selbst auswählbare Überschrift (wie im unteren Grafikbeispiel) angezeigt.
Für die Einträge innerhalb einer Untergruppe notieren Sie jeweils ein option-Element. Auch hierbei können Sie den anzuzeigenden Menüeintrag mit dem Attribut label bestimmen.
Die Werte, die Sie hinter <option> notieren, sind für die Menüdarstellung ohne Belang. Es ist jedoch wichtig, sie zu notieren, denn Browser, welche die Menüdarstellung nicht beherrschen, zeigen stattdessen eine gewöhnliche Auswahlliste mit den Einträgen an, die Sie hinter den <option>-Tags angeben.
Mit <optgroup> ist in HTML nur eine einzige tiefere Ebene möglich, innerhalb eines optgroup-Elements darf kein weiteres optgroup-Element vorkommen.
label-Attributs innerhalb von <option> und zeigen nur den normalen Text an.Siehe auch
- JavaScript und Formulare
- JavaScript/DOM/Document/forms/elements/options
- change-Event
