jQuery Mobile Form Input Elements
jQuery Mobile Text Input
Input fields are coded through standard HTML elements, and jQuery Mobile will add styles for them to make them look more attractive and easier to use on mobile devices. You can also use the new HTML5 <input> types:
Example
<div class="ui-field-contain">
<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">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
Try it Yourself »
Tip:Use placeholder to specify a short description that describes the expected value of the input field:
<input placeholder="sometext">
Textarea
For multi-line text input, you can use <textarea>.
Note:When you type some text, the textarea will automatically resize to accommodate newly added lines.
Example
<div class="ui-field-contain">
<label for="info">Additional info:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Try it Yourself »
Search Input
The input with type="search" is new in HTML5, and it defines a text field for entering a search:
Example
<div class="ui-field-contain">
<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 can select only one option from a limited number of choices.
To create a series 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 the title of the <fieldset>.
Tip:Use data-role="controlgroup" to group the buttons together:
Example
<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 can select one or more options from a limited number of choices:
Example
<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 data-type="horizontal":
You can also wrap the <fieldset> with a field container:
Example
<fieldset data-role="controlgroup">
<legend>Please select your gender:</legend>
</fieldset>
</div>
Try it Yourself »
If you want one of your buttons to be pre-selected, use the checked attribute of <input> in HTML:
You can put the form in a popup:
Example
<div data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.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 »