CSS - Formulare gestalten

Formulare gestalten ohne Tabellen

Ein Formular kann man nur mit Tabellen sauber gestalten? Stimmt nicht! Es geht auch alles allein mit CSS.

Dieses Formular tut natürlich nichts, es dient nur zur Demonstration. Einen Newsletter gibt es hier nicht.

Die wesentlichen CSS-Definitionen lauten folgendermaßen, alle anderen Angaben im StyleSheet dienen nur zum Überschreiben übergeordneter Festlegungen:

.formbox {
  width: 400px;
  color: #000;
  background-color: #cc9;
  border: 1px solid #666;
  
}

.reihe {
  clear: both;
  padding: 2px 0px;
}

.label {
  float: left;
  width: 100px;
  text-align: right;
  padding-top: 3px;
  padding-right: 5px;
}

.feld {
  float: right;
  width: 300px;
  text-align: left;
} 

.knopf {
  clear: both;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 30px;
}

.defbreite {
  width: 260px;
}

Die letzte Klasse .defbreite dient dazu, alle Formularlelemente auf eine einheitliche Breite zu bringen. Allein mit den HTML-Attributen size für Input-Felder und cols für Textareas gelingt das nur sehr unvollkommen.

In der HTML-Datei steht dann folgendes:

<div class="formbox">

<form action="...">
  <div class="reihe">
    <span class="label">Name:</span>
    <span class="feld"><input type="text" class="defbreite"
      size="30" /></span>
  </div>

  <div class="reihe">
    <span class="label">E-Mail:</span>
    <span class="feld"><input type="text" class="defbreite"
      size="30" /></span>
  </div>

  <div class="reihe">
    <span class="label">Interessen:</span>
    <span class="feld">
      <textarea class="defbreite" cols="30" rows="8"> 
        Welche Themen interessieren Sie besonders?
      </textarea>
    </span>
  </div>

  <div class="reihe">
    <span class="label">&nbsp;</span>
    <span class="feld"><br />
      <input type="radio" name="abo" value="rein"
        checked="checked" /> bestellen<br />
      <input type="radio" name="abo" value="raus" /> abbestellen
    </span>
  </div>

  <div class="knopf">
    <input type="submit" value="und ab damit" />
  </div>
</form>

</div>

Netscape 4 kann übrigens nichts damit anfangen, das float versteht er nicht. Deshalb sollte das StyleSheet für das Formular per @import eingebunden werden, was der olle Navi auch nicht beherrscht. So sehen die Antiquitäten-Liebhaber nur ein vollkommen ungestaltetes Formular, aber sie sehen wenigstens irgend etwas und können es auch benutzen.

Aber das ist noch nicht alles. Bisher diente das CSS nur zur Ausrichtung der Formular-Angaben. Doch einige Elemente selber lassen sich auch formatieren.

Ob man Formulare jedoch so entfremdet, sollte man sich genau überlegen. Der normale Computer-Benutzer kennt die Standard-Elemente und weiß instinktiv, wie er damit umzugehen hat. Aber ob er das auch im gestalteten Formular erfasst? Unter Usibility-Gesichtspunkten ist es eher bedenklich, Jakob Nielsen wird sicher davon abraten.

Bei barrierefreien Formularen ist noch einiges mehr zu beachten, sollen sie auch für Blinde mit einem Screenreader und andere Gehandicapte zugänglich sein. Dazu hat Einfach für Alle ein mehrteiliges Tutorial: Bessere Formulare erstellt.

Die Grenzen der CSS-Formatierung von Formularen

Viele Formular-Elemente lassen sich gar nicht oder nicht befriedigend browserübergreifend individuell gestalten. Dazu gehören unter anderem Radiobuttons, Checkboxes und der Button für File-Inputfelder. Das ist kein Fehler der CSS-Spezifikation, sondern ausdrücklich gewollt. Formulare sind Angelegenheit des Betriebssystems und HTML übernimmt weitgehend dessen Vorgaben. Das ist wohl auch ganz gut so, denn Formulare erlauben eine Kommunikation zwischen den Benutzern, den Webseiten und dem Webserver, auf dem die Seiten abgelegt sind. Wer weiß schon, was sonst mit als harmlose Bildchen oder ähnlichem getarnte Formular-Elemente für Unheil angerichtet werden könnte? Die Dialer-Verteiler und andere Abzocker im Web ärgern sich über diese Einschränkung sicher besonders.

Roger Johansson hat sich die Mühe gemacht, die wichtigsten CSS-Regeln auf alle gängigen Formular-Elemente anzuwenden und die Ergebnisse in den verschiedenen Browsern durch Screenshots zu dokumentieren: Styling Form Controls with CSS. Ein ernüchternder Befund für alle Gestalter.