Responsive Formulare

Große Felder, große Button

Selbst am Desktop-Rechner sind Eingabefelder, Checkboxen und Radio-Buttons heute zu klein. Sie stammen aus der Frühzeit des WWW, als die Monitore gerade den Sprung von 640 x 480px Auflösung auf sagenhaften 1024 x 768px durchzogen und Webdesigner sich alle Mühe gaben, dem Benutzer das Scrollen abzunehmen.
Der Text in Eingabefeldern wird per Voreinstellung mit einer Schriftgröße von 11px gerendert. Eingabefelder für Text kommen mit einer Auflösung von 146 x 19px daher, Checkboxen und Radio-Buttons sind gerade mal 12×12 Pixel groß.

Größere Eingabefelder sind für alle Monitore eine Erleichterung.
HTML label macht das Formular responsiver: label mit padding vergrößert die sensitive Fläche für den Finger und auch für die Maus.
Die type-Attribute für input aus HTML5 rücken auf mobilen Geräten sofort die angepasste Tastatur mit ihren Sonderzeichen für Emailadressen oder die numerische Tastatur heraus.

Regeln für benutzerfreundliche Formulare

100% Breite für Felder & Buttons
Touchscreen-freundliche Abstände & Schriftgrößen
Automatische Tastatur-Anpassung mit type="email" usw.
Fehlermeldungen und klare Labels für Benutzerfreundlichkeit
Platzhalter (placeholder) nicht als Ersatz für Labels nutzen (weil sie verschwinden).

Eingabetyp	Attribut	Effekt
Name/Text	`<input type="text" autocomplete="name">`	Normale Tastatur
E-Mail	`<input type="email" autocomplete="email">`	`@` und `.` sofort sichtbar
Telefonnummer	`<input type="tel">`	Ziffernblock
Zahleneingabe	`<input type="number">`	Numerische Tastatur

Formular für kleine und große ViewPorts

Das Formular braucht keine Breakpoints, sondern begnügt sich mit einer maximalen Breite.

CSS transition wirkt auch bei Eingabefeldern von Formularen.

Große Radiobuttons

<label>
	...
	<input type="radio" name="bonus">
	<span></span>
</label>

Zwar lassen sich Radio-Buttons und auch Checkboxen mit CSS transform: scale() vergrößern, wirken dann aber auch schnell pixelig. Ohne Ersatzbild, ohne Javascript, einfach nur CSS entsteht ein Radio-Button aus einem Rahmen (border) und einem gefüllten div. Das eigentliche input-Element wird mit display:none unsichtbar und durch das gestylte span ersetzt.

.formdemo input { display: none}
.formdemo span {
    display: inline-block;
    width: 18px; /* Größe des Buttons */
    height: 18px;
    border: 2px solid cornflowerblue;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
}

.formdemo input:checked + span::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: cornflowerblue;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Feine Label

Wenn das label-Tag nicht vor dem input-Feld sitzt, sondern das Eingabefeld als Wrapper einpackt, wird der touch-sensitive Bereich erweitert. Dann treffen auch ganz normale Finger das Eingabefeld auf Anhieb und input fängt den Fokus besser.

<label>
    <span>Email</span>
    <input placeholder="Email" type="email" name="name" value="" />
</label>
<label><input type="radio" name="wahl" value="rot" /> Rot</label>
<label><input type="radio" name="wahl" value="blau" /> Blau </label>
<label><input type="radio" name="wahl" value="gelb" /> Gelb </label>

Das for-Attribut muss nicht eingesetzt werden, wenn das label-Tag das Eingabefeld einwickelt. Besonders wirksam ist das Einpacken von input-Tags in label-Tags für Radio-Buttons und Checkboxen. 40×40 Pixel soll die Fläche für einen Touch mit dem Finger mindestens betragen.

Rot
Blau
Gelb

Die label-Felder im Beispiel sind farbig hinterlegt, damit man ihre Größe besser erkennt. cursor: pointer zeigt der Maus, dass sie großzügig zuschlagen kann – auf dem Touchscreen ist ein zart unterlegter Hintergrund eine nette Geste.

label span { display: inline-none; }
@media (min-width: 720px) {
    label span { display: block; }
}
@media (min-width: 980px) {
    label span { display: inline-block; }
}

Lieber type=radio als select?

Wenn die Wahlmöglichkeiten begrenzt sind, ist input type=radio informativer, weil es immer alle Optionen anzeigt und nur eine Aktion erfordert. Der Benutzer müsste die select-Liste erst aufklappen, bevor er seine Wahl treffen kann.

Welches Wetter wollt ihr?

☀ Sonnenschein
☁ Bewölkt
☂ Dauerregen
☃ Schnee

Bilder für option-Tag easy
Natürlich bezaubert der geringere Platzbedarf für das select-Tag gegenüber den radio-Buttons. Zudem ist das Scripting eines select-Elements eleganter und einfacher (select reagiert auf »onchange«, während bei Radio-Buttons jeder einzelne Button einen onclick-Event-Handler braucht).
Auf den Monitoren von Handy werden die einzelnen Felder von Formularen sowieso linear eines nach dem anderen aufgeführt.