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="http://lehre.hki.uni-koeln.de/wieland/formBack.php"
	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.
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.

Eingabe-Elemente

Einzeilige Eingabebereiche

<input
	name="nachname"
	id="nachname"
	type="text"
	maxlength="50"
	value="hier Nachnamen eingeben">

Ergebnis

name deklariert, mit welchem Bezeichner der eingegebene Wert an den Server übertragen wird.
Beispiel: Bezeichner: nachname; Wert: Kurz
id

Wie bekannt. Kann den selben Wert wie name haben, darf auf einer Seite aber nur einmal vorkommen!
type deklariert, welcher Art der eingegebene Inhalt ist. Der Wert "password" beispielsweise würde den eingegebenen Text durch **** anzeigen.
Eine gute Übersicht über in HTML5 erlaubte Werte finden Sie bei w3schools.
Achtung: Nicht alle Browser unterstützen bereits alle neuen Types. Chrome und Opera bieten derzeit die breiteste Unterstützung für HTML5-Formulare.
max
length

deklariert die maximal erlaubte Zeichenzahl. Verwendung ist optional.
value

deklariert den Vorgabewert. Verwendung ist optional.

Label für Eingabebereiche

<label for="vorname"> Vorname: </label>
<input
	name="vorname"
	id="vorname"
	type="text">

Ergebnis

Das Element <label> beschreibt die Beschriftung der Eingabefelder. Das Attribut for enthält die ID (nicht den name) desjenigen Eingabefeldes, auf das sich label bezieht.

Hinweis

form-Elemente sind inline-Elemente. D.h. sie verursachen keinen Zeilenumbruch. Eine legitime Möglichkeit einen Zeilenumbruch zu erzeugen ist hier: <br>. Eleganter ist es aber, den entsprechenden Elementen in CSS die Eigenschaft display:block; zu geben.

Mehrzeilige Eingabebereiche

<textarea
	name="nachricht"
	id="nachricht"
	rows="10"
	cols="50"
	required>
	Hier kann ein langer Text eingegeben werden.
</textarea>

Ergebnis

rows

deklariert die Höhe des Textfeldes in Zeilen.
cols

deklariert die Breite des Textfeldes in Zeichen.
required ein alleinstehendes Attribut. Wenn es gesetzt ist, muss das Feld vor dem Absenden ausgefüllt sein.

Radio-Buttons

<input
	type="radio"
	id="anredeHerr"
	name="anrede"
	value="M">
<label for="anredeHerr">Herr</label>

<input
	type="radio"
	id="anredeFrau"
	name="anrede"
	value="F">
<label for="anredeFrau">Frau</label>

Ergebnis

Hinweise

Während die id definitionsgemäß unterschiedlich sein muss, muss name für die verschiedenen Auswahlmöglichkeiten identisch sein. name definiert wieder den Bezeichner, value definiert den Wert für diesen Bezeichner, der an den empfangenden Server übergeben wird.

Auswahllisten

<label for="farbe">Was ist Ihre Lieblingsfarbe?</label>
<select id="farbe" name="farbe" required>
	<option value="">bitte auswählen</option>
	<option value="ff0000">rot</option>
	<option value="00ff00">grün</option>
	<option value="0000ff">blau</option>
</select>

Ergebnis

Checkboxen

<label>Kreuzen Sie alle Haustiere an</label>

<input
	type="checkbox"
	id="haustier1"
	name="haustier"
	value="zebra"
	checked>
<label for="haustier1">Zebra</label>

<input
	type="checkbox"
	id="haustier2"
	name="haustier"
	value="hund">
<label for="haustier2">Hund</label>

<input
	type="checkbox"
	id="haustier3"
	name="haustier"
	value="katze">
<label for="haustier3">Katze</label>

<input
	type="checkbox"
	id="haustier4"
	name="haustier"
	value="maus">
<label for="haustier4">Maus</label>

Ergebnis

Hinweise

Während die id definitionsgemäß unterschiedlich sein muss, muss name für die verschiedenen Auswahlmöglichkeiten identisch sein. name definiert wieder den Bezeichner, value definiert den Wert für diesen Bezeichner, der an den empfangenden Server übergeben wird. An den empfangenden Server werden mehrere, einer oder kein Wert für den Bezeichner (hier: haustier) übergeben.

Pflichtangaben

<label for="bname">Benutzername</label> 
<input id="bname" size="30" maxlength="30" required>
 
<label for="passwd">Passwort</label>  
<input type="password" id="passwd" size="30" maxlength="40" required>

Durch die Angabe von required kann der Benutzer zum Ausfüllen bestimmter Felder gezwungen werden. Sollte versucht werden, das Formular vorzeitig zu versenden, wird das entsprechende Formularfeld durch eine browserinterne Fehlermeldung hervorgehoben.

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.

Schaltflächen - allgemein

Schaltflächen bzw. Button können zur Auslösung einer Aktion jedweder Art genutzt werden:

<input type ="button" value="Los" onclick="los();">

Ergebnis

<input height="100" src="button.png" type="image" width="200">

Ergebnis

Mit dem Tag <button> ist es ebenfalls möglich einen individuell gestaltbaren Button zu definieren:

<button><img src="tutButton.png" alt="Button" ></button>

Strukturierung des Formulars

<form
	action="http://lehre.hki.uni-koeln.de/wieland/formBack.php"
	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>