Layout von Formularen gestalten

Detail of "Spider web at sunrise" - Luc Viatour / www.Lucnix.be

Layout von Formularen gestalten

Vordefinierte CSS-Klassen verwenden

Durch die CSS-Klassen haben Sie die Möglichkeit, einzelne Formularelemente anders anzuordnen und die Art der gewünschten Eingabe festzulegen. In diesem Artikel werden die einzelnen CSS-Klassen erklärt und zu den einzelnen Formularelementen zugeordnet. Es gibt zu jedem Formularelement ein Bild, in dem Sie sehen können, wie sich die Anzeige ändert.

Einfachauswahl (Radio-Button)

Hier gibt es nur die zusätzliche CSS-Klasse „nebeneinander“. Damit werden die einzelnen Optionen in einer Reihe nebeneinander gesetzt.

Beachten Sie, dass automatisch in einer neuen Zeile fortgesetzt wird, wenn die Beschriftung zu lang ist.

Mehrfachauswahl (Checkbox)

Hier steht wie auch bei der Einfachauswahl nur die Option „nebeneinander“ zur Verfügung. Sie verhält sich genau so wie oben beschrieben.

Auswahlliste

Hier können Sie zwischen folgenden Klassen wählen:

  • viertel-spalte
  • schmal
  • breit

Dies wirkt sich auf die Anzeigebreite des Eingabefeldes aus.

Input-Feld (Standard-Eingabefeld für Text)

Um den Typ des Feldes festzulegen, stehen Ihnen folgende Klassen zur Verfügung:

  • email
  • url
  • tel
  • number
  • date

Mit diesen fünf Klassen wird der Typ des Eingabefelds so gesetzt, dass z. B. auf Mobilgeräten die passende Tastatur angezeigt wird, oder der Browser spezielle Eingabefunktionalitäten bereitstellt..

Während bei diesen Feldern die Anzeigebreite automatisch gesetzt wird, können Sie die Breite von normalen Text-Eingabefeldern mit folgenden Klassen festlegen:

  • viertel_spalte
  • schmal
  • breit

Textarea (Freitextfeld)

Hier gibt es nur die zusätzliche CSS-Klasse „breit“. Diese lässt das Freitextfeld etwas größer darstellen.

Paragraph (Textelement)

Für dieses Element steht Ihnen die Klasse „box highlighted“ zur Verfügung. Dadurch wird der Text mit einem Rahmen und der Webauftritt-Farbe versehen.