Formularbaukasten

3.10 Der Formularbaukasten

Formulare benötigt man ständig, jedoch kommt bei der Gestaltung von Formularelementen nur selten Freude auf. Zum einen lässt sich die Optik der meisten Formularelemente nur bedingt per CSS anpassen - hier richten sich die meisten Browser nach den Vorgaben des jeweiligen Betriebssystems für die Darstellung der Interface-Elemente. Zum anderen treten auch hier im Internet Explorer einige CSS-Bugs zu Tage, welche die Arbeit weiter erschweren.

Mit YAML 3.1 hält daher ein mit dem Formularbaukasten ein neuer Baustein Einzug in das Layout-Framework. Es handelt sich hierbei - wie bei den Subtemplates - um ein aufeinander abgestimmtes System aus HTML-Bausteinen und dem zugehörigen CSS. Das verwendete Markup ist nach Best-Practice-Regeln entworfen und orientiert sich an den Anforderungen an die Barrierefreiheit.

Ein Beispiel für die Anwendung des Bausatzes sowie der beiden grundsätzlichen Gestaltungsmöglichkeiten (linear oder spaltenbasiert) finden Sie hier:

/examples/01_layouts_basics/styling_forms.html

Neben diesem einfachen Formularaufbau lassen sich mit Hilfe der Subtemplates auch mehrspaltige Formulare leicht umsetzen.

/examples/01_layouts_basics/multicolumnar_forms.html

3.10.1 Das Markup der Formulare

Grundsätzlich sind Sie natürlich vollkommen frei in der Gestaltung Ihrer Formulare und sind nicht zwangsweise auf die Nutzung des Formularbaukastens angewiesen. Um ein Formular mit den Elementen des von YAML bereitgestellten Baukastens zu erstellen, weisen Sie dem umgebenden <form> Element zunächst die CSS-Klasse yform zu.

Sie können Ihr Formular mit Hilfe von <fieldset> beliebig strukturieren, wobei dieses Element nicht zwingend erforderlich ist. Nutzen Sie Fieldsets, um größere Formulare sinnvoll zu gliedern. Bei kleinen Formularen (z.B. Kontaktformularen) kann es durchaus weggelassen werden.

HTML-Bausteine für Formularelemente

Die folgende Übersicht enthält das Standard-Markup für alle Formularelemente des Baukastens. Wie Sie erkennen können, besteht jeder HTML-Block aus einem Formularelement (INPUT, TEXTAREA, SELECT usw.), dem zugehörigen Label und einem umschließenden DIV-Container. Die an den DIV-Container angehängte CSS-Klasse regelt deren Gestaltung und Positionierung.

Sie können diese Bausteine per Copy/Paste in Ihren Source-Code übernehmen. Achten Sie darauf, dass Sie für das Attribut id="your-id" eine eindeutige Bezeichnung wählen. Die gewählte ID-Bezeichnung muss anschließend in das Attribut for="your-id" des Labels übernommen werden, um die Zuordnung von Label und Formularelement sicherzustellen.

Hinweis: Das name-Attribut innerhalb der Formularelemente ist optional und kann weggelassen werden. Einige JS-basierte Formularvalidatoren nutzen dieses Attribut. Sollten Sie ein solches Script verwenden, empfiehlt es sich, den ID-Bezeichner dafür unverändert zu übernehmen.

Die visuelle Gestaltung Formularelemente selbst erfolgt indirekt über einen umschließenden DIV-Container mit einer speziellen CSS-Klasse (z.B. type-text). Diese Methode erlaubt es, Inputfelder, Checkboxen oder Radiobuttons auch in den älteren Versionen des Internet Explorers (IE5.x und IE6) gestalten zu können. Bei Verwendung von Attributselektoren, z.B. input[type="text"] { ... } würden diese Browser automatisch von jeglicher Gestaltung ausgeschlossen werden, da diese IE-Versionen noch keine Attributselektoren verstehen.

Folgende vordefinierte Klassen stehen zu Anwendung bereit:

Hinweis: Versteckte Input-Felder (type="hidden") können frei innerhalb dieser vordefinierten Container eingebaut werden. Sie werden unabhängig von der jeweiligen Formatierung der sonstigen Input-Elemente innerhalb des Elterncontainers zuverlässig versteckt.

3.10.2 Das CSS der Formularbausteine

Den zweiten Teil des Formularbaukastens bildet das Stylesheet forms.css, welches im Ordner yaml/screen/ abgelegt ist. Es handelt sich hierbei also nicht um einen unveränderlichen Core-Baustein, sondern um ein Stylesheet, welches Sie als Anwender durchaus Ihren Anforderungen anpassen können.

Visuelle Gestaltung der Formularelemente

Das Stylesheet forms.css ist in zwei Abschnitte unterteilt. Der erste Abschnitt enthält alle CSS-Regeln zur optischen Gestaltung der einzelnen Elemente.

