vorige Präsentation: Formulare | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Formular als Interaktion
Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-Möglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web.
Formulare ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten Rahmen.
Zwei typische Anwendungsgebiete für Web-Formulare sind: das Eingabeformular der Suchmaschine Google und ein Bestellformular.
Mit den HTML-Tags form
, input
, textarea
, option
, select
werden
Formulare aufgebaut. Hier ein einfaches Formular und der HTML Code dafür:
<form method="get" action="bestellung.php"> Bitte schicken Sie den Newsletter an die E-Mail Adresse: <input type="email" name="mail"> <input type="submit" value="Ja, ich will!"> </form>
Der form
-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im action-Attribut des form
-tag wird angegeben, an welche URL die Daten zur Verarbeitung geschickt werden.
So sieht das Formular im Browser aus:
Innerhalb des form
-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den „normalen“ HTML-Tags auf.
Verschiedenen Arten von Text-Eingabefeldern.
Textfeld | <input type="text" name="vorname"> |
|
<input type="email" name="mail"> |
||
Passwortfeld | <input type="password" name="meinpasswort"> |
|
mehrzeiliges Textfeld | <textarea name="zitat">In a hole in the ground there lived a Hobbit. </textarea> |
Achtung: das Passwort-Feld schützt nur vor neugierigen Blicken auf den Monitor. Die eingegebenen Daten werden dann genau so übertragen wie aus alle anderen Eingabefeldern - normalerweise unverschlüsselt.
mit Default-Wert | <input type="text" name="vorname" value="Lara"> |
|
mit Placeholder | <input placeholder="ich@some.net" type="email"> |
|
muss eingegeben werden | <input type="email" name="nachname" required> |
|
mit Eingabeprüfung (siehe html5pattern) | <input pattern=".*@fh-salzburg\.ac\.at" type="email"> |
Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element „checkbox“ verwendet
<label><input type="checkbox" name="schlag"> mit Schlagobers</label>
Für Fragen, bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es verschiedene Eingabeelemente.
Radiobuttons (die zusammen gehören) müssen denselben name
haben.
Hier ist es wichtig die Beschriftung die zum jeweiligen Button gehört
mit dem label
Tag zu markieren - das erleichtert auch die Eingabe.
<label><input type="radio" name="size" value="XL">XL</label> <label><input type="radio" name="size" value="L">L</label> <label><input type="radio" name="size" value="M">M</label> <label><input type="radio" name="size" value="S" checked>S</label>
Ein Menü mit select
und option
ist im Vergleich zu Radiobuttons platzsparend:
<select name="size2"> <option>XL</option> <option selected>L</option> <option>M</option> <option>S</option> </select>
Achtung: beim Erstellen des Menüs muss man jede möglich Antwort bedenken. Auch die Möglichkeit keine Antwort zu geben:
<select name="size3"> <option>---Bitte Auswählen---</option> <option>XL</option> <option>L</option> <option>M</option> <option>S</option> </select>
Die Mehrfach-Auswahl in einem Menü mit select
und option
erfolgt mit dem Drücken der Steuerungs-Taste.
<select name="htmleditor" multiple> <option>vim</option> <option>PHPStorm</option> <option>Atom</option> <option>Sublime</option> </select>
Datum | <input type="date" min="2010-08-01" max="2011-08-31" value="2010-08-14"> |
|
Uhrzeit | <input type="time" min="9:00" max="18:00" value="12:30"> |
|
Range | <input type="range" min="0" max="50" value="10"> |
|
Number | <input type="number" step="1" min="-5" max="10" value="0"> |
Jedes Formular braucht einen Absende-Button
<input type="text" name="bestellung" value="100 Stück Fidget Spinner"> <input type="submit" value="Bestellung Absenden">
Neben dem Absende-Button gibt es noch andere Methoden wie ein Formular „abgesendet“ werden kann:
Den Zurücksetzen Button sollten Sie nur sehr selten einsetzen.
<input type="text" name="bestellung" value="100 Stück Fidget Spinner"> <input type="reset" value="Zurücksetzen">
Warum? Denken Sie an Ihre eigene Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „super, alles gelöscht, genau das wollte ich“, und wie oft haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „Mist, das war ja gar nicht der Absende-Button, jetzt muss ich alles noch mal tippen.“
Bisher haben wir nur die Eingabefelder selbst betrachtet. „Rundherum“ verwendet man alle bisher gelernten HTML-Elemente. So wäre es z.B. möglich, die Beschriftung einfach als Text neben das Eingabefeld zu stellen:
E-Mail <input type="text" name="mail" placeholder="ihre e-mail">
Damit ist aber nicht erkennbar, welche Beschriftung (vorher, nachher, weiter oben, weiter unten) zu welchem Eingabefeld gehört.
Den Zusammenhang zwischen Eingabefeld und Beschriftung stellt man mit dem label
-Tag her:
<label>E-Mail <input type="text" name="mail"></label>
Falls der Beschriftungs-Tag weiter entfernt ist kann der label auf die id des Eingabefeldes verweisen:
<label for="mail">E-Mail</label> .... <input type="text" name="mail" id="mail">
Noch mehr Eingabefelder, die eher selten gebraucht werden.
Unsichtbares = Verstecktes Feld | <input type="hidden" name="source" value="wikipedia"> |
Button ohne Auftrag, für Javascript-Programme | <input type="button" value="Extrafenster" onclick="..."> |
Bildfeld, liefert angeklickte x+y Koordinaten. | <input type="image" name="position" src="austria.gif"> |
Datei-Upload* | Wählen Sie ein Bild aus: <input type="file" name="bilddatei"> |
Der Datei-Upload funktioniert nur wenn die Formular-Daten mit Methode POST und speziellem enctype an den Webserver geschickt werden. Das werden wir später im Kapitel PHP und Datei Upload behandeln.
<fieldset> <legend>Kreditkarte</legend> <input name="nr" placeholder="0000 0000 0000 0000"> <label><input type="radio" name="kk" value="Master"> Master</label> <label><input type="radio" name="kk" value="Visa"> Visa</label> </fieldset>
vorige Präsentation: Formulare | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Formular als Interaktion
/
#