HTML/Formulare/Auswahllisten
Inhaltsverzeichnis
Auswahllisten definieren[Bearbeiten]
Sie können dem Anwender eine Liste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.
<select …> leitet eine Auswahlliste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name, damit ihr Wert von der Zielseite verarbeitet werden kann.
label-Element hinzufügen. Insbesondere Nutzer mit assistiven Technologien könnten sonst unter Umständen Ihr Formular nicht mehr benutzen.Mit dem Attribut size bestimmen Sie 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 Sie size="1" angeben oder das Attribut ganz weglassen, definieren Sie eine so genannte „Dropdown-Liste“.
Mit <option>…</option> definieren Sie zwischen dem einleitenden <select>-Tag und dem Abschluss-Tag </select> 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.
Mit Hilfe von JavaScript können Sie Auswahllisten auch „zweckentfremden“, um Verweise innerhalb Ihres Projekts zu realisieren. Diese Möglichkeit kann aber erhebliche Einbußen bei der Zugänglichkeit oder Bedienbarkeit Ihrer Seite bedeuten, wenn Sie ansonsten keine andere Form der Navigation (z.B. durch reguläre Hyperlinks) anbieten.
Auswahllisten mit Mehrfachauswahl[Bearbeiten]
Wenn Sie nichts anderes angeben, kann der Anwender aus einer Auswahlliste genau einen Eintrag auswählen. Sie können eine Mehrfachauswahl erlauben.
Die Mehrfachauswahl einer Auswahlliste erlauben Sie durch das zusätzliche Attribut multiple im einleitenden <select>-Tag.
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.
multiple="multiple" notieren. Weitere Informationen dazu im Kapitel XHTML und HTML.Für PHP-Nutzer der Hinweis: Das automatische Anlegen eines Arrays funktioniert nur, wenn der Name des Feldes mit eckigen Klammern endet: name="zutaten[]". Beachten Sie wegen dieses Namens auch die Hinweise für den Zugriff mit JavaScript (Beispiel 4).
Einträge vorselektieren[Bearbeiten]
Wenn Sie nichts anderes angeben, ist zunächst kein Eintrag einer Auswahlliste vorselektiert. Sie können einen Eintrag vorselektieren. In Verbindung mit Mehrfachauswahl können Sie auch mehrere Einträge vorselektieren. Vorselektierte Einträge haben einen sichtbaren Markierungsbalken.
Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im einleitenden <option>-Tag des betreffenden Eintrags das Attribut selected an.
selected="selected" notieren. Weitere Informationen dazu im Kapitel XHTML und HTML.Mit der JavaScript-Eigenschaft options.selected können Sie das selected-Attribut auslesen oder ändern.
Absendewert von Einträgen bestimmen[Bearbeiten]
Normalerweise wird beim Absenden des Formulars der Text eines ausgewählten Listeneintrags übertragen, der zwischen <option> und </option> notiert ist. Sie können jedoch bestimmen, dass intern ein anderer Text übertragen wird.
<form>
<p>Ihre Pizza-Bestellung:</p>
<label>Pizza
<select name="Pizza" size="5" onchange="alert(this.value)">
<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>
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.
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.
Verschachtelte Auswahllisten (Menüstruktur) definieren[Bearbeiten]
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 und XHTML 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.
