Forms

Code

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" data-clear-btn="true">

  <label for="email">Email:</label>
  <input type="email" name="email" id="email" data-clear-btn="true">

  <label for="password">Password:</label>
  <input type="password" name="password" id="password" data-clear-btn="true">

  <label for="slider">Volume:</label>
  <input type="range" name="slider" id="slider"
         min="0" max="100" value="50" data-highlight="true">

  <label for="flip">Subscribe:</label>
  <select name="flip" id="flip" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select>

  <label for="select-choice">Choose:</label>
  <select name="select-choice" id="select-choice" data-native-menu="false">
    <option value="a">Option A</option>
    <option value="b">Option B</option>
  </select>

  <fieldset data-role="controlgroup">
    <legend>Toppings:</legend>
    <label for="c1"><input type="checkbox" name="c1" id="c1">Cheese</label>
    <label for="c2"><input type="checkbox" name="c2" id="c2">Mushroom</label>
  </fieldset>

  <button type="submit" class="ui-btn ui-btn-b">Submit</button>
</form>

Explanation

Standard form elements are auto-enhanced on page create: text inputs get a clear button with data-clear-btn, range inputs become sliders, and a select with data-role=slider renders as a flip toggle. controlgroup clusters checkboxes/radios into a styled list, and data-native-menu=false shows the custom dropdown.

More jQuery Mobile Snippets