Formulare in HTML 5
Im Rahmen des Seminars ist bisher eine statische Website entstanden, die zwar Informationen anbietet, aber keine wirkliche Interaktion zulässt. Die einfachste Möglichkeit, Interaktivität zu schaffen, ist der Einsatz von Formularen.
Aufbau eines Formulars
Ähnlich wie bei Tabellen gibt es auch für Formulare ein Hauptelement (<form>). In diesem Element wird das grundsätzliche Verhalten des Formulars definiert. Außerdem dient es als eine Art Container für verschiedene Typen von Eingabefeldern wie Radiobuttons oder Checkboxen, aber auch Pulldown-Menüs und normale Eingabefelder für Text. Innerhalb eines <form> Elements dürfen allerdings auch die meisten anderen HTML-Elemente vorkommen. In dem action=""Attribut wird das Ziel definiert, an das die in das Formular eingegebenen Daten versendet werden sollen. Meistens ist das ein Script (PHP, Perl), welches die Formulardaten direkt auswerten kann.
Das Element <form>
<form
action="#"
method="get"
accept-charset="UTF-8">
...
</form>
Das Element <form> beinhaltet weitere Elemente, die die eigentlichen Eingabefelder und -methoden definieren. Alles was innerhalb des Elements steht gehört zu einem Formular.
Elementare Attribute von <form> sind action, method und accept-charset.
| action |
deklariert die Server-Adresse, an die die eingegebenen Inhalte des Formulars gesendet werden sollen. In diesem Beispiel steht ein # zwischen den Anführungszeichen, weil wir aktuell keine Server-Adresse haben, an die das Formular geschickt werden kann. |
| method |
deklariert die Methode, mit der die eingegebenen Inhalte des Formulars an den empfangenden Server gesendet werden sollen. get Vorteil: Kommunikation kann in der Adressleiste des Browsers beobachtet werden. post Vorteil: Eine größere Datenmenge kann versendet werden. |
| accept-charset | deklariert das Text-Encoding. Wie immer: UTF-8 ist zu bevorzugen. |
Der Submit-Button
Ein Formular will nicht nur ausgefüllt werden - die Inhalten würden dann ja nur in Ihrem Browser stehen und nirgends ankommen - es soll auch abgeschickt werden können:
<form
action="about:blank"
method="get"
accept-charset="UTF-8">
<label for="einText">Geben Sie irgendeinen Text ein:</label>
<input
id="einText"
name="einText"
type="text">
<input type="submit" value="absenden">
</form>
Ergebnis
Durch Auslösen des Submit-Buttons werden alle im Formular ausgefüllten bzw. ausgewählten Werte (bzw. values) mit deren jeweiligen Bezeichner an den im form-tag deklarierten empfangenden Server gesendet.
Achtung:
Fehlt bei einem Input-Element der type, ist "submit" der Default-Wert. Das heißt, die Werte des Formulares werden abgesendet und die Seite wird neu geladen. Durch den Type "button" kann dem entgegengewirkt werden. Dieser Type bewirkt, dass clientseitige Funktionalitäten (wie zb Funktionsaufrufe einer Javascript-Datei) aufgerufen werden, ohne die Seite dabei neu zu laden.
Der Reset-Button
Sollen die Elemente eines Formulares auf Knopfdruck zurückgesetzt werden, gibt es den Type "reset". Er leert alle interaktiven Elemente, allerdings nur, wenn diese in einem Formular-Element enthalten sind. Dies gilt nicht für interaktive Elemente, die ohne Form-Element genutzt werden.
<form
action="about:blank"
method="get"
accept-charset="UTF-8">
<label for="einText">Geben Sie irgendeinen Text ein:</label>
<input
id="einText"
name="einText"
type="text">
<input type="reset" value="Feld löschen">
</form>
Strukturierung des Formulars
<form
action="#"
method="get"
accept-charset="UTF-8">
<fieldset class="ersterBereich">
<label for="vorname"> Vorname: </label>
<input
name="vorname"
id="vorname"
type="text">
<label for="nachname"> Nachname: </label>
<input
name="nachname"
id="nachname"
type="text">
</fieldset>
<p>Erklärender Text zum Formular oder auch ein nettes Bild.</p>
<fieldset class="zweiterBereich">
...
</fieldset>
<p>Erklärender Text zum Formular oder auch ein nettes Bild.</p>
<fieldset class="dritterBereich">
...
</fieldset>
</form>