jQuery Mobile Form Input Elements

jQuery Mobile Text Input

Ang mga input field ay binuo sa pamamagitan ng mga standard na HTML element, ang jQuery Mobile ay magtatakda ng espesyal na estilo na magiging magandang hitsura at madaling gamitin para sa mobile devices. Maaari mo ring gumamit ng bagong uri ng HTML5 <input> type:

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Birthday:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Ang iyong email address..">
  </div>
</form>

Try It Yourself

Mga payo：Ginagamit ang placeholder upang magbigay ng maikling pagtutukoy, upang ilarawan ang inaasahang halaga ng input field:

<input placeholder="sometext">

Text Box

Ginagamit ang <textarea> upang maisagawa ang multi-line text input.

Komentaryo:Ang text area ay magpapalaki ng awtomatiko upang sumakop sa mga linya ng teksto na iyong pinagsusulat.

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Try It Yourself

Search Box

Ang type="search" na input type ay isang bagong uri sa HTML5, na ginagamit upang tukuyin ang teksto field na magiging pinagmumulan ng mga salitang hinahanap:

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Try It Yourself

Radio Button

Ginagamit ang radio button kapag pinili ng user ang isang maliliit na bilang ng mga opsyon.

Kung gusto mong gumawa ng iset ng radio button, magdagdag ng input element na may type="radio" at ang katugmang label. I-wrap ang radio button sa element ng <fieldset>. Maaari mo ring magdagdag ng element ng <legend> upang tukuyin ang pamagat ng <fieldset>.

Mga payo：Gumamit ng attribute na data-role="controlgroup" upang kumpuni ang mga button na ito：

Example

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Pumili ng iyong kasarian:</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

Checkbox

Ginagamit ang checkbox kapag pinili ng user ang isa o marami sa mga limitadong opsyon na pinili:

Example

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Pumili ng anumang paboritong kulay na gusto mo:</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

Maraming halimbawa

Kung gusto mong magkumpuni ng mga radio button o checkbox sa pahaba, gamitin ang attribute na data-type="horizontal":

Example

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

Try It Yourself

Maaari mo ring gamitin ang field container upang balutin ang <fieldset>：

Example

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Pumili ng iyong kasarian:</legend>
  </fieldset>
</div>

Try It Yourself

Kung gusto mong i-preview ang isang button, gamitin ang attribute na checked ng HTML <input> tag:

Example

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

Try It Yourself