Störung

Gut gestaltete Formulare unterstützen Nutzer und erhöhen die Conversion-Raten. Schon eine kleine Änderung kann einen großen Unterschied machen.

Wenn Sie diese Best Practices lieber in einem Tutorial kennenlernen möchten, sehen Sie sich die beiden Codelabs an: Best Practices für Zahlungsformulare und Best Practices für Adressformulare.

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

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

Im folgenden HTML-Code wird beispielsweise eine Eingabe für ein Geburtsjahr zwischen 1900 und 2020 angegeben. Wenn Sie type="number" verwenden, sind nur Zahlen zulässig, die im Bereich zwischen min und max liegen. Wenn Sie versuchen, eine Zahl außerhalb des Bereichs einzugeben, wird die Eingabe als ungültig festgelegt.

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

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

CSS-Rasterlayout

Mit dem CSS-Rasterlayout können Sie ganz einfach flexible Raster erstellen. Wenn wir uns das vorherige Beispiel mit den schwimmenden Elementen ansehen, könnten wir anstelle der Spalten mit Prozentsätzen das Rasterlayout und die Einheit fr verwenden, die einen Teil des verfügbaren Platzes im Container darstellt.

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

Mit dem Raster können Sie auch regelmäßige Rasterlayouts mit so vielen Elementen erstellen, wie sie passen. Je kleiner der Bildschirm ist, desto weniger Titel sind verfügbar. In der Demo haben wir so viele Karten wie in jede Zeile passen, mit einer Mindestgröße von 200px.

Weitere Informationen zum CSS-Rasterlayout

Mehrspaltiges Layout

Für einige Layouttypen können Sie das Layout mit mehreren Spalten (Multicol) verwenden, mit dem sich mithilfe des Attributs column-width eine responsive Anzahl von Spalten erstellen lässt. In der Demo sehen Sie, dass Spalten hinzugefügt werden, wenn Platz für eine weitere 200px-Spalte vorhanden ist.