jQuery Mobile form input
jQuery Mobile text input box
Enter the field through the standard HTML coding elements, jQuery Mobile will add their style to make it look more attractive and easier to use on mobile devices. You can also use the new HTML5 <input> Type:
Examples
<div class="ui-field-contain">
<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"
Tip: Use placeholder to specify a brief description that describes the expected value of the input field:
<input placeholder="sometext">
Text Field
For multi-line text input may use <textarea>.
NOTE: When you type some text, text fields will be automatically resized to fit the newly added row.
Examples
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
try it"
Search input box
type = "search" type of input box is new in HTML5, which is defined as an input text search fields:
Examples
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>
try it"
single button
When users select a limited number of select only one option when using the radio buttons.
In order to create a series of radio buttons, add the input and the corresponding label with type = "radio" is. The radio button enclosed within the <fieldset> element. You can also add a <legend> element to define <fieldset> title.
Tip: Use data-role = "controlgroup" button to put together:
Examples
<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"
Checkbox
When the user selects one or more options in a limited number of choices, use check boxes:
Examples
<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"
More examples
For a combination of horizontal radio buttons or check boxes, use the data-type = "horizontal":
You can also use a container field surrounded by <fieldset>:
Examples
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
try it"
If you want your button in a pre-selected, use the HTML <input> is checked attributes:
You can pop in on the form:
Examples
<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>
try it"