jQuery Mobile Formulare

jQuery Mobile formatiert HTML-Formulare automatisch, wodurch sie attraktiver und touch-freundlicher werden.


jQuery Mobile Formularstruktur

jQuery Mobile verwendet CSS, um HTML-Formularelemente zu gestalten, wodurch sie attraktiver und einfacher zu verwenden sind.

In jQuery Mobile können Sie die folgenden Formularsteuerelemente verwenden:

  • Texteingabe
  • Sucheingabe
  • Optionsschaltflächen
  • Checkboxen
  • Auswahlmenü
  • Slider
  • Flip-Toggle-Schalter

Wenn Sie jQuery Mobile Formulare verwenden, sollten Sie Folgendes wissen:

  • Das <form>-Element muss die Attribute method und action haben.
  • Jedes Formularelement muss ein eindeutiges "id"-Attribut haben. Die id muss auf allen Seiten der gesamten Website eindeutig sein. Das liegt daran, dass der Single-Page-Navigationsmechanismus von jQuery Mobile dazu führt, dass mehrere verschiedene Seiten gleichzeitig gerendert werden.
  • Jedes Formularelement muss eine Beschriftung haben. Setzen Sie dasfor-Attribut der Beschriftung so, dass es mit der id des Elements übereinstimmt.

Beispiel

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

Selbst ausprobieren »

Um die Beschriftung auszublenden, verwenden Sie die Klasse ui-hidden-accessible. Dies wird häufig verwendet, wenn Sie das placeholder-Attribut des Elements als Beschriftung nutzen:

Beispiel

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

Selbst ausprobieren »

Tipp:Wir können das Attribut data-clear-btn="true" verwenden, um eine Schaltfläche zum Leeren des Eingabefelds hinzuzufügen (ein X-Symbol auf der rechten Seite des Eingabefelds):

Beispiel

<label for="fname">Name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">

Selbst ausprobieren »
Note Die Schaltfläche zum Löschen der Eingabe kann in <input>-Elementen verwendet werden, aber nicht in <textarea>. Für Suchfelder ist data-clear-btn standardmäßig "true", und Sie können data-clear-btn="false" verwenden, um das Symbol zu entfernen.

jQuery Mobile Formular-Symbole

Der Button-Code in Formularen verwendet standardmäßige HTML-<input>-Elemente (button, reset, submit). Sie werden automatisch gestaltet und passen sich an mobile und Desktop-Geräte an:

Beispiel

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">

Selbst ausprobieren »

Wenn Sie zusätzliches Styling zu <input>-Buttons hinzufügen müssen, können Sie die data-*-Attribute in der folgenden Tabelle verwenden:

Attribute Wert Beschreibung
data-corners true | false Gibt an, ob die Schaltfläche abgerundete Ecken hat
data-icon Icon-Referenzhandbuch Gibt das Symbol der Schaltfläche an
data-iconpos left | right | top | bottom | notext Gibt die Position des Symbols an
data-inline true | false Gibt an, ob es sich um eine Inline-Schaltfläche handelt
data-mini true | false Gibt an, ob es sich um eine Mini-Schaltfläche handelt
data-shadow true | false Gibt an, ob die Schaltfläche einen Schatteneffekt hat

Symbole zu Schaltflächen hinzufügen:

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">

Selbst ausprobieren »

Feldcontainer

Damit Beschriftungen und Formularelemente besser an breite Bildschirme angepasst aussehen, schließen Sie die Label- und Formularelemente in ein <div>- oder <fieldset>-Element mit der Klasse "ui-field-contain" ein:

Beispiel

<form method="post" action="demoform.php">
  <div class="ui-field-contain">
<label for="fname">Nachname:</label>
    <input type="text" name="fname" id="fname">
<label for="lname">Nachname:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Selbst ausprobieren »

lamp Die Klasse ui-field-contain gestaltet Beschriftungen und Formularelemente basierend auf der Seitenbreite. Wenn die Seitenbreite größer als 480px ist, platziert sie Beschriftungen automatisch in derselben Zeile wie die Formularelemente. Wenn die Seitenbreite kleiner als 480px ist, werden Beschriftungen über den Formularelementen platziert.

Tipp:Um zu verhindern, dass jQuery Mobile klickbare Elemente automatisch gestaltet, verwenden Sie das Attribut data-role="none":

Beispiel

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

Selbst ausprobieren »

lamp Formularübermittlung in jQuery Mobile

jQuery Mobile übernimmt die Formularübermittlung automatisch per AJAX und versucht, die Serverantwort in das DOM der Anwendung zu integrieren.
Andere Erweiterungen