WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Form Input Elements


jQuery Mobile Text Inputs

Input fields are coded with standard HTML components, and jQuery Mobile will style them to look appealing and simple to-use for cell phones. You can likewise utilize 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 content sources of info.

Note: The content region will naturally develop 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 characterizes a content field for entering a search:

Example

<label for="search">Search:</label>
<input type="search" name="search" id="search">
Try it yourself »

Radio Buttons

Radio catches are utilized when a client can choose just a single of a set number of choices.

To make a lot of radio catches, include a contribution with type="radio" and a relating mark. Envelop the radio catches by a <fieldset> component. You can likewise include a <legend> component to characterize an inscription for the <fieldset>.

Tip: Use information role="controlgroup", to amass the catches together:

Example

<form method="post" action="demoform.asp">
  <fieldset information 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 utilized when a client can choose at least one choices of a constrained number of choices:

Example

<form method="post" action="demoform.asp">
  <fieldset information role="controlgroup">
    <legend>Choose the same number of most loved hues 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 »

To bunch radio catches or checkboxes evenly, use the information type="horizontal":

Example

<fieldset information role="controlgroup" information type="horizontal">
Try it yourself »

You can likewise fold a field holder over the <fieldset>:

Example

<div class="ui-field-contain">
  <fieldset information role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>
Try it yourself »

If you need one of your catches to be "pre-selected", utilize the HTML <input> checked attribute:

Example

<input type="radio" checked>
<input type="checkbox" checked>
Try it yourself »

You can likewise put your structure inside a popup:

Example

<a href="#myPopup" information rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div information role="popup" id="myPopup" class="ui-content">
  <form method="post" action="demoform.asp">
    <div>
      <h3>Login information</h3>
      <label for="usrnm" class="ui-concealed accessible">Username:</label>
      <input type="text" name="user" id="usrnm" placeholder="Username">
      <label for="pswd" class="ui-concealed accessible">Password:</label>
      <input type="password" name="passw" id="pswd" placeholder="Password">
    </div>
  </form>
</div>
Try it yourself »