Formulare - Eingaben durch Besucher

Durch Formulare wird eine Interaktion mit dem Besucher und der Anwendung möglich - i.d.R. Formulare die Schnittstelle zwischen Mensch und Maschine.

Der Aufbau von Formularen in jQuery Mobile ist in weiten Strecken identisch mit den Formularen in HTML (Überraschung).

Aber schauen wir uns das Schritt für Schritt an. Wir bauen im Folgenden ein Formular um uns einzuloggen. Wir benötigen also neben einer „Benutzernamen“ noch ein Passwort-Feld. Natürlich darf der submit-Button zum Absenden der Daten nicht fehlen.

Im ersten Schritt als reines HTML-Fomular und dann für die Unterschiede erweitern wir es mit den entsprechenden jQuery Mobile Besonderheiten.

<form id="meinFormular" method="post" action="einloggen.php">
</form>

Attribut ID

Das Erstellt uns die Grundstruktur eines Formulars. Es wird eine ID vergeben (im jQuery zwingend notwendig!), über die das Formular angesprochen werden kann. Hier kann z.B. über CSS das Design angepasst werden.

Attribut method

Es gibt zum Übertragen von Formulardaten zwei Möglichkeiten, die in dem Attribut method angegeben werden. Hier haben wir post und get zur Auswahl. Bei einer normalen Website im Browser sieht man, dass get die Benutzereingaben über die URL des Browsers überträgt. Diese Variante bringt neben Sicherheitsproblemen auch eine Beschränkung des Umfangs mit sich! Bei kleinen Formularinhalten wie Benutzername und Passwort ist das noch kein Thema - sollen aber Textfelder übertragen werden und ein Nutzer neigt zum Schreiben von Romanen, wird es ein Thema. Also besser post nutzen!

Attribut action

Über das Attribut action wird die Datei festgelegt, die aufgerufen wird, wenn der Besucher das Formular absendet. Es wird also der Dateinamen eingetragen - und i.d.R. wird man hier eine Skriptsprache aufrufen, die auf dem Server läuft wie PHP. Hier findet die wirkliche Aktion auch statt - sprich die Auswertung der Inhalte und entsprechend die Reaktion vom Programm. Z.B. die Kontrolle ob die Zugangsdaten korrekt sind und dann entsprechend die Rückmeldung.

Attribut data-transition=pop (jQuery Mobil)

Für jQuery Mobil können wir die Art der Anzeige der beim Absenden aufgerufene Seite festlegen. Dieses soll als Art „pop“ aufpoppen.

Attribut data-direction=reverse (jQuery Mobil)

Auf der Ergebnisseite wird jQuery Mobil automatisch einen „Zurück“-Button integrieren. Durch die Angaben reverse wird die Animation, die in data-transition festgelegt wurde dann rückwärts durchgeführt. Dies führt zu einem harmonischen Eindruck für den Nutzer.

Testen wir unser Formular nun in einem Webbrowser werden alle data-*-Attribute ignoriert! Dies ist also kein Problem.

Wir benötigen in unserem Formular nun noch zweit Textfelder:

• benutzername
• kennwort

Diese werden über die HTML-typischen Formularelemente innerhalb unseres Formulargrundgerüsts aufgenommen.

<input type="text" name="benutzername" id="benutzername">

Das würde zwar schon ein Eingabeformularfeld erstellen - ist aber weder schön noch wirklich komfortabel.

Extrem wichtig ist, dass jedes Eingabefeld eine eindeutige ID erhält, die nur einmal auf allen Seiten vorkommt! Das kommt daher, dass jQuery Mobile alle Einzelseiten in einer HTML-Datei erlaubt und somit darf es auf keinen Fall doppelte IDs geben. Ansonsten folgt das Chaos und Probleme und manches wunderliche Verhalten von jQuery Mobile.

Wir wollene eine Beschriftung, die automatisch nach verfügbarer Bildschirmbreite neben dem Formularfeld steht oder bei wenig Platz über das Formularfeld rutscht. Daher ist die Verwendung von <label> erste Bürgerpflicht. Dadurch ist für den Browser und jQuery Mobile klar, welche Beschriftung zu welchem Eingabefeld gehört.

Ergänzen wir unser bisherige HTML-Code

<label>Ihr Benutzername
  <input type="text" name="benutzername" id="benutzername">
</label>

Das ist die kürzeste Form, die in HTML funktioniert. Oft sieht man die Kombination mit for - ist althergebracht und deutlich länger. Man kann/muss über das for die Input-Feld ansprechen

<label for="benutzername">Ihr Benutzername</label>
<input type="text" name="benutzername" id="benutzername">

Jetzt benötigen wir noch unser zweites Feld für das „Kennwort“. Hier ist die Besonderheit, dass wir im Attribut type als Attributwert password angegeben. Dadurch wird bei der Eingabe vom Benutzer nur Sterne angezeigt. Dadurch wird das Ablesen des Kennworts direkt vom Bildschirm durch einen anderen, der gerade den Bildschirm sehen kann, unmöglich.

<label for="kennwort">Ihr Kennwort</label>
<input type="password" name="kennwort" id="kennwort">

Und zu guter Letzt benötigen wir noch unseren Absendebutton:

<input type="submit" value="einloggen">

Für den guten Ton nutzen wir noch den HTML-Befehl <fieldset>. Dieser „hält“ zusammengehörige Formularelemente zusammen. Das ist jetzt bei nur zwei Formularfeldern nicht direkt notwendig - aber guter Ton und Umgangsformen punkten beim anderen Geschlecht (und beim Nutzer). Der HTML-Befehl Fieldset wird um alle Formularfelder innerhalb von form gepackt:

<form id="meinFormular" method="post" action="einloggen.php">
  <fieldset>
    <label for="benutzername">Ihr Benutzername</label>
    <input type="text" name="benutzername" id="benutzername">
    <label for="kennwort">Ihr Kennwort</label>
    <input type="password" name="kennwort" id="kennwort">
    <input type="submit" value="einloggen">
  </fieldset>

Für jQuery Mobile packen wir noch ein DIV mit dem Attribut data-role=fieldcontain um unsere Formularfelder:

<form id="meinFormular" method="post" action="einloggen.php">
  <fieldset>
    <div data-role="fieldcontain">
      <label for="benutzername">Ihr Benutzername</label>
      <input type="text" name="benutzername" id="benutzername">
      <label for="kennwort">Ihr Kennwort</label>
      <input type="password" name="kennwort" id="kennwort">
      <input type="submit" value="einloggen">
    </div>
  </fieldset>