WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Forms


jQuery Mobile naturally style HTML structures to make them look connecting with and contact friendly.



jQuery Mobile Form Structure

jQuery Mobile uses CSS to style HTML structure components, making them appealing what's more, simple to use.

In jQuery Mobile you can utilize the accompanying structure controls:

  • Text Inputs
  • Search Inputs
  • Radio Buttons
  • Checkboxes
  • Select Menus
  • Sliders
  • Flip Toggle Switches

When working with jQuery Mobile structures you ought to know:

  • The <form> component must have a technique and an activity attribute
  • Each structure component must have a novel "id" property. The id must be one of a kind over the pages in the site. This is on the grounds that jQuery Mobile's single-page route demonstrate permits a wide range of "pages" to be available at the equivalent time
  • Each structure component must have a name. Set the for ascribe of the name to coordinate the id of the element

Example

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>
Try it yourself »

Tip: Use a placeholder to indicate a short insight that portrays the normal estimation of an information field:

Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
Try it yourself »

Tip: To shroud the name, utilize the "ui-covered up accessible" class. This is regularly utilized when you need the component's placeholder ascribe to fill in as the label:

Example

<label for="fname" class="ui-covered up accessible"">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
Try it yourself »

Tip: If you need a "clear button" (a X symbol on the correct side of the info field that clears the substance of the field), include the information clear-btn="true" attribute:

Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
Try it yourself »


jQuery Mobile Form Buttons

Buttons in structures are coded with standard HTML <input> components (catch, reset, submit). They are naturally styled, making them alluring and simple to-utilize on both cell phones and work area computers:

Example

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
Try it yourself »

To moreover style a <input> catch, utilize any of the information * properties recorded in the table below:

Bold esteem shows default value.

Attribute Value Description
data-corners true | false Specifies whether the catch ought to have adjusted corners or not
data-icon Icons Reference Specifies the symbol of the button
data-iconpos left | right | top | base | notext Specifies the situation of the icon
data-inline true | false Specifies whether the catch ought to be inline or not
data-mini true | false Specifies whether the catch ought to be little or not
data-shadow true | false Specifies whether the catch ought to have shadows or not

Include or prohibit the attribute(s) you need/don't want:

<input type="submit" value="Submit" information icon="check" information iconpos="right" information inline="true">
Try it yourself »

Field Containers

To make names and structure components look appropriately on more extensive screens, wrap a <div> or <fieldset> component with the "ui-field-contain" class around the name/structure element:

Example

<form method="post" action="demoform.asp">
  <div class="ui-field-contain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Tip: To avert jQuery Mobile to naturally style tappable/interactive components, utilize the information role="none" attribute:

Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
Try it yourself »