Diesem Bereich können Sie unbesorgt editieren und damit das optische Erscheinungsbild des Formulars, der Fieldsets sowie der verschiedenen Formularelemente vollständig an Ihr Layout anpassen.

/**
 *  YAML Forms - visual styling
 *
 *  (en) visual form styling area
 *  (de) Festlegung des optischen Erscheinungsbildes
 */

.yform {
  background: #f4f4f4;
  border: 1px #ddd solid;
  padding: 10px;
}
...

Zur visuellen Gestaltung gehören Farben, Rahmen, Randabstände und evtl. Grafiken, um das Aussehen der einzelnen Formularelemente einschließlich der Zustände :focus, :hover und :active zu beschreiben.

Technische Basis des Formularbaukastens

Der zweite Abschnitt enthält Vorgaben zur Positionierung, Eigenschaften zur Förderung der Zugänglichkeit der Formularelemente. Die Standardform der Formulardarstellung ist eine vertikal ausgerichtete, lineare Abfolge von Labeln und Formularelementen. 

/**
 * Vertical-Forms - technical base (standard)
 *
 * |-------------------------------|
 * | fieldset                      |
 * |-------------------------------|
 * |   label                       |
 * |   input / select / textarea   |
 * |-------------------------------|
 * | /fieldset                     |
 * |-------------------------------|
 *  
 * (en) Styling of forms where both label and ...;
 * (de) Formulargestaltung, bei der sowohl Label als auch ...
 *
 * ...
 */

/* General form styling  | Allgemeine Formatierung des Formulars */

.yform { overflow: hidden; }
.yform fieldset { overflow: hidden; }
.yform legend { background: transparent; border: 0; }
.yform label { display:block; cursor: pointer; }

...

Auf die einzelnen CSS-Regeln wird an dieser Stelle nicht gesondert eingegangen. Der Aufbau der Formularbausteine basiert auf lang erprobten Best-Practice-Regeln und sichert eine browserübergreifende korrekte Darstellung von Formularen in Umgebungen mit wahlweise fixen oder flexiblen Breiten.

Hinweis: Das CSS enthält weiterhin präventive Regeln zur Vermeidung diverser Darstellungsfehler in älteren Versionen des Internet Explorers, speziell die relative Positionierung der Formularelemente. Auf eine detaillierte Beschreibung der enthaltenen Bugfixes wird an dieser Stelle aufgrund der Komplexität der Problematik verzichtet.

Alternative Darstellungsvariante

Alternativ zur vertikal ausgerichteten Darstellung von Labeln und Formularelementen bietet der Formularbaukasten noch eine alternative Darstellungsvariante. Über die CSS-Klasse .columnar, welche wahlweise an das Form-Element, ein Fieldset oder einen DIV-Container angehängt werden kann, wird auf eine spaltenartige Darstellung gewechselt.

In der spaltenartigen Darstellung stehen Label und Formularelement jeweils in einer Zeile (basierend auf Floats), wobei Labels und Formularelemente untereinander horizontal linksbündig ausgerichtet sind.

/**
 * Columnar forms display - technical base (optional)
 *
 * |-------------------------------------------|
 * | fieldset                                  |
 * |-------------------------------------------|
 * |                                           |
 * |   label   |   input / select / textarea   |
 * |                                           |
 * |-------------------------------------------|
 * | /fieldset                                 |
 * |-------------------------------------------|
 *
 * (en) Styling of forms where label floats left of form-elements
 * (de) Formulargestaltung, bei der die label-Elemente nach links fließen
 *
 * ...
*/

/* Columnar display | Spalten-Darstellung */
.columnar .type-text label,
.columnar .type-select label {
  float: left;
  width: 30%; /* Can be fixed width too | Kann auch eine fixe Angabe sein */
}

/* Indent Checkbox fields to match label-width ... */
.columnar div.type-check { padding-left: 30%; }
.columnar div.error .message { margin-left: 30%; }

.columnar div.type-text input,
.columnar div.type-text textarea { width: 67.8%; }
.columnar div.type-select select { width: 69.4%; }
 
/* width adjustments for IE 5.x & IE6 ... */
* html .columnar div.type-text input,
* html .columnar div.type-text textarea { width: 67.2%; }
* html .columnar div.type-select select { width: 68.8%; }

Die räumliche Aufteilung erfolgt standardmäßig in einem Verhältnis von 30% (Label) zu 70% (Formularelement). Die Breiten der Formularelemente sind in diesem Fall aufgrund zahlreicher Tests gewählt und sollten nur mit Bedacht geändert werden.

