Beschreibung eines Ansatzes für ein Webformular, das mehrspaltig aufgebaut ist und sich in seiner Breite vollständig dem umgebenden Inhaltsbereich anpasst.

(Der Artikel ist parallel auch auf Englisch im Blog des Autors veröffentlicht worden: »Approach to flexible multi-column forms«)

»Flüssige« Webformulare?

Wenn es darum geht, ein Webformular in ein flüssiges Layout einzubauen, haben wir gerne ein paar Gründe zur Hand, warum Webformulare pixelbasiert sein sollten. Deshalb, weil uns natürlich vollkommen klar ist, dass Formularelemente zum Browser/System gehören und nur selten dem Webautor gehorchen (bzw nur begrenzt in dessen Zuständigkeit fallen). Das ist eine recht fundamentale Sichtweise. Tatsächlich ist das Styling von Webformularen harte Arbeit, sogar wenn sie pixelbasiert sind, und es kann in einen echten Höllenjob ausarten, wenn die Anforderungen heißen: mach' sie flexibel.

An dieser Stelle fragen wir uns: weshalb sollte ein Webformular denn eigentlich skalierbar sein? Warum viel Zeit und Aufwand investieren, nur um ein Formular zu entwickeln, dessen Eingabefelder flexible Breiten haben? Macht das Sinn?
Ja, es kann dann sinnvoll sein, wenn das Formular mehrspaltig aufgebaut ist und ein breiteres (weil mitwachsendes) Formular seinen Eingabefeldern ermöglichte, Inhalte aufzunehmen, die ansonsten in einem schmalen und pixelbasierten Formular abgeschnitten würden. Einspaltige Eingabefelder sind hoffentlich jederzeit lang genug für ihre Inhalte, aber ein mehrspaltiges Formular könnte durchaus von flexiblen Breiten profitieren.

Noch ein letzter Gedanke: warum wollen wir überhaupt ein mehrspaltiges Formular anstelle eines Einspaltigen verwenden?
Das hat mit dem Buzzword »Erwartungskonformität« zu tun und zielt ab auf den Wunsch nach Eingabefeldern, die in ihren Ausmaßen den Inhalten entsprechen, die sie aufnehmen sollen. So erfordert beispielsweise die Angabe des Nachnamens des Benutzers ein längeres Eingabefeld als das Feld für die paar Zeichen seiner Hausnummer. Aus dieser Sichtweise heraus mag eine Abweichung zwischen Feldlänge und der Menge an Inhalt (sofern sich dieser einschätzen lässt) den Benutzer verwirren. Und weil mehrspaltige Formulare Eingabefelder mit unterschiedlichen Längen ermöglichen — unser Nachfolgendes tut dies jedenfalls und verwendet die Längen 25%, 50%, 75% und 100% — können solche Formulare hoffentlich den Erwartungen des Benutzers entsprechen.

Ansatz für ein flexibles, mehrspaltiges Formular

Aufbau

Wir benötigen folgende Dinge:

1. Einen Container/Wrapper, der negative margins nach links und rechts benutzt, um dadurch breiter zu werden als das Formular selbst. Absicht ist, die margins der inneren Elemente auszugleichen und sie dadurch auf eine Linie mit dem Formular zu bringen:

   <form class="dm_form&
   
   " ..>
      <div class="form_wrapper">
      ..
      </div>
   </form>
   

2. Umschließende Labels, um zusätzliche div-Container zu vermeiden: <label ..> (text) (input) </label>
3. Einen Haufen von spans, die für Titel und ähnliche Dinge verwendet und dabei als Blockelemente missbraucht werden: <label ..> <span class="wrapper"> <span class="title">First name *</span> <input class="field" id="firstname" type="text" /> </span> </label>

Code und Beispiel

Ein Funktionsbeispiel des Formulars. Nähere Informationen befinden sich direkt im Quelltext.
Stand: 12. Juli 2008

Browserkompatibilität

Das Formular scheint tadellos in den gängigen Browsern wie Firefox, Opera (ein kleines bisschen unsauber) und Safari zu funktionieren. Die Internet Explorer benötigen ein bisschen Hilfe per Javascript, um die Breite der Eingabefelder um ein paar Pixel zu reduzieren, funktionieren danach aber ebenfalls tadellos.

Lizenz

Der Ansatz für flexible, mehrspaltige Formulare steht unter einer Mach-was-du-willst-Lizenz und kann damit für alles verwendet werden, was man will.

Diskussion

Wir sind uns bewusst, dass das Formular keinen Preis für semantisches Markup gewinnen wird und sprechen deshalb auch von einem »Ansatz«. Allerdings ist es sicherlich nicht bösartig, sondern wir halten es für einen durchaus charmanten Weg, zu einem flexiblen Formular zu kommen, das valide ist, sauber strukturiert ist und in den gängigen Browsern funktioniert.
Feedback ist unbedingt willkommen!

Updates

• 20. November 2007
  Es gibt Positionierungsprobleme in Apples neuem Safari 3. Werde mich später drum kümmern, falls nicht sowieso eine ganz neue Version mit einem anderen Ansatz folgt..
• 22. November 2007
  Das Formular ist nun auch Safari 3-tauglich, siehe Info.
• 12. Juli 2008
  Box-sizing im Opera 9 angepasst.

Weitere Formulare und Artikel zum Thema

• The Subtraction Good Form 0.1 (Khoi Vinh)
• The Subtraction Good Form 0.2 (Thomas Maas)
• A form with style (Stu Nicholls)
• CSS-Only, Table-less Forms (Jeff Howden)
• Web Application Form Design (Luke Wroblewski)
• Accessible HTML/XHTML Forms: Beginner Level (WaSP)
• Accessible HTML/XHTML Forms: Intermediate Level (WaSP)
• Accessible HTML/XHTML Forms: Advanced Level (WaSP)
• CSS-Based Forms: Modern Solutions (Smashing Magazine)
• Designtaktiken im Formularkrieg (Gerrit van Aaken)
• Form Layout (Michael Schuerig)