HTML/Formulare/Auswahllisten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Auswahllisten definieren

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0

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.

<form action="select.html"> <select name="top5" size="5"> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>

<select ...> leitet eine Auswahlliste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.

Mit dem Attribut size bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. 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 mit die Breite mit CSS).

Mit Hilfe von JavaScript können Sie Auswahllisten auch „zweckentfremden“, um Verweise innerhalb Ihres Projekts zu realisieren.

[Bearbeiten] Auswahllisten mit Mehrfachauswahl

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0

Wenn Sie nichts anderes angeben, kann der Anwender aus einer Auswahlliste genau einen Eintrag auswählen. Sie können eine Mehrfachauswahl erlauben.

<form action="#"> <select name="top5" size="5" multiple> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>

Die Mehrfachauswahl einer Auswahlliste erlauben Sie durch das zusätzliche Attribut multiple im einleitenden <select>-Tag.

Eine Mehrfachauswahl ist für Anwender nicht unmittelbar erkennbar. Deshalb sollten Sie darauf hinweisen, wenn mehrere Einträge auswählbar sind. Auch ist nicht allen Anwendern klar, wie sie mehrere Einträge selektieren können. 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.

Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut in der Form 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).

[Bearbeiten] Einträge vorselektieren

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0

Wenn Sie nichts anderes angeben, ist zunächst kein Eintrag einer Auswahlliste vorselektiert. Sie können einen Eintrag vorselektieren. In Verbindung mit LINKME Mehrfachauswahl können Sie auch mehrere Einträge vorselektieren. Vorselektierte Einträge haben einen sichtbaren Markierungsbalken.

<form action="#"> <select name="top5" size="5"> <option>Heino</option> <option>Michael Jackson</option> <option selected>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>

Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im einleitenden <option>-Tag des betreffenden Eintrags das Attribut selected an.

Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut in der Form selected="selected" notieren. Weitere Informationen dazu im Kapitel XHTML und HTML.

[Bearbeiten] 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. Sie können jedoch bestimmen, dass intern ein anderer Text übertragen wird.

<form action="#"> <p>Ihre Pizza-Bestellung:</p> <select name="Pizza" size="5" onchange="alert(this.form.Pizza.options[this.form.Pizza.selectedIndex].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 de la Casa</option> <option value="P108">Pizza Calzone</option> <option value="P109">Pizza con tutti</option> </select> </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.

[Bearbeiten] 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:

Auswahllisten Menüstruktur.png

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):

Auswahllisten Menüstruktur Opera.png

Beispiel
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Verschachtelte Auswahllisten (Menüstruktur) definieren</title> </head> <body> <h1>Wählen Sie Ihren Lieblingsnamen!</h1> <form action="select_optgroup.htm"> <p>Zur Auswahl stehen:</p> <p> <select name="Namen" size="6"> <optgroup label="Namen mit A"> <option label="Anna">Anna</option> <option label="Achim">Achim</option> <option label="August">August</option> </optgroup> <optgroup label="Namen mit B"> <option label="Berta">Berta</option> <option label="Barbara">Barbara</option> <option label="Bernhard">Bernhard</option> </optgroup> <optgroup label="Namen mit C"> <option label="Caesar">Caesar</option> <option label="Christiane">Christiane</option> <option label="Christian">Christian</option> </optgroup> </select> </p> </form> </body> </html>

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.


Beachten Sie: Eine Menüverschachtelung über mehrere Ebenen ist daher derzeit nicht realisierbar, auch wenn diese Möglichkeit mit den Worten "könnte eventuell später mal kommen" im HTML-Standard eingeräumt wird.

Alle Browser zeigen lediglich eine hervorgehobene Überschrift, wie im zweiten Bild.

Die meisten Browser ignorieren die Angabe des label-Attributs innerhalb von <option> und zeigen nur den normalen Text an.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke