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?
Wie lässt sich der Abstand zwischen den Formularsteuerelementen vergrößern?
margin
.padding
.spacer
.boundary
.