Easy Tutorial
Jquerymobile Pages Event Pageload Jquerymobile Grids Jquerymobile List Views Jquerymobile Events Page Jquerymobile Popups Event Pagebeforeshow Event Pagebeforehide Jquerymobile Events Scroll Jquerymobile Tutorial Jquerymobile List Content Jquerymobile Tables Jquerymobile Install Jquerymobile Themes Jquerymobile Collapsibles Jquerymobile Navbars Event Pageinit Event Pagebeforecreate Event Pagecreate Jquerymobile Ref Data Jquerymobile Ref Css Event Scrollstop Jquerymobile Panels Event Pagecontainerload Event Pagecontainerloadfailed Jquerymobile Form Basic Jquerymobile Transitions Event Swipeleft Jquerymobile Ref Icons Jquerymobile Events Event Pagebeforeload Jquerymobile Form Select Jquerymobile Icons Event Pageshow Jquerymobile Form Sliders Event Swiperight Event Pagehide Jquerymobile Events Touch Jquerymobile Toolbars Jquerymobile Events Orientation Event Swipe Jquerymobile Intro Jquerymobile Buttons Event Taphold Event Tap Jquerymobile Ref Events Event Scrollstart Jquerymobile Form Inputs Event Pageloadfailed Event Pagecontainerbeforeload Jquerymobile Examples Jquerymobile Filters Event Orientationchange
❮ Event Scrollstart Event Pageloadfailed ❯

jQuery Mobile Form Input Elements

jQuery Mobile Text Input

Input fields are coded with standard HTML elements, and jQuery Mobile styles them to be more attractive and easier to use on mobile devices. You can also use the new HTML5 <input> types:

Example

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

<input placeholder="sometext">

Text Area

For multi-line text input, use the <textarea> element.

Note: When you type some text, the text area will automatically adjust its size to accommodate the new lines.

Example

Search Input

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

Example

Radio Buttons

Use radio buttons when the user needs to select only one option from a limited number of choices.

To create a set of radio buttons, add input elements with type="radio" and corresponding labels. Enclose the radio buttons within 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

Checkboxes

Use checkboxes when the user needs to select one or more options from a limited number of choices:

Example

More Examples

To group radio buttons or checkboxes horizontally, use data-type="horizontal":

Example

You can also enclose the <fieldset> within a field container:

Example

If you want one of your buttons to be pre-selected, use the checked attribute in the HTML <input>:

Example

You can place the form in 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.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>
❮ Event Scrollstart Event Pageloadfailed ❯