jQuery Mobile formulier

jQuery Mobile voegt automatisch een uitstekende, touch-friendly uiterlijk toe aan HTML-formulieren.

jQuery Mobile formulierstructuur

jQuery Mobile gebruikt CSS om de stijl van HTML-formulierelementen in te stellen, zodat ze aantrekkelijker en gebruiksvriendelijker worden.

In jQuery Mobile kunt u de volgende formuliercontrole elementen gebruiken:

  • Tekstvak
  • Zoekvak
  • Enkele keuzevak
  • Aankruisvak
  • Selectiemenu
  • Schuifregelaar
  • Omdraaiende schakelaar

Wanneer u werkt met jQuery Mobile-formulieren, moet u de volgende informatie weten:

  • Het <form>-element moet de eigenschappen method en action instellen
  • Elk formulierelement moet de unieke "id"-eigenschap instellen. Deze id moet uniek zijn in de pagina's van de site. Dit komt omdat het single-page navigatiemodel van jQuery Mobile meerdere "pagina's" tegelijkertijd kan weergeven.
  • Elk formulierelement moet een label hebben. Stel de eigenschap for van het label in om te matchen met de id van het element.

Voorbeeld

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

Probeer het zelf

Om de label te verbergen, gebruik dan de klasse ui-hidden-accessible. Dit is vaak nodig, wanneer u de eigenschap placeholder van het element wilt gebruiken als label:

Voorbeeld

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

Probeer het zelf

Veldcontainer

Als u wilt dat de label en het formulierelement correct worden weergegeven op brede schermen, gebruik dan een <div> of <fieldset>-element met de eigenschap data-role="fieldcontain" om de label of het formulierelement te omhullen:

Voorbeeld

<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>

Probeer het zelf

Tip:De eigenschap fieldcontain stelt de stijlen van de label en het formuliercomponent in op basis van de pagina breedte. Als de pagina breedte groter is dan 480px, plaatst het automatisch de label en het formuliercomponent op dezelfde rij. Als het kleiner is dan 480px, wordt de label geplaatst boven het formulierelement.

Tip:Om te voorkomen dat jQuery Mobile automatisch stijlen instelt voor klikbare elementen, gebruik dan de eigenschap data-role="none":

Voorbeeld

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

Probeer het zelf

Formulier indienen in jQuery Mobile

Tip:jQuery Mobile voert automatisch een AJAX-formulier submit uit en probeert de serverreactie te integreren in de DOM van de applicatie.