Thomas Bandt

Über mich | Kontakt | Archiv

HTML & CSS3 - Radio-Buttons und Checkboxen für Touch-Geräte

Der Umgang mit Daten in Formularen wird mit HTML5 immer besser, zum Beispiel durch neue Textbox-Typen wie Datum, E-Mail usw. die Touch-Geräten (am Desktop macht es ja wenig Sinn) dann automatisch für ein verändertes Tastatur-Layout sorgen. So muss man dann z.B. für eine E-Mail-Adresse das @-Zeichen nicht aus der zweiten Ebene herauskramen, sondern hat es sofort präsent. Auch das neue Range-Control ist nützlich, sofern es irgendwann mal in Webkit unterstützt werden solle (in iOS 5 ist es angekündigt).

Worüber man sich scheinbar noch keine Gedanken gemacht hat, ist die verbesserte Unterstützung für Checkboxen (ja/nein) und Radio-Buttons. Diese kommen ganz klassisch wie immer daher. Das ist okay und lässt sich auch bedienen, aber es ist eben nicht optimal, wenn man mit seinen Fingern einen winzigen Kreis oder ein kleines Quadrat treffen muss.

Wie wäre es denn, wenn man aus Checkboxen und Radio-Buttons einfach - der Eingabeart gerecht werdend - Buttons machen würde?

Eine Möglichkeit, die absolut einfach zu konfigurieren und ohne Aufwand zu implementieren ist, ist die Verwendung von jQuery UI. Einfach über ein Radio-Button-Set drüberziehen, fertig. Leider hat sich das in der Praxis bei uns als ziemlich träge herausgestellt, so dass es in komplexeren Formularen mit bis zu 20 Button-Sets pro Seite erst einmal initial sehr lange dauert, bis die Buttons gerendertt werden, und dann auch das Übernehmen einer Änderung z.B. auf dem iPad der ersten Generation gefühlte zwei Gedenksekunden gebraucht hat.

Das muss doch einfacher gehen - gesagt, getan. Da wir bei Touch-Geräten heute von überwiegend sehr modernen Browsern sprechen, die allesamt zumindest die wichtigsten CSS3-Funktionen unterstützen, ist auch eine Lösung, die (fast) allein auf CSS3 basiert, möglich. Diese schlägt die Script-basierte Variante von jQuery-UI in Sachen Geschwindigkeit natürlich um Längen.

Was ist zu tun?

Voraussetzung ist, dass jede Checkbox oder jeder Radio-Button ein ihm zugewiesenes Label bekommt, was ja sowieso immer ratsam ist. Dieses Label funktioniert man optisch einfach zu einem Button um und blendet das eigentliche Formular-Element aus. Da das Label mit dem Element assoziiert ist, werden auch Änderungen - also checked und unchecked - weitergegeben. Ebenso wird der Status für bereits gecheckte Elemente sofort erkannt, so dass man sich um die Status-Verwaltung gar keine Gedanken machen muss.

Allein für iOS braucht es ein wenig Nachhilfe, weil hier der "Antipper" auf das Label nicht an das Formularelement weitergegeben wird. Da man aber ja die Information während des Klick-Events besitzt, welcher Checkbox oder welchem Radio-Button das geklickte Label zugeordnet ist, ist auch das kein Problem.

Hier findet sich das oben dargestellte Beispiel, welches in jedem modernen Browser ausführbar ist - natürlich und insbesondere auch mit Touch-Geräten. Der Quellcode findet sich im Quellcode ;-).

(P.s.: Es geht natürlich auch ohne den ganzen Verlaufs-Firlefanz und damit mit noch weniger CSS - es sieht halt nur einfach schicker aus ;-))

Kommentare

  1. Herbert schrieb am Montag, 11. Juli 2011 10:38:00 Uhr:

    zu http://blog.thomasbandt.de/content/demos/touchbuttons.htm

    Unter Vista
    - mit IE9 wird das Text/Design nicht angezeigt. :-(
    - mit Firefox 5 wird zwar der Text angezeigt, aber nicht das Design :-(

    Abwärtkompatibilität fehlt, aber die Idee ist Klasse ;-)
  2. Thomas schrieb am Montag, 11. Juli 2011 11:20:00 Uhr:

    Mit IE und Firefox muss es auch gar nicht laufen, da Mobile Safari, Opera Mobile und der Android-Browser das Ziel sind. Entsprechend habe ich es auch gar nicht in den anderen beiden getestet.
  3. Herbert schrieb am Montag, 11. Juli 2011 14:10:00 Uhr:

    Auf dem Handy Nokia N8 mit Opera Mobile 11.0, sieht es aus wie in Firefox. Hintergundfarbe fehlt.

    So, jetzt mal schnell updaten auf 11.1, ja da geht richtig ;-)
  4. Thomas schrieb am Montag, 11. Juli 2011 15:09:00 Uhr:

    Interessant, da scheint Opera die CSS-Unterstützung ja gerade erst vor Kurzem angepasst zu haben. Danke für den Hinweis :)


« Zurück  |  Weiter »