jQuery Mobile: How to Create Radio Buttons

One of the great things about jQuery Mobile is its ability to beautifully style forms for mobile devices since it includes CSS to do all the work for us. If you aren’t sure what jQuery Mobile is or how to get started then I recommend you take a quick look at jQuery Mobile: How to Create Your First Page.

The code below will create radio buttons which will be grouped vertically by implementing the data-role of “controlgroup”.┬áNote the class “ui-field-contain” being used to style labels and form controls based upon the width of the page. In addition, the HTML <fieldset> tag is used to group elements in a form.

<form class="ui-field-contain">
 <fieldset data-role="controlgroup">
  <legend>How do you say 'apple' in French?</legend>
  <label for="pear">la poire</label>
  <input type="radio" name="apple" id="pear" value="pear">
  <label for="apple">la pomme</label>
  <input type="radio" name="apple" id="apple" value="apple"> 
  <label for="banana">la banane</label>
  <input type="radio" name="apple" id="banana" value="banana"> 

The code above will generate the following in a browser:

jQuery Mobile used to create a multiple choice quiz

The next step is to consider adding a “Check Answer” button in order to add some kind of interactivity you are needing. The post on creating a multiple choice quiz with feedback provides the code you need.


Comments (0)

Leave a Comment