jQuery Mobile Form Input

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Form Input Elements

« Previous
Next Chapter »

## 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="demoform.asp">
<div data-role="fieldcontain">
<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 »

Tip: Use a placeholder to specify a short hint that describes the expected value of an input field:

<input placeholder="sometext">

## 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

<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 Input

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

## 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 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="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 a user can select one or more options of 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":

## Example

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

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

## Example

<div data-role="fieldcontain">
<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 »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE