Text inputs

Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.

General conventions

All forms should be wrapped in a form tag that has an action and method that will handle the form data processing on the server.

<form action="form.php" method="post"> ... </form>

To group the label and form element together for styling, we recommend wrapping a div with the data-role="fieldcontain" attribute. The framework will add a thin vertical line above this container to separate it visually from the next field.

				
<div data-role="fieldcontain">
	...label/input code goes here...
</div>

Text inputs

To collect standard alphanmeric text, use an input with a type="text" attribute. It's important to set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

The text input is displayed like this:

Password inputs

For password fields, use an input with a type="password" attribute. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
    <label for="password">Password Input:</label>
    <input type="password" name="password" id="password" value="" />
</div>

The password input is displayed like this:

Search inputs

Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an input with a type="search" attribute in your markup.

Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
    <label for="search">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

The search input is displayed like this:

Textareas

For multi-line text inputs, use a textarea element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device.

Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
	<label for="textarea">Textarea:</label>
	<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

The textarea is displayed like this and will grow as you type:

Sliders

To add a slider widget to your page, start with an input with a new HTML5 type="range" attribute. Specify the value (current value), min and max attribute values to configure the slider. The framework will parse these attributes to configure the slider.

As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
	<label for="slider">Input slider:</label>
 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

The slider and input is displayed like this:

Flip toggle switches

A binary "flip" switch is a common UI element on mobile devices that is used for any binary on/off or true/false type of data input. You can either drag the flip handle like a slider or tap on each half of the switch.

To create a flip toggle, To add a slider widget to your page, start with an select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
	<label for="slider2">Select slider:</label>
	<select name="slider2" id="slider2" data-role="slider">
		<option value="off">Off</option>
		<option value="on">On</option>
	</select> 
</div>

The flip toggle switch is displayed like this:

Radiobuttons

Radiobuttons are used to provide a list of options where only a single item can be selected. Traditional desktop radiobuttons are not optimized for touch input so in jQuery Mobile, we style the label for the radiobuttons so they are larger and look clickable. A custom set of icons are added to the label to provide visual feedback.

To create a flip toggle, To add a slider widget to your page, start with an select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

	
<div data-role="fieldcontain">
	<label for="slider2">Select slider:</label>
	<select name="slider2" id="slider2" data-role="slider">
		<option value="off">Off</option>
			<option value="on">On</option>
		</select> 
</div>

A radiobutton list is displayed like this:

Choose one: