HTML and CSS Reference
In-Depth Information
Anschließend haben wir wieder eine Kopfleiste mit einer
Zurück
-Option eingefügt und
beginnen dann mit den eigentlichen Formularfeldern. Das erste Eingabefeld würde
einen Wert in der Variablen
nachname
abspeichern. Vor der Texteingabe wird direkt auf
dem Textfeld
Ihr Name
angezeigt, wodurch der Benutzer sehen kann, was er dort einge-
ben soll. Das Gleiche machen wir für das Feld mit der Telefonnummer.
Da wir den An- und Ausschalter optisch von der Eingabe des Namens und der Telefon-
nummer getrennt haben möchten, wurde für dieses Element ein eigenes
ul
-Tag aufge-
macht und mit der Klasse
rounded
versehen. Der Schieberegler wird durch
span
class "toggle"
und dem nachfolgenden
input
-Tag definiert.
Bild 1.30:
Das erste Formular mit jQTouch.
Die beiden Buttons im Formular werden ganz einfach über die beiden letzten
a
-Tags im
Formular definiert. Dabei soll der Button zum Absenden des Formulars in weißer Farbe
erscheinen, was durch die Klasse
whiteButton
erreicht wird. Dass dies auch der
Submit
-Button ist, wird durch die Klasse
submit
definiert. Alternativ dazu der
Abbre-
chen
-Button: Dieser soll in dunkelgrauer Farbe angezeigt werden (Klasse
grayButton
)
und soll, ohne die Daten abzusenden, einfach wieder zurück auf die letzte Seite springen.
Auch das kann einfach über die Angabe der Klasse
goback
erreicht werden.
Texteingabefelder für Passwörter werden ebenfalls mit dem
input
-Tag erstellt, aller-
dings wird hier der Typ mit
type password
auf ein Passwortfeld gesetzt:
<h2>Passworteingabe:</h2>
<ul class "rounded">
<li><input name "passwort" value "" type "password"
placeholder "Passwort"></li>
</ul>
Auswahllisten, die auf dem iPhone mit dem bekannten Rollauswahlfenster dargestellt
werden, sind über den folgenden Code möglich:
<h2>Marke wählen:</h2>
<ul class "rounded">
<li>
<select id "auto">
<optgroup label "Volkswagen">
