Responsive Formulare

Responsive Formulare

Formulare machen dem Benutzer mit mobilen Geräten das Ausfüllen schwer. Ohne besondere Auszeichnung durch angepasstes CSS sind die Eingabefelder mikroskopisch klein.

  • Größere Eingabefelder sind für alle Monitore eine Erleichterung.
  • HTML label macht das Formular responsiver: Etwas padding vergrößert die sensitive Fläche für den Finger.
  • Das HTML5-placeholder-Attribut hält das Formular auf kleinen Monitoren kompakt.
  • Die type-Attribute für input aus HTML5 rücken sofort die angepasste Tastatur mit ihren Sonderzeichen für Emailadressen 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.

placeholder

CSS transition wirkt auch bei Eingabefeldern von Formularen.

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 Hilfestellung für die Barrierefreiheit und für die letzten überlebenden IE8-Benutzer.

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.

Welches Wetter wollt ihr?


Welches Wetter wollt ihr?





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.