YouTipJquerymobile Form Basic
* * *
jQuery Mobile automatically styles HTML forms to make them more attractive and more touch-friendly.
* * *
* * *
## jQuery Mobile Form Structure
jQuery Mobile uses CSS to style HTML form elements, making them more attractive and easier to use.
In jQuery Mobile, you can use the following form controls:
* Text input fields
* Search input fields
* Radio buttons
* Checkboxes
* Select menus
* Sliders
* Flip toggle switches
When using jQuery Mobile forms, keep in mind:
* The `` element must have both a `method` and an `action` attribute.
* Each form element must have a unique `id` attribute. The `id` must be unique across all pages of your entire site. This is because jQuery Mobile’s single-page navigation mechanism may render multiple different pages simultaneously.
* Each form element must have a label. Set the label’s **for** attribute to match the element’s `id`.
## Example
[Try it yourself »](#)
To hide the label, use the class `ui-hidden-accessible`. This is commonly used when you use the element’s `placeholder` attribute as the label:
## Example
[Try it yourself »](#)
**Tip:** You can add a clear button (an “X” icon on the right side of the input field) by using the `data-clear-btn="true"` attribute:
## Example
[Try it yourself »](#)
|  | The clear button can be used with `` elements, but not with `