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.
- Das HTML-placeholder-Attribut hält das Formular auf kleinen Monitoren kompakt.
- 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.
Formulare für unterschiedliche Monitorgrößen
Das Formular hat zwei Breakpoints – drei CSS-Bereiche für unterschiedliche Viewport-Größen. Wenn das Browserfenster kleiner oder größer gezogen wird, zeigt das Formular drei Layouts: für die ganz kleinen Viewports, für mittelgroße und für große Browserfenster.
CSS transition wirkt auch bei Eingabefeldern von Formularen.
placeholder
input[type="text"],
input[type="email"],
input[type="date"] {
width:99%; font-size:1em; outline: 0;
transition: border-bottom-color 1s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus {
border-bottom-color: blue;
}
Das placeholder-Attribut verwirrt Benutzer schon mal, weil es beim Fokus nicht verschwindet und sich nicht markieren und löschen läßt. Bevor placeholder auf dem Plan trat, hat ein kleines Javascript den Hilfetext in das input-Feld gesetzt und ihn bei der Aktivierung des Feldes gelöscht. Ein ähnliches Script entfernt jetzt das placeholder-Attribut und setzt es wieder ein, wenn das Feld beim Verlassen nicht ausgefüllt wurde.
var demoform = document.querySelectorAll('#demoform input');
var placeholder = [];
for (var i=0; i<demoform.length; i++) {
demoform[i].onfocus = function (){
placeholder [i] = this.getAttribute('placeholder');
this.removeAttribute ('placeholder')
}
demoform[i].onblur = function (){
this.setAttribute ('placeholder',placeholder[i])
}
}
Im Grunde genommen könnten wir die Beschriftung der Felder allein durch das placeholder-Attribut regeln, damit die Beschriftung in modernen Browsern nicht doppelt gemoppelt erscheint.
Die Beschriftung durch label bleibt eine unersetzliche Hilfestellung für die Barrierefreiheit.
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.
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; }
}
Auf kleinen Monitoren fällt der label-Text weg. Das placeholder-Attribut gibt den Ton an, reduziert den Platzbedarf und sorgt auf kleinen Monitoren für einen besseren Überblick. Auf mittelgroßen Monitoren sitzt das Label über dem Eingabefeld, auf großen Monitoren neben dem Eingabefeld.
Am Ende kann das HTML-label-Tag auch die Darstellung der kleinen Checkboxen und Radio-Buttons durch eine Grafik ersetzen – ohne Javascript mit wenigen Zeilen CSS.
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.
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.