Text inputs

Home

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.

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:

More standard HTML5 input types

In jQuery Mobile, you can use new HTML5 input types such as email, tel, number, and more. We actively degrade certain types to type=text (currently, range and search) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the page plugin's options.

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: