Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 43

Des Weiteren setzen Sie unterhalb der auf der Startseite definierten Liste noch folgenden
div -Container ein:

<div class "info">
<p><b>Oldtimer Spiering</b><br>Beispielgasse 1, 12345 Bad
Beispielstadt</p>
</div>

Und schon sieht unsere Startseite wie eine richtige iPhone-
Anwendung aus:

Letztendlich ist der Gestaltungsprozess ähnlich wie der unter
iWebKit 5: Sie schreiben größtenteils HTML-Code und weisen
den HTML-Elementen vordefinierte CSS-Klassen zu, die nicht
nur das Aussehen verändern, sondern teilweise auch
Animationen hinzufügen.

1.4.5 Formulare mit jQTouch

Als Nächstes werden wir uns die Formulardefinitionen mit
jQTouch ansehen. In unserem Beispiel werden wir die Kontakt -
Seite als Formular umschreiben. Dazu entfernen Sie einfach den div -Container mit der
ID kontakt und kopieren folgenden Code in das Beispiel:

<form action ""method "" id "kontakt">
<div class "toolbar">
<h1>Kontakt</h1>
<a href "#home" class "button back">Zur&uuml;ck</a>
</div>
<ul class "rounded">
<li><input name "nachname" value "" type "text" placeholder "Ihr
Name"></li>
<li><input name "telefon" value "" type "text" placeholder "Ihre
Telefonnummer"></li>
</ul>
<ul class "rounded">
<li>Newsletter<span class "toggle">
<input name "newsletter" type "checkbox">
</span>
</li>
</ul>
<a class "whiteButton submit">Absenden</a>
<a class "grayButton goback">Abbrechen</a>
</form>

Zuerst wird ein Formular mit dem form -Tag initiiert und erst einmal kein Zielort ange-
geben, an den die Daten geschickt werden sollen. Wichtig im form -Tag ist die Angabe
der ID, da der div -Container mit der id kontakt gelöscht wurde. An seine Stelle tritt
nun der form -Bereich. Sie erkennen also, dass eine einzelne jQTouch-Seite nicht nur aus
einem div -Container bestehen kann, sondern auch aus einem Formular.