What is the best way to use a radio button in an iPhone web app?

I'm creating a web application that is optimized for the iPhone (but also should work on all mobile devices). I have a form field that includes one standard text input and then need a开发者_如何学编程 radio button group with two options (Inbound/Outbound). The radio button makes the most sense logically since one option should be selected by default and only one should be selected at a time.

After creating the form though, I'm unhappy with the default user interface of the radio buttons on the iPhone. They are too small, and most importantly there doesn't seem to be a way to use the keyboard on the iPhone to click next through the form. The text field is first, then the radio button group, then submit. I can't figure out a way to get the previous/next buttons to click through my form. Is this even possible?

If I can't make the radio buttons work like I want, what other options are available? Is something like iButton jQuery Plug-in the best option? It seems like a lot to have to import the entire jQuery framework when my app is designed to get the user the info they need as quickly as possible with as few clicks as possible.

Have you checked out http://www.jqtouch.com? It's a jQuery plugin for mobile development for the iPhone. It has a lot of functionality that you might want.

Also, to answer your question more directly. Yes the radio button is way too small for mobile browsers. The best solution (in my opinion) is to use something like jQTouch which comes with themes that work really well for the iPhone.

The only problem is that jqtouch's implementation of radio buttons is currently broken. They've promised a fix, and there is a workaround as long as you host the framework yourself.

http://code.google.com/p/jqtouch/issues/detail?id=109 - the workaround

You can also use iButton.js, but it requires a bit of trickery to make it compatible with jQTouch. See my post here:

http://groups.google.com/group/jqtouch/browse_thread/thread/2929226aebb60274