jQuery Mobile-formulär

jQuery Mobile lägger automatiskt till ett utmärkt, användarvänligt utseende för HTML-formulär.

jQuery Mobile-formatsstruktur

jQuery Mobile använder CSS för att ställa in stilen på HTML-formulärelement för att göra dem mer attraktiva och användarvänliga.

I jQuery Mobile kan du använda följande formulärkontroller:

  • Textfält
  • Sökfält
  • Enkelval
  • Kryssrutor
  • Urvalsmeny
  • Glidreglage
  • Vridbar växelswitch

När du arbetar med jQuery Mobile-formulär bör du känna till följande information:

  • Elementet <form> måste ha attributen method och action.
  • Varje formulärelement måste ha ett unikt "id"-attribut. Detta id måste vara unikt i webbplatsens sidor. Detta beror på att jQuery Mobile:s singelsidavigningsmodell tillåter flera olika "sidor" att visas samtidigt.
  • Varje formulärelement måste ha en etikett (label). Ställ in labelns for-attribut för att matcha elementets id.

Exempel

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

Prova själv

Om du vill dölja label, använd klassen ui-hidden-accessible. Detta är mycket vanligt när du vill att elementets placeholder-attribut ska fungera som label:

Exempel

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

Prova själv

Fältcontainer

Om du vill att label och formulärelement ska visas korrekt på bredskärmar, använd <div> eller <fieldset>-element med attributet data-role="fieldcontain" för att inrama label eller formulärelement:

Exempel

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

Prova själv

Tips:Propertyn fieldcontain baseras på sidans bredd för att sätta stil på label och formulärkontroller. När sidans bredd är större än 480px placeras label och formulärkontrollen automatiskt på samma rad. När den är mindre än 480px placeras label ovanpå formulärelementet.

Tips:Om du vill undvika att jQuery Mobile automatiskt sätter stil på klickbara element, använd attributet data-role="none":

Exempel

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

Prova själv

Skicka in formulär i jQuery Mobile

Tips:jQuery Mobile skickar automatiskt in formulär via AJAX och försöker integrera serverns svar i applikationens DOM.