jQuery Mobile form

Automatically ay magpapakita ang jQuery Mobile ng mahusay na magiging maayos sa pakikipag-ugnay ang mga HTML form.

Strukturang jQuery Mobile form

Ginagamit ng jQuery Mobile ang CSS upang itakda ang estilo ng mga elemento ng HTML form, upang ito ay mas kaakit-akit at mas madaling gamitin.

Sa jQuery Mobile, maaari kang gumamit ng sumusunod na mga kontrol ng form:

  • Text box
  • Search box
  • Radio button
  • Checkbox
  • Selection menu
  • Slide bar
  • Flip switch

Kung ikaw ay nakikipag-ugnay sa jQuery Mobile form, dapat mong malaman ang sumusunod na impormasyon:

  • Ang elemento ng <form> ay dapat may method at action katangian.
  • Bawat elemento ng form ay dapat magkaroon ng isang natatanging "id" katangian. Ang id na ito ay dapat maging natatanging sa mga pahina ng site. Dahil ang jQuery Mobile ay nagbibigay ng model ng navigation sa isang pahina na nagpapahintulot sa pagpapakita ng maraming "pahina" nang sabay-sabay.
  • Bawat form element ay dapat magkaroon ng tag (label). Itulak ang for attribute ng label upang sumangay sa id ng elemento.

Example

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

Subukan ang sarili

Para itulak ang label, gamitin ang klase na ui-hidden-accessible. Ito ay napakakaraniwan, kapag ang placeholder attribute ng elemento ay magiging label:

Example

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Name：</label>
  <input type="text" name="fname" id="fname" placeholder="Name...">
</form>

Subukan ang sarili

Domain Container

Para makita ng label at form elements ang normal na display sa wide screen, gamitin ang <div> o <fieldset> na may attribute na data-role="fieldcontain" upang umuugnay sa label o form elements:

Example

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <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>

Subukan ang sarili

Paalala:Ang attribute na fieldcontain ay gumagamit ng page width upang mag-set ng estilo ng label at form controls. Kapag ang page width ay mas malaki sa 480px, ito ay nagpapalitaw sa label at form controls sa parehong linya. Kapag mas maliit sa 480px, ang label ay ilalagay sa itaas ng form element.

Paalala:Para maiwasan na mag-set ng estilo ang jQuery Mobile sa mga clickable na elemento, gamitin ang attribute na data-role="none":

Example

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Subukan ang sarili

Isumite ang form sa jQuery Mobile

Paalala:Automatikong gagawin ng jQuery Mobile ang pag-submit ng form sa pamamagitan ng AJAX, at subukang i-integrate ang tugon ng server sa DOM ng aplikasyon.