jQuery Mobile Form Input Elements

jQuery Mobile Text Input

Input fields are written using standard HTML elements, and jQuery Mobile will apply special styles for mobile devices that are attractive and easy to use. You can also use new HTML5 <input> types:

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Birthday:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Your email address..">
  </div>
</form>

Try It Yourself

Tip:Please use placeholder to specify a brief hint that describes the expected value of the input field:

<input placeholder="sometext">

Text Box

Please use <textarea> to implement multi-line text input.

Note:The text box will automatically expand to accommodate the number of lines of text you enter.

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Try It Yourself

Search Box

The input type="search" is a new type in HTML5, used to define a text field for entering search terms:

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Try It Yourself

Radio Buttons

Radio buttons are used when the user is to select only one option from a limited number of choices.

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

Tip:Use the data-role="controlgroup" attribute to group these buttons:

Example

<form method="post" action="demoform.asp">
  <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 the user selects one or more options from a limited number of choices:

Example

<form method="post" action="demoform.asp">
  <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" attribute:

Example

<fieldset data-role="controlgroup" data-type="horizontal">

Try It Yourself

You can also use fieldset container to wrap <fieldset>:

Example

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>

Try It Yourself

If you want to 'pre-select' one of the buttons, please use the checked attribute of the HTML <input> tag:

Example

<input type="radio"> checked>
<input type="checkbox"> checked>

Try It Yourself