jQuery Mobile Form Input

# 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 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="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 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="demoform.asp">
<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 »
« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples