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?
Wie können Sie den Abstand zwischen Formularsteuerelementen vergrößern?
padding
spacer
margin
boundary