Formen gestalten

Nutzern helfen, das Formular mit ihrem bevorzugten Browser zu verwenden

Damit möglichst viele Personen auf Ihr Formular zugreifen können, verwenden Sie die für den Job erstellten Elemente: <input>, <textarea>, <select> und <button>. Dies ist die Grundlage für ein nutzungsfreundliches Formular.

Die Standardbrowser-Stile sehen nicht gut aus. Das können wir ändern.

Formularsteuerelemente sollten für alle lesbar sein

In den meisten Browsern ist die Standardschriftgröße für Formularsteuerelemente zu klein. Ändern Sie die Schriftgröße mit CSS, damit Ihre Formularsteuerelemente lesbar sind:

Erhöhen Sie font-size und line-height, um die Lesbarkeit zu verbessern.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Nutzern die Navigation durch das Formular erleichtern

Ändern Sie als Nächstes das Layout des Formulars und vergrößern Sie den Abstand der Formularelemente, damit Nutzer verstehen, welche Elemente zusammengehören.

Die CSS-Eigenschaft margin vergrößert den Abstand zwischen den Elementen und die padding-Eigenschaft vergrößert den Abstand um den Inhalt des Elements.

Verwenden Sie für das allgemeine Layout Flexbox oder Raster. Weitere Informationen zu CSS-Layoutmethoden

Dafür sorgen, dass Formularsteuerelemente wie Formularsteuerelemente aussehen

Machen Sie es den Nutzern einfach, Ihr Formular auszufüllen, indem Sie für die Formularsteuerelemente anschauliche Stile verwenden. Du kannst z. B. <input>-Elemente mit einem durchgehenden Rahmen gestalten. 

input,
textarea {
  border: 1px solid;
}

Nutzer beim Senden von Formularen unterstützen

Du kannst einen background für deine <button> verwenden, der zum Stil deiner Website passt, und die border-Standardformate überschreiben oder entfernen.

Nutzern helfen, den aktuellen Status zu verstehen

Browser wenden einen Standardstil für :focus an. Sie können die Designs für :focus überschreiben, damit die Farbe zu Ihrer Marke passt. 

button:focus {
    outline: 4px solid green;
}

Wissen testen

Testen Sie Ihr Wissen über das Gestalten von Formularen

Warum solltest du relative Einheiten für font-size verwenden?

Um sicherzustellen, dass die Größe den Präferenzen der Nutzenden entspricht.
🎉
Um sicherzustellen, dass die Größe auf das vorherige Element reagiert.
Versuch es noch einmal.
Um sicherzustellen, dass die Größe auf den dunklen Modus reagiert
Versuch es noch einmal.
Um sicherzustellen, dass die Größe auf Medienabfragen reagiert
Versuch es noch einmal.

Wie können Sie den Abstand zwischen Formularsteuerelementen vergrößern?

Über die CSS-Eigenschaft padding
Versuch es noch einmal.
Über die CSS-Eigenschaft spacer
Versuch es noch einmal.
Über die CSS-Eigenschaft margin
🎉
Über die CSS-Eigenschaft boundary
Versuch es noch einmal.

Ressourcen