Formen gestalten

Nutzern dabei helfen, das Formular mit ihrem bevorzugten Browser zu verwenden

Damit Ihr Formular für möglichst viele Personen zugänglich ist, verwenden Sie die Elemente, die für die Job: <input>, <textarea>, <select> und <button>. Dies ist die Grundlage für ein brauchbares Formular.

Die Standardstile des Browsers sehen nicht so toll aus. Das ändern wir.

Sicherstellen, dass Formularsteuerelemente für alle lesbar sind

Die Standardschriftgröße für Formularsteuerelemente ist in den meisten Browsern zu klein. Damit Ihre Formularsteuerelemente lesbar sind, ändern Sie die Schriftgröße mit CSS:

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 im Formular erleichtern

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

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

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

Sicherstellen, dass Formularsteuerelemente wie Formularsteuerelemente aussehen

Machen Sie es den Nutzern leicht, Ihr Formular auszufüllen, indem Sie vertraute Stile für die Steuerelemente verwenden. Du kannst beispielsweise <input>-Elemente mit einem durchgehenden Rahmen gestalten. 

input,
textarea {
  border: 1px solid;
}

Nutzern beim Einreichen des Formulars helfen

Sie können ein background für <button> verwenden, das zum Stil Ihrer Website passt. und überschreiben oder entfernen Sie die standardmäßigen border-Stile.

Nutzern den aktuellen Status vermitteln

In Browsern wird ein Standardstil für :focus angewendet. Sie können die Stile für :focus überschreiben, um die Farbe an Ihre Marke anzupassen. 

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

Wissen testen

Testen Sie Ihr Wissen über das Gestalten von Formularen

Warum sollten Sie 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 dem vorherigen Element entspricht
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 lässt sich der Abstand zwischen den Formularsteuerelementen vergrößern?

Mithilfe der CSS-Eigenschaft padding.
Versuch es noch einmal.
Mithilfe der CSS-Eigenschaft spacer.
Versuch es noch einmal.
Mithilfe der CSS-Eigenschaft margin.
🎉
Mithilfe der CSS-Eigenschaft boundary.
Versuch es noch einmal.

Ressourcen