HTML Formulare - Arbeiten mit Fieldset, legend und label
Original veröffentlicht unter “fieldset, legend and label” auf der Seite Quirksmode.org.Der Autor ist Peter Paul Koch.
Immer noch zu selten trifft man heute im Internet auf benutzerfreundliche Formulare, stattdessen ganze Landschaften von durcheinander gewürfelte Input felder, Textbeschreibung, Popuplinks für Hinweise und tonnenweise von Tables, um die Formfelder richtig zu positionieren.
In diesem Beitrag möchte ich die grundlegende Möglichkeiten, gegeben durch die HTML elemente , und vorstellen, die eigentlich jeder Webentwickler auch anwenden sollte.
Erstmal ein stück Code, wie jeder sie kennt und so siehts aus
Nun die Version mit fieldset, legend und label so siehts aus, mit ein wenig css
- ein formular
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Gehen wir mal alles Schritt für Schritt durch:
Ein Block level element mit Inhalt. Standardmäßig mit einem sichtbaren Rand um den Block dargestellt.
Die Erklärung des zugehörigen Fieldsets. Standardmäßig wird sie linksoben in der Ecke dargestellt, den Rand des Fieldsets überlappend. In Opera und Konqueror wird sie jedoch innerhalb des Fieldsets dargestellt.
Das
So siehts aus:
Der sichtbarer Rand, wenn nicht extra durch CSS definiert, ist im IE vom Typ “groove“, in den anderen Browsern vom Typ “solid“. Die explizite Definition des Randes durch CSS bewirkt gleichzeitig, daß, der fieldset im Opera und Konqueror sichtbar wird, daher sollte man generell eine CSS Definition fär den Rand hinterlegen.
Kommen wir nun zum Element
“Informationen der Steuerung zuweisen” lautet die Beschreibung dieses Elements. In der vergangenheit haben die Browserhersteller daher die vage Beschreibung unterschiedlich umgesetzt. In den neueren Browsern (IE4 aufwärts, Firefox, Mozilla) ist das label-element klickbar, welches das zugehörige Eingabeelement fokusiert.
Label Test:
Nun könnte man natürlich fragen, was der ganzer Aufwand soll, wo man doch mit der Tabelle alles wunderbar hinbekommt. Dafür gibt es mehrere Gründe:
- kleinere Dateigröße – weniger Traffic – geringerer Kosten
- An dem Beispiel oben ist es vielleicht noch nicht so offensichtlich, doch im normalfall ist der code um einiges Schlanker, insbesondere, wenn ein Formular sehr viele Felder enthält (bsp 20 oder 30).
- geringerer Aufwand bei der Pflege und Änderung
- oft werden Seiten geändert, erweitert, gekürzt, oder sind dynamisch aufgebaut (beispielweise per PHP oder ASP scriptgeneriert), wo Formularfelder je nach bestimmte Bedingungen angezeigt oder ausgeblendet wird. Dies wird extrem aufwendig, wenn man mit der Tabelle arbeitet. An dem ersten Beispiel kann man schon sehen, daß Teile der Tabelle mit “ ” gefüllt werden, damit die Struktur und das Aussehen stimmt.
- Am wichtigsten ist: die Trennung des Inhalts vom Layout
- Tabellen gehören genauso wie CSS zum Werkzeug des Layouts. Lange Zeit haben Webdesigner nur daher Tabellen benutzt, weil sie auf fast allen Browser identisch dargestellt worden ist, CSS dagegen große Probleme hatte. Doch mit der Zeit hat sich CSS immer mehr etabliert, und auf fast allen Browsern wird CSS richtig umgesetzt. So gesehen ist die Mächtigkeit beider im Punkto Layout nicht wirklich ein Unterschied vorhanden. Nun bietet aber CSS die Möglichkeit, Inhalt nicht mit Layoutelemente zu vermischen (eine Tabelle ist ein Layoutelement). Die Trennung von Inhalt und Layout hat sehr viele Vorteile, einige Links zu diesem Thema habe ich am Schluss dieses Beitrags angehängt.
Die übersetzung erfolgte mit Genehmigung des Autors. Translated with the permission of the author.
Diese Inhalt ist unter einer Creative Commons-Lizenz lizenziert.
hast du am 21. Juni zweimal geschirieben?
Thank you for your visiting to my blog.