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.
Nachteil: Kommunikation kann in der Adressleiste des Browsers beobachtet werden.

post

Vorteil: Eine größere Datenmenge kann versendet werden.
Nachteil: Kommunikation kann nicht in der Adressleiste des Browsers beobachtet 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>

Hier geht es zu den interaktiven Elementen, die auch innerhalb eines Formulares genutzt werden können.