Formulare stylen - gleiche Höhe für Label und Input

Formulare – allgegenwärtige Bestandteile ach so vieler Webseiten. Sie begrüßen uns beim Aufrufen einer Webseite, wenn wir uns einloggen müssen, als Auswahlformulare zwischendrin, und wenn wir etwas bestellen möchten, handelt es sich, ja richtig: um ein Formular. Dann wären da noch Kontaktformulare, Online-Formulare von Ämtern, Formulare für Newsletter… die Liste ist lang.

Für den Webdesigner bedeutet das natürlich vorallem eins: eine weitere Möglichkeit, sich beim Styling auszutoben! (Wer jetzt „Arbeit“ gedacht hat: Ja, auch eine korrekte Antwort.)

 

Es gibt unzählige Möglichkeiten, ein Formular zu stylen, beginnend mit der Entscheidung, wo das Label angeordnet werden soll. Die beiden häufigsten Varianten sind top-aligned und left-aligned Labels.

 

Ein einfaches Formularbeispiel

 

Sehen wir uns ein left-aligned Label anhand eines einfachen Formulars etwas genauer an:

Label- und Input-Text sind scheinbar auf gleicher Höhe, alles scheint seine Ordnung zu haben.

Bei diesem Beispiel wurde noch (fast[1]) kein Styling angewendet.

Spannender wird es, wenn man sich entscheidet, auch dem Label einen Rahmen oder eine Hintergrundfarbe zu geben. Dann fällt nämlich plötzlich auf, was man auf den ersten Blick gar nicht bemerkt: Input und Label befinden sich nicht auf gleicher Höhe.

 

 

Nun sieht man schon recht deutlich, dass sich der Rahmen des Labels und der Rahmen des Input-Feldes nicht auf gleicher Höhe befinden. Außerdem wirkt der Rahmen des Labels dicker als der des Input-Feldes. Und das, obwohl der rote Rahmen nur 1px breit ist und der des Input-Feldes per Default 2px (die Beispiele oben wurden mit Chrome betrachtet, aber in anderen Browsern bietet sich ein ähnlich trauriges Bild). Genauso deutlich fällt dieser Höhenunterschied auf, wenn das Label eine Hintergrundfarbe bekommt.

Das liegt unter anderem daran, dass der border-style in den meisten Browsern per Default auf „inset“ und die border-width auf 2px gesetzt ist. Dieser (Default) border-style:inset des Input-Feldes wird für uns erst sichtbar, wenn wir eine Hintergrundfarbe vergeben:

 

 

Ein erster Schritt ist für uns also, dafür zu sorgen, dass beide Elemente die gleiche border-width und den gleichen border-style haben.

 

Label und Input-Feld sind jetzt zwar noch nicht gleich hoch, aber immerhin befindet sich der Rahmen jetzt auf der gleichen Grundlinie. Wirft man jetzt wieder einen Blick in die Developer-Ansicht des Browsers, stellt sich heraus, dass die Input-Felder außerdem ein Padding haben und eine andere Schriftart verwenden als die Standard-Schriftart der Seite.

Letzteres klingt nicht besonders spektakulär, allerdings sollte einem bewusst sein, dass die Schriftart Einfluss auf die Schriftgröße hat:

Castellar  Parchment

Diese beiden Schriftarten haben beide denselben Schriftgrad (16px)! Trotzdem ist die Schriftart Castellar beinahe doppelt so hoch wie die Schriftart Parchment.

Für unser Formular bedeuten unterschiedliche Schriftarten wiederum ein Problem auf dem Weg zu Feldern auf gleicher Höhe, denn die Standard-Schriftart für Input-Felder ist eine andere, als die Standard-Schriftart der Seite. Um den Unterschied deutlicher zu machen, einmal mit stark unterschiedlichen Schriftarten:

Auch die Vergabe einer Höhe für Label und Input-Feld bringen die Felder nicht auf gleiche Höhe.

Eine mögliche Lösung ist, für Label und Input-Feld die gleiche Schriftart zu verwenden:

 

 

Mit derselben font-family, font-size, padding und border befinden sich nun sowohl die Felder auf exakt gleicher Höhe, als auch die Schrift darin auf derselben Basislinie (baseline).

 

Eine andere Möglichkeit wäre, den Block-Container, in dem sich Label und Input-Feld befinden (in diesem Beispiel ein <p>), zu einer Flexbox zu machen und die Elemente darin in Zeilen zu organisieren:

  

Wie man sieht, sind die flex-items in Zeilenausrichtung gleich hoch – unabhängig von Rahmen und Schriftart.

Davon ausgehend sind der Fantasie fürs Styling keine Grenzen gesetzt.

Ein Beispiel für ein einfaches Formular auf der Basis von left-aligned Labels und Input-Feldern auf der gleichen Höhe:

 

 

Die „Unterstreichung“ ist keine text-decoration, sondern ein border-bottom für das Label mit border-style:solid und ein border-bottom für das Input-Feld mit border-style:dashed. Dank gleicher font-family, font-size, padding und border-width liegen diese jetzt auch auf der exakt gleichen Höhe.

Den Code für dieses simple Formular könnt Ihr Euch hier (auf Codepen) ansehen.