THE WORLD'S LARGEST WEB DEVELOPER SITE

jQuery Mobile Form Input Elements


jQuery Mobile Text Inputs

Input fields are coded with standard HTML elements, and jQuery Mobile will style them to look attractive and easy-to-use for mobile devices. You can also use the new HTML5 <input> types:

Example

<form method="post" action="/action_page_post.php">
  <div class="ui-field-contain">
    <label for="fullname">Full name:</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">Date of Birth:</label>
    <input type="date" name="bday" id="bday">

    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Your email..">
  </div>
</form>
Try it Yourself »

Text area

Use <textarea> for multi-line text inputs.

Note: The text area will automatically grow to fit new lines as you type some text.

Example

<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
Try it Yourself »

Search Input

The input type="search" is new in HTML5, and defines a text field for entering a search:

Example

<label for="search">Search:</label>
<input type="search" name="search" id="search">
Try it Yourself »

Radio Buttons

Radio buttons are used when a user can select only one of a limited number of choices.

To create a set of radio buttons, add an input with type="radio" and a corresponding label. Wrap the radio buttons in a <fieldset> element. You can also add a <legend> element to define a caption for the <fieldset>.

Tip: Use data-role="controlgroup", to group the buttons together:

Example

<form method="post" action="/action_page_post.php">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Female</label>
      <input type="radio" name="gender" id="female" value="female">
  </fieldset>
</form>
Try it Yourself »

Checkboxes

Checkboxes are used when a user can select one or more options of a limited number of choices:

Example

<form method="post" action="/action_page_post.php">
  <fieldset data-role="controlgroup">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue">
  </fieldset>
</form>
Try it Yourself »

More Examples

To group radio buttons or checkboxes horizontally, use the data-type="horizontal":

Example

<fieldset data-role="controlgroup" data-type="horizontal">
Try it Yourself »

You can also wrap a field container around the <fieldset>:

Example

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>
Try it Yourself »

If you want one of your buttons to be "pre-selected", use the HTML <input> checked attribute:

Example

<input type="radio" checked>
<input type="checkbox" checked>
Try it Yourself »

You can also place your form inside a popup:

Example

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content">
  <form method="post" action="/action_page_post.php">
    <div>
      <h3>Login information</h3>
      <label for="usrnm" class="ui-hidden-accessible">Username:</label>
      <input type="text" name="user" id="usrnm" placeholder="Username">
      <label for="pswd" class="ui-hidden-accessible">Password:</label>
      <input type="password" name="passw" id="pswd" placeholder="Password">
    </div>
  </form>
</div>
Try it Yourself »