Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 14): Formulare anlegen

Web-Apps erstellen (Teil 14): Formulare anlegen

Bei klassischen Webseiten gehören Formulare fast wie selbstverständlich zum guten Ton. Innerhalb unserer App sollte es natürlich ebenfalls eine entsprechende Möglichkeit zur Kontaktaufnahme geben. In diesem Video-Training wird gezeigt, wie sich Formulare auf Basis von jQuery Mobile anlegen und dann schlussendlich auch in die App einbinden lassen. So könnt ihr euren Besuchern ganz einfach die Möglichkeit bieten, mit euch in Kontakt zu treten.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


In jQM werden Formulare genauso wie in herkömmlichem HTML definiert. Das äußere Grundgerüst bildet dabei also immer ein form-Element.
<form action="form.php" method="post"> 
   ... 
</form>

Innerhalb von form definiert man dann die eigentlichen Formularinhalte.

Wie bei anderen Elementen unterstützt jQuery mobile auch bei den Formularen einige HTML5-Features:

• Nummer
• E-Mail
• URL
• Telefon

Somit könnt ihr also in eurer App die entsprechenden HTML5-Feldtypen verwenden. Und diese bieten durchaus Vorteile. So kann man beispielsweise E-Mail-Adressen, die in ein Formularfeld eingetragen wurden, automatisch validieren, ohne spezielle JavaScript- oder PHP-Skripte schreiben bzw. einbinden zu müssen. Dazu dann aber im weiteren Verlauf dieses Tutorials mehr.

Nachfolgend ein Beispiel für die Definition eines einfachen Textfeldes mit entsprechender Beschriftung:
<label for="name">Ihr Name:</label>
<input type="text" name="name" id="name" value="" />

Über das label-Element kann ein logischer Bezug zwischen Beschriftung und eigentlichem Feld hergestellt werden. Dazu weist man dem for-Attribut den Namen des betreffenden Feldes zu. Ein solch logischer Bezug ist enorm wichtig.

In jQM gibt es bei der Definition von Formularfeldern übrigens noch eine kleine Besonderheit. Hier setzt man das Ganze nämlich noch in einen div-Container. Zugewiesen wird diesem Container das Attribut data-role. Als Wert gibt man fieldcontain an.
<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

Es überrascht sicherlich nicht, dass jQM auch bereits die Definition spezieller HTML5-Formularelemente unterstützt. Dazu gehören beispielsweise spezielle Felder für Nummern, URLs, Telefonnummern und E-Mail-Adressen. Diese Varianten könnt ihr also bereits jetzt in euren Apps verwenden.

 
Hier ein Beispiel für die Definition eines speziellen E-Mail-Feldes:
<input type="email" name="email" id="email" value="" />

Vorteil dieser Variante: Bei Browsern, die dieses HTML5-Feature unterstützten, findet automatisch eine Validierung der Feldeingaben statt. Handelt es sich bei der eingetragenen Zeichenkette nicht um eine syntaktisch korrekte E-Mail-Adresse, gibt es eine entsprechende Rückmeldung. Eine aufwendige Validierung auf Basis von PHP oder JavaScript kann somit entfallen.

Wie die Meldung aussieht, entscheidend letztendlich der Browser. Im Google Chrome stellt sich eine Fehlermeldung beispielsweise folgendermaßen dar:

Bilder



 
Etwas anders sieht das Ganze hingegen im Opera aus.

Bilder



In jedem Fall werden die Besucher aber darauf aufmerksam gemacht, dass die eingegebene E-Mail-Adresse syntaktisch nicht korrekt ist.

 
Neben klassischen Formularelementen gibt es aber auch noch solche, die geradezu prädestiniert für den Einsatz auf Touch-Oberflächen und somit letztendlich innerhalb von Apps geeignet sind. Ein typisches Beispiel dafür sind die sogenannten Slider, also Schieberegler. Solche Schieberegler werden verwendet, um Werte einstellen zu können. Dabei besteht ein Schieberegler aus zwei Elementen:

• einem Textfeld und
• einem Regler.

Wie ein solcher Schieberegler aussieht, zeigt die folgende Abbildung.

Bilder



Interessant sind diese Schieberegler beispielsweise, wenn die Besucher eine bestimmte Anzahl an Produkten o.Ä. angeben sollen. Definieren lassen sich Schieberegler über einfache input-Elemente. Deren type-Attribut weist man den Wert range zu.
<div data-role="fieldcontain">
 <label for="slider">Anzahl:</label>
 <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

 
Die gültigen Wertebereiche werden über die beiden Attribute min und max bestimmt.

Interessant – auch und gerade für Apps, die auf Touch-Oberflächen zielen – sind übrigens auch die sogenannten Flip-Toggles.

Bilder



Verwendet werden diese, wenn Ein-Aus- bzw. Ja-Nein-Abfragen gestellt werden. Zum Einsatz kommt dabei das select-Element. Dieses Element kennt ihr aus "normalem" HTML, wo sich damit Auswahlfeder mit beliebig vielen Optionen definieren lassen. Will man allerdings Flip-Toggles erstellen, weist man dem select-Element exakt zwei option-Elemente zu. Eine typische Anwendung könnte folgendermaßen aussehen:
<div data-role="fieldcontain">
  <label for="slider">Bitte wählen:</label>
  <select name="slider" id="slider" data-role="slider">
     <option value="ja">Ja</option>
    <option value="nein">Nein</option>
  </select> 
 </div>

 
