Zum Inhalt der Seite


FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN Startseite > ~xx502 > Forms > Lektion23

Web Formulare

Kapitel 23 - Menü

Menüs sind zwar ab HTML-Version 4 definiert, IE und Netscape interpretieren diesen Tag jedoch nicht!

Die folgenden Befehle sollte ein WWW-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ü von Windows ist beispielsweise ein solches Menü.

<form>
<select name="Namen" size="5">
<optgroup label="Vornamen mit A">
<option value="Anna" label="Anna"> Anna</option>
<option value="Achim" label="Achim"> Achim</option>
<option value="August" label="August"> August</option>
</optgroup>
<optgroup label="Namen mit B">
<option value="Berta" label="Berta"> Berta</option>
<option value="Barbara" label="Barbara"> Barbara</option>
<option value="Bernhard" label="Bernhard"> Bernhard</option>
</optgroup>
<optgroup label="Namen mit C">
<option value="Caesar" label="Caesar"> Caesar</option>
<option value="Christiane" label="Christiane"> Christiane</option>
<option value="Christian" label="Christian"> Christian</option>
</optgroup>
</select>

</form>

Ein WWW-Browser sollte eine solche Menüstruktur laut HTML-Standard in etwa so darstellen:

Menüstruktur

Du mußt für eine solche verschachtelte Menüstruktur Untergruppen von Auswahllisten definieren. Notiere dazu innerhalb von <select> und </select> für jede gewünschte Untergruppe das Tag <optgroup> und am Ende der Untergruppe das Abschluß-Tag </optgroup>.
Im einleitenden <optgroup>-Tag enthält die Eigenschaft label einen Namen für die Gruppe von Einträgen. Dieser Eintrag wird angezeigt, wenn der Browser das Menü in dieser Weise interpretiert. Die Angabe muß in Anführungszeichen stehen.

Für die Einträge innerhalb einer Untergruppe notiere jeweils ein <option>-Tag. Auch hierbei kannst du den angezeigten Menüeintrag mit dem Attribut label= bestimmen.

Die Werte, die hinter <option> notiert werden, sind für die Menüdarstellung ohne Belang. Es ist jedoch wichtig, sie zu notieren, denn Browser, die die Menüdarstellung nicht beherrschen, zeigen stattdessen eine gewöhnliche Auswahlliste mit den Einträgen an, die hinter den <option>-Tags angeben sind.

Hinweis:
Wenn Du Unter-Untermenüs realisieren willst, notiere einfach innerhalb von <optgroup>...</optgroup> an der gewünschten Stelle einen weiteren Bereich mit <optgroup>...</optgroup>.


Schade, dass die bekanntesten Browser diese Menüs nicht beherrschen :-((
Und weiter gehts zum nächsten Kapitel. Nicht nur als Vorgriff auf das übernächste Kapitel kann die Zuordnung der Beschriftung zum Formularelement hilfreich sein.


Zurück Elemente gruppieren Zum Inhaltsverzeichnis Inhalt Weiter Formulare