jQuery Mobile Form Input Elements
- Previous Page jQuery Mobile Form Basics
- Next Page jQuery Mobile Form Selection
jQuery Mobile Text Input
Input fields are written using standard HTML elements, and jQuery Mobile will apply special styles for mobile devices that are attractive and easy to use. You can also use new HTML5 <input> types:
Example
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="fullname">Full Name:</label> <input type="text" name="fullname" id="fullname"> <label for="bday">Birthday:</label> <input type="date" name="bday" id="bday"> <label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="Your email address.."> </div> </form>
Tip:Please use placeholder to specify a brief hint that describes the expected value of the input field:
<input placeholder="sometext">
Text Box
Please use <textarea> to implement multi-line text input.
Note:The text box will automatically expand to accommodate the number of lines of text you enter.
Example
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Search Box
The input type="search" is a new type in HTML5, used to define a text field for entering search terms:
Example
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search"
name="search" id="search">
</div>
</form>
Radio Buttons
Radio buttons are used when the user is to select only one option from a limited number of choices.
To create a set of radio buttons, add an input element with type="radio" and the corresponding label. Wrap the radio buttons in a <fieldset> element. You can also add a <legend> element to define the title of the <fieldset>.
Tip:Use the data-role="controlgroup" attribute to group these buttons:
Example
<form method="post" action="demoform.asp">
<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>
Checkboxes
Checkboxes are used when the user selects one or more options from a limited number of choices:
Example
<form method="post" action="demoform.asp"> <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
To group radio buttons or checkboxes horizontally, use the data-type="horizontal" attribute:
Example
<fieldset data-role="controlgroup" data-type="horizontal"
>
You can also use fieldset container to wrap <fieldset>:
Example
<div data-role="fieldcontain">
<fieldset data-role="controlgroup"> <legend>Choose your gender:</legend> </fieldset></div>
If you want to 'pre-select' one of the buttons, please use the checked attribute of the HTML <input> tag:
Example
<input type="radio">checked
> <input type="checkbox">checked
>
- Previous Page jQuery Mobile Form Basics
- Next Page jQuery Mobile Form Selection