Barry's jQuery Mobile Demos: Form Basics

Form Basics

jQuery Mobile also adds features to HTML forms. Most of the additional features are through appearance changes using CSS but there are some extra features introduced that enhance the mobile device form.

There are three important restrictions when using jQuery Mobile forms:

  1. Each form element must have a unique id attribute. Unique means unique across all <form> tags because, as you have seen, you can define multiple pages in one HTML document.
  2. The <form> tag must have a method and an action attribute.
  3. Each form element must have a corresponding <label> tag with it's for attribute matching the element's id attribute.

As an example, here is a form with a single input element which sends data to the "echo" application on the web server that the form originated from.

<form method="post" action="echo">
   <label for="field1">Your id:</label>
   <input type="text" name="ident" id="field1">
</form>

This appears:

There are also some common attributes that apply to all elements in the form. We can provide prompts to text elements to be displayed as we saw in the search example in the List demo. This is provided by the placeholder attribute. For example, we can use "ID..." as a placeholder in the above example using the code:

<input type="text" name="ident" id="field1" placeholder="ID...">

The form then appears as:

And once we have a placeholder we may wish to make the label invisible. We do this by adding the value ui-hidden-accessible to the label's class attribute, e.g.

<label for="field1" class="ui-hidden-accessible">Your id:</label>

Adding all three fo the above configuration described above would appear as follows.

We can also add a clear button to the text fields. You have already seen a clear button in the search field in the previous section. To add a clear button to any text field add the attribute data-clear-btn="true", e.g

<input type="text" name="ident" id="field1" placeholder="ID..." data-clear-btn="true">

This appears as:

Note that the clear button only appears after you have typed something!

In the case of the search field in the previous section, you have probably guesses that you can remove the clear button by placing data-clear-btn="false" in the search field definition.

Another global feature that applies to all fields in a form is the ability to make jQuery Mobile correctly wrap elements according to field size. For example, we can wrap elements in a <div> tag as follows.

<div class="ui-field-contain">

Try adjusting the window width to see this action on the following form.

Here, the fields are defined by:

<div class="ui-field-contain">
   <label for="field5">Field 1:</label>
   <input type="text" name="ident" id="field5" placeholder="f1...">
</div>
<label for="field6">Field 2</label>
<input type="text" name="ident" id="field6" placeholder="f1...">

As you adjust the screen, the first part of the form places elements on the same line when the window is 480 pixels or greater but wraps them nicely when it is less than 480 pixels. The second field does not have attribute defined so it permanantly appears as if the window is too narrow. You will see when this is necessary in your forms.

Finally, you can disable the jQuery Mobile action for any form element by adding the following attribute to its definition:

data-role="none"

A form element defined like this will still act as an HTML form element but will not take on the jQuery Mobile attributes.

Home