Sehr einfach lassen sich mit jQM übrigens auch Suchfelder anlegen.

Bilder



Der Vorteil ist hierbei, dass diese gleich wie Suchfelder aussehen. So sind sie beispielsweise direkt mit einer Lupe ausgestattet. Definieren lassen sich Suchfelder denkbar einfach. Man definiert ein normales input-Element. Dem type-Attribut wird als Wert search zugewiesen.
<div data-role="fieldcontain">
  <label for="search">Webseite durchsuchen</label>
  <input type="search" name="suche" id="suche" value="" />
</div>

So einfach lassen sich die Suchfelder definieren. Auch das ist wieder ein ganz typisches Beispiel dafür, wie stark man durch den Einsatz aktueller HTML5-Techniken profitiert. Und diese Möglichkeiten, die euch HTML5 bietet, solltet ihr unbedingt nutzen.

Ihr habt jetzt einige wichtige Elementtypen für die Definition von Formularen für eure App kennengelernt. Auf diesem Wissen aufbauend, könnt ihr nun in eure App ein entsprechendes Formular einfügen. Selbstverständlich bleibt es dabei euch überlassen, welche Informationen ihr abfragen und welche Elementtypen ihr dafür einsetzen wollt. Nachfolgend findet ihr ein ganz typisches Formular, in dem die wichtigsten Informationen abgefragt werden. Dazu gehören Name und Vorname sowie die E-Mail-Adresse. Außerdem gibt es noch ein Auswahlfeld und einen netten Schieberegler.

Das Formular selbst wird im Endeffekt so aussehen:

Bilder



 
Beachtet dabei, dass hier bereits die euch bekannten jQM-Bibliotheken und -Stylesheets eingebunden wurden. Diese sind es letztendlich, die für die passende Optik des Formulars sorgen.
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>PSD-Tutorials.de</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
 </head>
 <body>
 <div id="top" data-role="page" data-theme="a">
 <div data-role="header" data-position="fixed">
   <h1>PSD-Tutorials.de: Kontakt</h1>
 </div>
 <div data-role="content">
   <form action="" method="post">
     <div data-role="fieldcontain">
       <label for="vname">Vorname:</label>
       <input type="text" name="vname" id="vname" placeholder="Vorname"  />
     </div>
     <div data-role="fieldcontain">
       <label for="nname">Nachname:</label>
       <input type="text" name="nname" id="nname" placeholder="Nachname"  />
     </div>
     <div data-role="fieldcontain">
       <label for="email">E-Mail:</label>
       <input type="email" name="email" id="email" value="" />
     </div>
     <div data-role="fieldcontain">
       <label for="flyer" class="select">Ich interessiere mich f&uuml;r folgende Themen:</label>
       <select name="flyer" id="flyer">
         <option value="thema_a">HTML</option>
         <option value="thema_b">Joomla!</option>
         <option value="thema_c">Contao</option>
         <option value="thema_d">TYPO3</option>
       </select>
     </div>
     <div data-role="fieldcontain">
       <label for="menge">Meine maximalen Wochenstunden:</label>
       <input type="range" name="menge" id="menge" value="0" min="0" max="40" />
     </div>
     <input type="submit" value="Abschicken" data-theme="b" />
   </form>
 </div>
 <div data-role="footer">
 <div data-role="navbar">
 <ul>
 <li><a href="about.html" data-icon="info">Über uns</a></li>
 <li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
 <li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
 <li><a href="impressum.html" data-icon="gear">Impressum</a></li>
 <li><a href="#infos" data-icon="gear">Themen</a></li>
 </li>
 </div>
 </div>
 </div>
 </body>
 </html>

Diese Syntax könnt ihr als Vorlage für eure eigenen Formulare nehmen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 15:07

Vielen Dank für das Tutorial

Portrait von Kundentest
  • 27.07.2014 - 12:32

Herzlichen Dank für das Tutorial.

Portrait von MicroSmurf
  • 19.07.2014 - 11:09

Sehr interessant, wie immer. Danke.

Portrait von Steve007
  • 15.07.2014 - 18:57

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von johen
  • 15.07.2014 - 14:35

Vielen Dank für das Tutorial in Textversion.

Portrait von BOPsWelt
  • 15.07.2014 - 13:44

Vielen Dank für einen weiteren Teil, klasse. :)

Portrait von Domingo
  • 15.07.2014 - 13:41

Gute Information. Vielen Dank.

Portrait von Caesarion2004
  • 15.07.2014 - 12:03

Vielen Dank für ein weiteres sehr informatives Tutorial und die dazugehörige Datei.

Portrait von Kundentest
  • 14.06.2014 - 18:11

Herzlichen Dank für das Video.

Portrait von Steve007
  • 14.06.2014 - 12:11

Vielen Dank für Dein interessantes Video - Training.

Portrait von MicroSmurf
  • 07.06.2014 - 15:17

Vielen Dank für den weiteren Teil.

Portrait von renate_C
  • 07.06.2014 - 10:53

Besten Dank für das sehr interessante und verständliche Tutorial und die Datei.

Portrait von Caesarion2004
  • 07.06.2014 - 10:51

Vielen Dank für den weiteren sehr interessanten Teil und die Datei. Gerne weiter so.

x
×
×