jQuery Mobile form input
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile form input element
jQuery Mobile text input box
Input fields are encoded with standard HTML elements, and jQuery Mobile styles them to make them look more attractive and easier to use on mobile devices. You can also use the new HTML5's slt;input> type:
<div data-role="fieldcontain">
<label for="fullname">全名:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">生日:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱..">
</div>
</form>
Try it out . . .
Tip: Use placeholder to specify a short description of the expected values of the input field:
The text field
For multi-line text input, you can use slt;textarea.
Note: When you type some text, the text field automatically resizes to accommodate the newly added lines.
<div data-role="fieldcontain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Try it out . . .
Search the input box
The type-"search" type input box is new in HTML5, which defines a text field for the input search:
<div data-role="fieldcontain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>
Try it out . . .
The option button
Use the turn button when the user selects only one option out of a limited number of choices.
In order to create a series of radio buttons, add input with type "radio" and the corresponding label. S urround the turn buttons within the element of the slt;fieldset. You can also add an element to define the title of the .lt;fieldet.
Tip: Please use data-role"controlgroup" to put the buttons together:
<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 out . . .
Check box
Use the check box when the user selects one or more options in a limited number of choices:
<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 out . . .
More instances
To combine the options or check boxes horizontally, use the data-type"horizontal":
You can also surround it with a field container.
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
Try it out . . .
If you want one of your buttons to be preselected, use the checked property in HTML:
Related articles
HTML tutorial: HTML forms