Hintergrund für die "krummen" Werte ist der Umstand, dass in Umgebungen mit flexiblen Layouts die Gesamtbreite eines Formularelements nicht exakt bestimmt werden kann, da seitliche Paddings sinnvollerweise in  PX oder EM angegeben wird. Hinzu kommt, dass Select-Elemente in verschiedenen Browsern generell leicht abweichende Breiten haben. Die gewählten Werte sichern eine annähernd gleiche Breite aller Elementtypen und vermeiden gleichzeitig ungewollte Umbrüche der Floatumgebungen.

Anpassungen für den Internet Explorer

Wie bei den Elementen des Seitenlayouts, benötigt der Internet Explorer in den Versionen 5.x - 7.0 Hilfe, um gestaltete Formulare fehlerfrei darzustellen.

Allgemeine Anpassungen

Zahlreiche Darstellungsprobleme treten z.B. in Verbindung mit <fieldset> Elementen auf (Fieldset-Hintergründe werden nicht vollständig gerendert). Diese Probleme sind allgemeiner Natur und werden daher über die Datei iehacks.css korrigiert.

/**
 * Form related bugfixes
 *
 * @bugfix
 * @affected   IE 5.x/Win, IE6, IE7
 * @css-for    IE 5.x/Win, IE6, IE7
 * @valid      no
 */

fieldset, legend { position:relative; }

Der Bugfix für diese Darstellungsprobleme besteht aus der Zuweisung der Eigenschaft position:relative. Diese Eigenschaft hat im Regelfall keine Auswirkungen auf die Formulargestaltung, weshalb sie den Elementen direkt zugewiesen wird und somit auf alle Formulare innerhalb YAML-basierter Layouts wirkt.

 /**
  * Global fixes for YAML's form construction set
  *
  * @workaround
  * @affected IE 5.x/Win, IE6, IE7, IE8
  * @css-for IE 5.x/Win, IE6, IE7, IE8
  * @valid no
  */

.yform, 
.yform div,
.yform div * { zoom:1; }

Der zweite Teil der allgemeinen Vorgaben, welcher speziell den Formularbaukasten betrifft, befindet sich in der forms.css. Bei den Elementen des Baukastens wird über die Eigenschaft zoom:1 vorsorglich das Merkmal hasLayout aktiviert. Da dieses Vorgehen auf bestehende Formulare durchaus Auswirkungen haben könnte, ist diese präventive Maßnahme auf den YAML-Formularbaukasten (.yform) begrenzt.

Hinweis: Bei der zoom handelt es sich um eine proprietäre Eigenschaft des Internet Explorers. Eine Validierung des Stylesheets führt daher zu einem Fehler, den Sie jedoch ignorieren können. Die Eigentschaft hat keinerlei Auswirkungen auf andere Browser.

Korrekte Darstellung von Legenden innerhalb von Fieldsets

Ein weiteres Problem des Internet Explorers ist die fehlerhafte Darstellung von Fieldsets mit Legenden, sobald diese mittig über dem oberen Rand des Fieldsets platziert werden. Doch genau diese Darstellung entspricht den Standardvorgaben aller Webrowser, weshalb im Rahmen des Formularbaukastens ein Workaround in die forms.css integriert wurde.

/**
 * Forms Fieldset/Legend-Bug in IE
 * @see ...
 *
 * @workaround
 * @affected IE 5.x/Win, IE6, IE7, IE8
 * @css-for IE 5.x/Win, IE6, IE7, IE8
 * @valid no
 */
  
/* all IE */
.yform { padding-top: 0\9; }
.yform fieldset { padding: 0 5px\9; padding-top:1em\9; }
.yform legend { position:absolute\9; top:-.5em\9; *left: 0\9; }
.yform fieldset { position:relative\9; overflow:visible\9; margin-top:1.5em\9; zoom:1; }

/* IE5.x, IE6 & IE7 */
.yform legend { *padding: 0 5px; }
.yform fieldset { *padding-top:1.5em; }

/* IE5.x & IE6 */
* html .yform { padding-top: 10px; }

Der Workaround besteht darin, die Legende mittels absoluter Positionierung über dem Fieldset zu positionieren und somit eine zu den Standardvorgaben äquivalente, jedoch fehlerfreie Darstellung zu erreichen. 

Aufgrund der absoluten Positionierung der Legende fällt das Element aus dem normalen Textfluss heraus, weshalb bei Anwendung dieses Workarounds die oberen Randabstände (Padding, Margin) für das Fieldset angepasst werden müssen, damit Nachbar- und Childelemente weiterhin korrekt platziert werden.

Hinweis: Die für diesen Workaround notwendigen CSS-Hacks zur Adressierung des Internet Explorers sind nicht valide. Die Anpassungen der Randabstände der Fieldsets sind jedoch layoutabhängig (optische Gestaltung der Formulare, siehe oben) und müssen daher für den Layoutentwickler zugänglich sein. Aus diesem Grund wird der Workaround direkt am Ende der forms.css vorgehalten.

Kapitel 4: Anwendung