Vorgestern wurde ich gefragt wie ich es in XHTML-Dokumenten handhabe Formulare zu gestalten. Ob ich dafür immer noch auf Tabellen zurückgreife, oder ob ich dies anders löse. Diese Frage möchte ich zum Anlass nehmen endlich einen kleinen Artikel zum Thema „Formulare“ zu verfassen, welcher ohnehin schon lange geplant war. Vorab eine Antwort auf die Tabellenfrage mit kleiner Erläuterung: Tabellen sind laut w3c lediglich dazu gedacht (und nur dazu gedacht!) um tabellarische Daten darzustellen. Daher ja -> table. Nicht zum layouten, und eben auch nicht um Formulare zu strukturieren. Da ich mich, seit ich XHTML einsetze, mit Semantik mehr und mehr beschäftige, achte ich natürlich auch darauf die korrekten Tags zu benutzen. Anders würd Semantik logischerweise keinen Sinn machen.
Daher möchte ich mit diesem Artikel denjenigen die bisher auf Tabellen zurückgegriffen haben, oder gerade erst anfangen Webseiten mittels CSS zu gestalten, ein wenig auf die Sprünge helfen wie man auch ohne Tabellen (oder vielleicht sogar gerade ohne Tabellen) wunderschöne Formulare zaubert. Sicherlich wird es schon einige Artikel zum Thema XHTML/Formulare geben. Da jedoch immer mehrere Wege nach Rom führen, und ich in den letzten Monaten für mich ein recht eigenes System entwickelt habe mit dem ich Formulare style, werde ich zur Recherche nicht auf andere Artikel zurückgreifen, sondern lediglich meine Art und Weise zeigen und erläutern. Sollten sich Fehler einschleichen, inhaltlich oder auch einfach vom sprachlichen, so bitte ich euch wie immer nicht davor zurückzuschrecken mich darauf hinzuweisen.
Jeder kennt DIE Standardtags auf die beim Formular erstellen zurückgegriffen wird:
form, input, textarea, option/select
Die Tags die jedoch dazu vorgesehen sind um Formulareingabefelder sinnvoll und schön zu beschriften benutzen jedoch leider nur wenige, noch weniger dürften überhaupt bereits etwas davon gehört haben:
fieldset, legend, label
Na, bisher davon schon einmal jemand etwas gehört? Wenn nein, nicht weiter schlimm, einfach weiterlesen. Ein ungestaltetes Formular in dem alle diese Elemente vorkommen, habe ich hier zur Demonstration erstellt, ein solches, jedoch bereits per CSS formatiertes Formular, gibt es zum Beispiel hier auf der Seite unter Kontakt zu sehen. Wer bisher seine Formulare in Tabellen gepackt hat, dem werden vielleicht die Kästen um inhaltsähnliche Felder aufgefallen sein.
Die Elemente welche hier sichtbar zum Zug kamen, sind die bereits erwähnten fieldset, sowie in Verbindung damit legend. Jemand der ein wenig rumgeklickt hat, dem wird evtl aufgefallen sein, das ein Eingabefeld oder eine Radiobox/Checkbox angewählt wurde, wenn man nur auf den Beschreibungstext geklickt hat. Dazu sorgt das, für das menschliche Auge im Browser, nicht auf den ersten Blick wahrnehmbare Tag label in Verbindung mit dem dazu benötigten Attribut for. Diese Technik benutzt zum Beispiel auch google auf seiner Suchseite, wenn man auf den Text „Das Web“, „Seiten auf Deutsch“ oder „Seiten aus Deutschland“ klickt. All dies passiert gänzlich ohne JavaScript. Der Wert vom for-Attribut beruft sich dabei auf einen Identifikationsbezeichner (id), welches dem entsprechenden Inputfeld, für welches das Label gelten soll, zugewiesen wird. Ein <label for="name"> beschreibt also ein Inputfeld welches die id „name“ besitzt. Ein Blick in den Quelltext von meinem Beispiel dürfte einiges aufschlussreicher sein.
Wer einen Blick in den Quelltext geworfen hat, dem wird vielleicht auch im label noch das Attribut accesskey aufgefallen sein. Dazu jedoch später.
Das grundlegendste wäre hiermit also schon erklärt:
fieldset gruppiert inhaltsähnliche Felder eines Formulares,
legend definiert eine Überschrift für die entsprechende Gruppe,
label weist einen Text einem bestimmten Eingabefeld zu.
Hier draus sollte ersichtlich werden das für ein label-Element das for-Attribut auf jeden Fall angegeben werden sollte, auch wenn dies laut XHTML-Spezifikationen nicht zwingend notwendig ist. Der User braucht so, ganz komfortabel, nur auf dem Text zu klicken, und gerade behinderte Menschen haben es um einiges leichter einen winzig kleinen Radiobutton oder eine Checkbox mit der Maus zu treffen.
for ist jedoch nicht das einzige Attribut welches ein label annehmen kann. Wie oben erwähnt ist auch das Attribut accesskey auf Labels anwendbar. Ist ein Accesskey, also eine „Zugriffstaste“ definiert, so kann der User sehr einfach mittels ALT-Taste + Accesskey ein entsprechendes Feld anwählen. In meinem obigen ersten Beispiel habe ich für die Felder unter „Kontaktdaten“ die Accesskeys 1-8 vergeben. Ein User kann also z.B. mittels [ALT]+[1] (im Opera [Shift]+[Esc]+[1]) das Feld „Name“ auswählen. Dabei ist jedoch darauf zu achten, dass man diese Accesskeys in irgendeiner Art kenntlich macht. Ein Artikel wie dies lösen kann findet sich bei AListApart
http://www.alistapart.com/articles/accesskeys/
Da die Möglichkeiten was das Markup angeht jetzt geklärt sind, kommen wir zum eigentlichen Styling des Formulars durch CSS. Weil jedoch nicht jedes Formular gleich aussehen sollte im www, beschränke ich mich auf Einzelheiten. Die Details kann am Ende jeder für sich abändern, oder auch auf dieser Grundlage ein komplett eigenes Formular stylen und dem Design seiner Seite anpassen. Das Formular welches ich hier beschreiben werde findet sich im Übrigen hier: www.manuelbieh.de/artikel/formulare/formular02.htm
Zuerst weisen wir dem Fieldset eine länge zu. 100% Länge macht bei einer hohen Auflösung wenig sinn, da die Begrenzung kaum noch ersichtlich wird. Außerdem ist der Standardrahmen hässlich, weswegen wir ihm einen eigenen Rahmen geben: border: 1px solid #4b408c. Als letztes ändern wir noch den Abstand der einzelnen Fieldsets, da diese mir zu eng beieinander liegen: margin: 1.5em auto 1.5em auto;. Die auto-Werte stehen in diesem Fall dafür, die Fieldsets horizontal zu zentrieren.
Damit sich die per legend definierten Feldüberschriften vom Text innerhalb der Felder abhebt, verpassen wir ihnen eine Hintergrundfarbe, etwas mehr Luft, einen eigenen Rahmen, sowie eine fette Schrift:
legend {
background: #b7b1d5;
border: 1px solid #4b408c;
border-right-width: 2px;
border-bottom-width: 2px;
font-weight: bold;
margin-bottom: 4px;
padding: 4px;
} |
legend {
background: #b7b1d5;
border: 1px solid #4b408c;
border-right-width: 2px;
border-bottom-width: 2px;
font-weight: bold;
margin-bottom: 4px;
padding: 4px;
}
Und weil es ziemlich bescheiden aussieht das die Eingabefelder aufgrund der unterschiedlichen Länge der jeweiligen Beschreibungen Treppen bilden, bringen wir diese auf eine Größe:
.kontaktdaten label {
display: block;
float: left;
width: 5em;
} |
.kontaktdaten label {
display: block;
float: left;
width: 5em;
}
Da label ein Inline Element ist, können wir ihm nicht direkt eine Breite zuweisen. Ergo: display: block. Da die Eingabefelder dadurch in die nächste Zeile rutschen würden, bekommen die labels ein float: left. Die Angabe für die Breite entspricht ca. die des längsten Wortes, also „Vorname:“.
Zu guter Letzt möchten wir natürlich nicht das die (noch hässlichen) Eingabefelder eng an eng übereinander stehen. Von daher geben wir auch ihnen etwas Luft, einen schöneren Rahmen, und einen hover- und active-Status:
input,textarea {
background: white;
border: 1px solid #4b408c;
margin: 3px 0;
padding: 3px 3px;
}
input:active, input:focus, input:hover {
background: #E8EBDF;
}
label {
margin: 5px 0;
} |
input,textarea {
background: white;
border: 1px solid #4b408c;
margin: 3px 0;
padding: 3px 3px;
}
input:active, input:focus, input:hover {
background: #E8EBDF;
}
label {
margin: 5px 0;
}
Warum label {margin: 5px 0;}? Ich möchte das das Label vertikal zentriert mit der Eingabebox bündig ist. Da ich den Eingabefeldern hier einen Margin von 3px gebe, rutscht der Text im Label nach oben. Durch das margin im Label wird dies jedoch wieder ausgeglichen.
Wenn man einen Blick auf das Ergebnis wirft, sieht man, dass jetzt bereits mit wenigen Zeilen CSS, ein übersichtliches, nett aussehendes Formular gestaltet wurde. Auf dieser Grundlage dürfte es problemlos möglich sein das Formular seinen Wünschen hin anzupassen, zu verbessern, oder auch einfach so zu übernehmen. Einige Schritte die ich vorgenommen habe, habe ich in diesem Artikel nicht weiter kommentiert. Dies war der Fall wenn etwas zur Verständnis nicht nötig war.
Einige Unterschiede gibt es jedoch zwischen Formularen in HTML und in XHTML welche ich nicht angesprochen habe: Sogenannte „Shorttags“. Shorttags werden zum Beispiel benutzt um in Optionsfeldern eine Vorauswahl zu treffen, oder um Checkboxen oder Radiobuttons beim Aufruf der Seite bereits zu aktivieren.
<option selected> bzw. <input type="radio" checked>. Dies ist seit XHTML nicht mehr erlaubt. Stattdessen muss es in dieser Form geschrieben werden: <option selected="selected"> und <input type="radio" checked="checked">
Das sollte für heute reichen, und ich denke, dass mit diesem Artikel auch XHTML/CSS-Anfänger leicht ein schönes und benutzerfreundliches Formular zustande bekommen.
Solltet Ihr wie gesagt Fehler finden, der Meinung sein das ich etwas vergessen habe, oder sonstige Anmerkungen loswerden wollt, dann scheut euch nicht die Kommentarfunktion hier unten zu benutzen, oder schickt es mir einfach über mein Kontaktformular welches sich unter der Kommentarfunktion wiederfindet ;)
Links zum Thema
Jetzt abonnieren!
