HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

jQuery Mobile Form Input Elements


jQuery Mobile Text Inputs

Input fields are coded with standard HTML elements, and jQuery Mobile will style them to look attractive and easy-to-use for mobile devices. You can also use the new HTML5 <input> types:

Example

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

    <label for="bday">Date of Birth:</label>
    <input type="date" name="bday" id="bday">

    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Your email..">
  </div>
</form>

Try it yourself »


Text area

Use <textarea> for multi-line text inputs.

Note: The text area will automatically grow to fit new lines as you type some text.

Example

<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>

Try it yourself »


Search Input

The input type="search" is new in HTML5, and defines a text field for entering a search:

Example

<label for="search">Search:</label>
<input type="search" name="search" id="search">

Try it yourself »


Radio Buttons

Radio buttons are used when a user can select only one of a limited number of choices.

To create a set of radio buttons, add an input with type="radio" and a corresponding label. Wrap the radio buttons in a <fieldset> element. You can also add a <legend> element to define a caption for the <fieldset>.

Tip: Use data-role="controlgroup", to group the buttons together:

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>

Try it yourself »


Checkboxes

Checkboxes are used when a user can select one or more options of 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>

Try it yourself »


Examples

More Examples

To group radio buttons or checkboxes horizontally, use the data-type="horizontal":

Example

<fieldset data-role="controlgroup" data-type="horizontal">

Try it yourself »

You can also wrap a field container around the <fieldset>:

Example

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>

Try it yourself »

If you want one of your buttons to be "pre-selected", use the HTML <input> checked attribute:

Example

<input type="radio" checked>
<input type="checkbox" checked>

Try it yourself »

You can also place your form inside a popup:

Example

<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.asp">
    <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>

Try it yourself »



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE