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 ;-))