WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 321

Im Großen und Ganzen soll ein Benutzer seinen Namen, Telefon, E-Mail-Adresse und
eine Anfrage eingeben können, die dann per E-Mail an Herrn Mattisen gesendet wird.
Neben den auszufüllenden Textfeldern kann der Benutzer zusätzlich noch über ein
Dropdown-Feld die Art der Anfrage auswählen. So kann Herr Mattisen jegliche
Beschwerdeanfragen gleich in den Papierkorb …, ähm, seiner Sekretärin zum Bearbei-
ten geben.

Sie benötigen also ein Formular und ein Script, welches den Inhalt der Daten per
E-Mail versendet. Der E-Mail-Versand ist mit reinem jQuery nicht möglich, weswegen
Sie für dieses Szenario eine Mischung aus jQuery und PHP einsetzen. PHP ist eine ser-
verseitige Skriptsprache, die, genau wie jQuery Mobile, einen Webserver voraussetzt.
Wenn Sie die WebApp nicht lokal entwickeln, informieren Sie sich, ob Ihr Webspace
PHP unterstützt. Aber keine Angst, die meisten Hoster tun dies.

8

Duplizieren Sie zunächst eine Seite, z. B. die menue.html , entfernen Sie den Inhalt des
content -Containers, und weisen Sie diesem die id kontakt-inhalt zu. Der page -Con-
tainer erhält die id kontakt . Des Weiteren fügen Sie in der Navigationsleiste die
Klasse ui-btn-active dem Link Kontakt hinzu. In den content -Container fügen Sie
nun das Formular ein.

<form id="kontaktformular">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</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="telefon">Telefon:</label>
<input type="tel" name="telefon" id="telefon" value="" />
</div>
<div data-role="fieldcontain">
<label for="artanfrage">Art der Anfrage:</label>
<select name="artanfrage" id="artanfrage">
<option value="Reservierung">Reservierung</option>
<option value="Hinweis">Hinweis</option>
<option value="Beschwerde">Beschwerde</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="name">Anfrage:</label>