The best jQuery Mobile form input Tutorial In 2024, In this tutorial you can learn
jQuery Mobile text input box,Examples,Text Field,Examples,Search input box,Examples,single button,Examples,Checkbox,Examples,More examples,Examples,Examples,Examples,Examples,
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
<form method="post" action="demo_form.php">
<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="你的电子邮箱/en">
</div>
</form>
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
<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea
name="addinfo" id="info"></textarea>
</div>
</form>
Search input box
type = "search" type of input box is new in HTML5, which is defined as an input text search fields:
Examples
<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input
type="search" name="search" id="search">
</div>
</form>
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
<form method="post" action="demo_form.php">
<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>
Checkbox
When the user selects one or more options in a limited number of choices, use check boxes:
Examples
<form method="post" action="demo_form.php">
<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>
More examples
For a combination of horizontal radio buttons or check boxes, use the data-type = "horizontal":
Examples
<fieldset data-role="controlgroup" data-type="horizontal">
You can also use a container field surrounded by <fieldset>:
Examples
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
If you want your button in a pre-selected, use the HTML <input> is checked attributes:
Examples
<input type="radio" checked>
<input type="checkbox" checked>
You can pop in on the form:
Examples
<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>