Störung

Gut gestaltete Formulare helfen Nutzern und steigern die Conversion-Raten. Eine kleine Änderung kann schon viel bewirken!

Hier ist ein Beispiel für ein einfaches Zahlungsformular, das alle Best Practices veranschaulicht:

Hier sehen Sie ein Beispiel für ein einfaches Adressformular, das alle Best Practices veranschaulicht:

Beispielsweise gibt der folgende HTML-Code eine Eingabe für ein Geburtsjahr zwischen 1900 und 2020 an. Bei Verwendung von type="number" werden Eingabewerte auf Zahlen innerhalb des durch min und max angegebenen Bereichs beschränkt. Wenn Sie versuchen, eine Zahl außerhalb des Bereichs einzugeben, wird der Eingabestatus auf einen ungültigen Status festgelegt.

Im folgenden Beispiel wird pattern="[\d ]{10,30}" verwendet, um eine gültige Zahlungskartennummer zu erhalten. Dabei sind Leerzeichen zulässig:

Moderne Browser führen auch eine grundlegende Validierung für Eingaben mit dem Typ email oder url durch.

CSS-Rasterlayout

Mit dem CSS-Grid-Layout können auf einfache Weise flexible Raster erstellt werden. Wenn wir das frühere Beispiel mit einer Gleitkommazahl betrachten, können wir die Spalten nicht mit Prozentsätzen erstellen, sondern stattdessen das Rasterlayout und die fr-Einheit verwenden, die einen Teil des verfügbaren Platzes im Container darstellt.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Sie können auch regelmäßige Raster- layouts mit beliebig vielen Elementen erstellen. Die Anzahl der verfügbaren Titel wird reduziert, wenn der Bildschirm kleiner wird. In der folgenden Demo haben wir so viele Karten, wie in jede Zeile passen. Die Mindestgröße ist 200px.

Weitere Informationen zum CSS-Rasterlayout

Mehrspaltiges Layout

Für einige Layouttypen können Sie das mehrspaltige Layout (Multicol) verwenden. Damit können mit der Eigenschaft column-width responsive Zahlen von Spalten erstellt werden. In der folgenden Demo sehen Sie, dass Spalten hinzugefügt werden, wenn Platz für eine weitere 200px-Spalte ist.