Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML-Tipps für Webentwickler: Jede Woche neu

optgroup

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
06:39
  Lesezeichen setzen

Transkript

Auswahllisten sind praktisch, weil der Benutzer selbst keine Eingaben machen muss, sondern aus einer Liste wählen kann. Das reduziert Fehler und geht schneller. In diesem Tipp zeige ich Ihnen, wie Sie solche Listen richtig strukturieren und gestalten. Das ist eine Auswahlliste, mit einem zugehörigen Label-Element, die Auswahlliste besteht aus einem select-Element und den einzelnen Optionen, die es verknüpft, üblicherweise natürlich mit einem label-Element und das label-Element hat beim "for" denselben Wert, den meine Auswahlliste bei der "id" hat, und dadurch ist ein eindeutiger Bezug zwischen den Beiden hergestellt. Sehen wir uns das kurz an. Das ist meine Auswahlliste. Diese kann ich und in diesem Fall wäre das natürlich auch sinnvoll, jetzt strukturieren, indem ich "optgroup" einsetze. Dafür verwende ich das Element "optgroup" und das muss ich dann auch wieder beenden, wo die Gruppe aufhören soll, sinnvollerweise an dieser Stelle, und ich ergänze eine weitere Optgroup, für die Optionen 2.1 und 2.2 und schließe die ebenfalls und ich schreibe eine Dritte für die Optionen 3.1 bis 3.3. Mein Editor hat mir schon netterweise auch die Labels ergänzt, diese sind wichtig für die Beschriftung. Also das ist die Gruppe 1, Gruppe 2 und Gruppe 3. Wenn wir das jetzt im Browser ansehen, sehen wir nun, dass unsere Auswahlliste unterteilt ist, und die Namen, die an dieser Stelle stehen, kommen aus dem label-Attribut. Ich kann diese Beschriftung natürlich nicht selbst auswählen, sondern nur die einzelnen option-Elemente. Bei Bedarf kann ich auch eine Optgroup als "disabled" kennzeichnen, dann kann sie nicht ausgewählt werden. Ist dann auch so leicht grau angezeigt und ich kann sie nicht mehr auswählen. Sinnvoll wäre das beispielsweise, wenn sie JavaScript gesteuert, je nachdem, was wirklich zur Auswahl steht, dann eben auch einzelne Teile deaktivieren, weil sie im gegebenen Kontext nicht relevant sind. Noch einen Hinweis, Sie können derzeit keine Tiefe verschachtelten Listen auf diese Art erstellen, Sie können nicht innerhalb einer Optgroup wiederum eine Optgroup nutzen, diese Option gibt es derzeit nicht. Kommen wir nun zu den Gestaltungsmöglichkeiten. Sie können einfache Gestaltung machen, das zeige ich an dieser Stelle mit Inline, Styles, um zu zeigen, was wirkt, und dann ist es so, wie man auch erwarten würde, wenn Sie eine Angabe bei Optgroup machen, dann gilt die natürlich auch für das Kindelement, sofern es eine Angabe, wie die Farbe ist, die vererbt wird. Wenn wir uns das ansehen, dann sieht man deutlich die Farben wurden alle übernommen. Wenn Sie jetzt mehr gestalten wollen bei solchen Auswahllisten, dann haben Sie immer ein Problem, und zwar, dass dieser Auswahlbutton kommt vom Browser, teilweise aus den Tiefen des Betriebssystems, und wenn Sie diesen anders haben wollen, müssen Sie erst einmal die Standardformatierung entfernen. Sehen wir uns an, wie das funktioniert. Bei dieser Formatierung habe ich bei Bootstrap 4 gespickt, wie die das dort machen, das sieht dann derzeit so aus, dabei sehen Sie, dass das Standardelement zur Auswahl nicht mehr da ist, und stattdessen habe ich ein selbst definiertes Element eingefügt, sowie das an dieser Stelle bei Bootstrap zu sehen ist. Wie funktioniert das jetzt? Sehen wir uns die Formatierungen an. Ich wähle meine select-Liste aus, hier global, normalerweise würden Sie wohl eine Klasse ergänzen, es kommen ein paar allgemeine Formatierungen und dann ganz zentral definiere ich ein Hintergrundbild, das ist in diesem Fall per SVG und das sind diese kleinen Pfeile, die Sie gesehen haben, dann muss ich noch dafür sorgen, dass die Standardformatierung nicht angezeigt wird. Und das mache ich für den Firefox über "-moz-apperance:None" und für WebKit, das heißt für Chrome, mache ich es beispielsweise mit "-webkit-apperance:None". Außerdem für den Internet Explorer, also den Internet Explorer 10 oder 11, da muss ich eine Sonderangabe machen und dieses "-ms-expand" auf "display:none" setzen. Wenn ich nämlich diese Angabe nicht habe, das zeige ich einmal in den Entwicklertools, wenn ich dieses Apperance einmal entferne, dann sehen Sie, dass da weiterhin der normale Auswahlbutton angezeigt wird. Das heißt, ich muss "apperance:None" angeben, damit dieser ausgeblendet wird. Das funktioniert dann in den verschiedenen Browsern, Sie sehen beispielsweise Edge an dieser Stelle oder Chrome oder hier auch Internet Explorer 11. Wenn Sie Auswahllisten formatieren wollen, müssen Sie also immer die Standardformatierung deaktivieren, auf unterschiedliche Arten und außerdem sollten Sie bei größeren Auswahllisten unbedingt "optgroup" einsetzen, da ist wichtig das label-Attribut, das ist dann der sichtbare Text, und bei Bedarf können Sie solche Optgroups auch auf "disabled" setzen, dann kann der Benutzer sie nicht auswählen.