jQuery Mobile Formular

jQuery Mobile fügt HTML-Formularen automatisch eine hervorragende, berührungsempfindliche Optik hinzu.

jQuery Mobile Formularstruktur

jQuery Mobile verwendet CSS, um die Stile der HTML-Formularelemente zu setzen, um sie attraktiver und benutzerfreundlicher zu gestalten.

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

  • Textfeld
  • Suchfeld
  • Radio-Button
  • Kontrollkästchen
  • Auswahlliste
  • Schieberegler
  • Umschalt-Schalter

Wenn Sie mit jQuery Mobile-Formularen umgehen, sollten Sie folgende Informationen kennen:

  • Das <form>-Element muss die Attribute method und action festgelegt haben
  • Jeder Formularelement muss die eindeutige "id"-Eigenschaft festgelegt haben. Dieser "id" muss auf der Seite der Website einzigartig sein. Dies liegt daran, dass das Single-Page-Navigation-Modell von jQuery Mobile es ermöglicht, viele verschiedene "Seiten" gleichzeitig anzuzeigen.
  • Jedes Formularelement muss eine Beschriftung (label) haben. Stellen Sie die for-Attribut des Labels so ein, dass es mit der id des Elements übereinstimmt.

Beispiel

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

Probieren Sie es selbst aus

Um Beschriftungen zu verbergen, verwenden Sie die Klasse ui-hidden-accessible. Dies ist sehr häufig, wenn Sie die Placeholder-Attribut des Elements als Beschriftung verwenden möchten:

Beispiel

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

Probieren Sie es selbst aus

Bereichsbehälter

Um sicherzustellen, dass Beschriftungen und Formularelemente auf breitbildfähigen Bildschirmen korrekt angezeigt werden, verwenden Sie die <div> oder <fieldset>-Elemente mit dem Attribut data-role="fieldcontain", um die Beschriftung oder die Formularelemente zu verpacken:

Beispiel

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

Probieren Sie es selbst aus

Hinweis:Das Attribut fieldcontain legt basierend auf der Seitenbreite die Stile für die Beschriftung und die Formularelemente fest. Wenn die Seitenbreite größer als 480px ist, platziert es die Beschriftung und das Formularelement automatisch auf einer Zeile. Wenn sie kleiner als 480px ist, wird die Beschriftung über dem Formularelement positioniert.

Hinweis:Um zu verhindern, dass jQuery Mobile automatisch Stile für klickbare Elemente setzt, verwenden Sie das Attribut data-role="none":

Beispiel

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

Probieren Sie es selbst aus

Formular in jQuery Mobile einreichen

Hinweis:jQuery Mobile führt den Formularsubmit automatisch über AJAX durch und versucht, die Serverantwort in den DOM der Anwendung zu integrieren.