Formulare

Formulare dienen dazu, Eingabefelder für Besucher zur Verfügung zu stellen und die darin enthaltenen Informationen weiterzuverarbeiten bzw. an eine andere Datei zu schicken. Formulare werden in HTML mit dem form-Element definiert.

Innerhalb des form-Elements können wir einige Attribute festlegen, wovon jedoch keines davon angegeben werden muss. Mit dem Attribut action können wir festlegen, an welche Datei (Angabe als URL) die sogenannten Formulardaten gesendet werden sollen. Wird das Attribut nicht angegeben, so werden die Formulardaten an die aktuelle Datei geschickt (also an die Datei, welche das Formular enthält). Das Attribut method legt fest, über welche HTTP-Methode die Daten versendet werden sollen. Gültige Werte sind get und post, wovon get die Voreinstellung ist. Bei der GET-Methode werden die Formulardaten an die URL angehängt (?name=wert&name2=wert2). Bei der POST-Methode hingegen befinden sich die Formulardaten innerhalb des HTTP-Protokolls und somit außerhalb der URL. Dadurch sind die Daten sozusagen nicht sichtbar (jedoch nicht verschlüsselt!). Werden in einem Formular kritische Formulardaten, wie z. B. Passwörter verwendet, sollte das Formular nicht mit der GET-Methode übertragen werden. Des Weiteren eignet sich die GET-Methode nur für kleinere Datenmengen, denn die Länge einer URL ist begrenzt. Das Attribut enctype legt fest, wie die Daten, also mit welcher Kodierung die Daten, im HTTP-Protokoll versendet werden sollen. Die Angabe ist für uns jedoch vorerst nicht relevant.

Der folgende Code zeigt eine einfache Definition eines Formulars:

<form action="auswertung.php" method="post">
    
</form>

Text-Eingabe

Nachdem wir nun unser Formular definiert haben, brauchen wir natürlich noch Felder. Die Verarbeitung des Formulars erfolgt normalerweise über eine serverseitige Programmiersprache wie PHP oder ASP.NET. Das heißt also, dass wir am Ende dieses Themas bereits Formulare erstellen können, jedoch noch nicht wissen, wie wir diese verarbeiten. Sollten Sie also Formulare nicht benötigen, können Sie dieses Thema auch vorerst überspringen. Falls Sie bereits eine serverseitige Programmiersprache erlernt haben, dann können Sie natürlich auch jetzt schon die Daten des Formulars verarbeiten.

Doch nun genug Theorie: Nun wollen wir das erste Feld in unser Formular integrieren. Hierfür benötigen wir das input-Element. Das input-Element ist inhaltsleer und kann über verschiedene Attribute angepasst werden. Um zu erkennen, um was für ein Eingabefeld es sich handelt, gibt es das type-Attribut. Der dazugehörige Wert für ein Eingabefeld für „reinen Text“ ist text. Handelt es sich um ein Textfeld, bei welchem die Daten „verschlüsselt“ angezeigt werden sollen (zumeist bei Passwörtern), so ist der Wert text durch password zu ersetzen.

Um Formularfelder später weiter verarbeiten zu können, brauchen wir das Attribut name. Über den dort vergebenen Namen können wir das Feld identifizieren. Enthält ein input-Element kein name-Attribut, so wird dessen Wert beim Versand (dazu später mehr) nicht übermittelt. Das Attribut value enthält den Wert des Eingabefelds (vordefinierter Wert) und kann ohne Weiteres weggelassen werden. Hier nun das erste Beispiel:

<input type="text" name="Vorname" value="Peter" />

Für Textfelder können wir mit Hilfe des maxlength-Attributs angeben, wie viele Zeichen maximal eingegeben werden dürfen. Fehlt diese Angabe, so ist die Länge „unbegrenzt“.

<input type="text" name="Vorname" value="Peter" maxlength="40" />

Weitere Attribute, welche für alle Felder eingesetzt werden können, sind u. a. readonly, disabled und required. Durch das Attribut readonly und den gleichnamigen Wert, können wir dem Feld die Eigenschaft zuweisen, dass das Feld nicht editiert werden kann. Das Attribut disabled und der Wert disabled deaktiviert das Eingabefeld und hat im Großen und Ganzen die gleiche Wirkung wie das readonly-Attribut. Der Unterschied zwischen dem disabled- und readonly-Attribut ist, dass Felder mit dem readonly-Attribut noch markiert werden können und auch weiterhin übermittelt werden. Enthält das Feld das disabled-Attribut, so kann das Feld weder markiert werden noch wird dessen Wert übermittelt. Das ebenfalls optionale required-Attribut mit dem dazugehörigen Wert required markiert das Feld als Pflichtfeld. Dadurch wird vor dem Absenden des Formulars geprüft, ob das Feld leer ist. Ist dies der Fall, so erscheint eine Fehlermeldung (oft als Tooltip), das Feld wird eingerahmt und der Versandvorgang wird abgebrochen. Hier nun ein komplexeres Beispiel:

<form>
	Vorname: <input type="text" name="Vorname" value="Peter" disabled="disabled" />
	<br />
	Nachname: <input type="text" name="Nachname" value="Meyer" readonly="readonly" />
	<br />
	Benutzername: <input type="text" name="Benutzername" maxlength="30" required="required" />
	<br />
	Passwort: <input type="password" name="Passwort" maxlength="30" />
</form>

Wenn Sie sich das Beispiel angeschaut haben, wird Ihnen bestimmt aufgefallen sein, dass die im Beispiel vorhandenen Eingabefelder einzeilig sind. Doch es gibt auch die Möglichkeit, ein mehrzeiliges Textfeld zu erstellen: Hierfür benötigen wir jedoch nicht das input-Element, sondern das textarea-Element. Das textarea-Element ist zweiteilig. Zwischen den Tags kann, sofern vorhanden, ein vordefinierter Text notiert werden. Das value-Attribut gibt es hier also nicht. Die Attribute name, maxlength, readonly, disabled und required gibt es, wie beim input-Element, hier ebenfalls. Die Bedeutung der Attribute ist dabei die Gleiche.

<form>
	Nachricht:
	<textarea name="Nachricht" maxlength="200">Hier steht die Nachricht ...</textarea>
</form>

Nummerische Eingabe

Nummerische Eingabefelder werden wie einzeilige Textfelder mit dem input-Element definiert. Als Typ muss hier number angegeben werden. Nummerische Eingabefelder verfügen zusätzlich am Ende des Feldes über Buttons zum Verringern und Vergrößern des Wertes. Die Eingabe der Werte für den Benutzer erfolgt dabei dezimal. Über die Attribute min und max kann zusätzlich der Bereich der erlaubten Zahl eingeschränkt werden. Beide Attribute sind optional, wovon es auch erlaubt ist, nur eines davon anzugeben.

<form>
	Geburtsjahr: <input type="number" name="Geburtsjahr" value="2000" min="1900" max="2100" />
</form>

Kontrollkästchen

Kontrollkästchen sind die kleinen quadratischen Boxen, die durch Anklicken mit einem Häkchen markiert werden. Ein weiteres Anklicken führt dazu, dass das Häkchen wieder entfernt wird. Als Typ im type-Attribut muss hierzu checkbox angegeben werden. Der im value-Attribut angegebene Wert wird dabei nur übertragen, wenn das Häkchen gesetzt ist. Ist das Kontrollkästchen (englisch checkbox) nicht ausgewählt, so wird auch das Feld nicht übertragen. Über das Attribut checked können wir das Kästchen bereits vorauswählen. Da Kontrollkästchen über keine sichtbare Beschriftung verfügen, wird oft hinter dem input-Element ein Text notiert. Dadurch kann der Endbenutzer das Kästchen zuordnen.

<form>
	<input type="checkbox" name="Newsletter" value="ja" checked="checked" /> Ja, ich möchte den Newsletter erhalten.
</form>

Auswahlgruppen

Auswahlgruppen (englisch radio buttons) sind eine Gruppe von runden Feldern, welche es ermöglichen, eine von mehreren Möglichkeiten auszuwählen. Hierfür muss im input-Element das type-Attribut auf radio gesetzt werden. Um mehrere sogenannte Optionsfelder (oft auch einfach nur Radiobuttons) zusammenzufassen, müssen die zusammengehörende Felder über den gleichen Wert im name-Attribut verfügen. Der im value-Attribut notierte Wert unterscheidet sich hingegen und dient ebenfalls nur zum Versand und nicht zu Anzeige. Wie Kontrollkästchen können auch Optionsfelder mit dem checked-Attribut vorselektiert werden. Hierzu folgendes typisches Beispiel, welches Sie in ähnlicher Form auf vielen Websites finden werden:

<form>
	Anrede: <input type="radio" name="Anrede" value="Herr" /> Herr <input type="radio" name="Anrede" value="Frau" checked="checked" /> Frau
</form>

Auswahllisten

Auswahllisten ermöglichen, ähnlich wie Auswahlgruppen, die Auswahl von ein oder auch mehreren Werten aus einer Liste. Bei Auswahllisten benötigen wir nicht das input-Element, sondern die Elemente select und option.

select definiert dabei die Liste. Hier kann wie beim select-Element, das Attribut name oder auch disabled ebenfalls notiert werden. Das option-Element definiert einen Eintrag der Auswahlliste. Das Element ist zweiteilig und wird innerhalb der select-Tags notiert. Die Attribute value und disabled stehen uns dabei auch im option-Element zur Verfügung. Der Wert des value-Attributs entspricht nicht dem anzuzeigenden Wert, sondern lediglich dem zu versendenden Wert. Der anzuzeigende Wert wird zwischen den Tags des option-Elements angegeben. Wird das value-Attribut weggelassen, so wird sowohl zur Anzeige als auch zur Übertragung der Wert zwischen den option-Tags verwendet. Die Vorselektierung eines option-Elements erfolgt nicht mit dem checked-Attribut, sondern mit dem selected-Attribut.

Standardmäßig ist in einer Auswahlliste nur die Auswahl eines Wertes möglich. Möchten Sie jedoch dem Benutzer ermöglichen, mehrere Werte auswählen zu können (Mehrfachauswahl), so können Sie dies mit Hilfe des Attributs multiple und dem Wert multiple innerhalb des select-Tags erlauben. Das Attribut size kann dazu genutzt werden, die Anzahl der anzuzeigenden Werte für die Liste festzulegen. Die Standardeinstellung ist 1. Verwendet wird das size-Attribut meist nur bei Auswahllisten, bei welchen eine Mehrfachauswahl möglich ist.

<form>
	E-Book:
	<select name="EBook">
		<option value="Einf">Einführung</option>
		<option value="ProgClnt" selected="selected">Programmierung Client</option>
		<option value="ProgServ">Programmierung Server</option>
		<option value="Fort">Fortgeschrittenes</option>
	</select>
	<br />
	Vorkenntnisse:
	<select name="Prog" size="5" multiple="multiple">
		<option>HTML</option>
		<option>CSS</option>
		<option>JavaScript</option>
		<option>PHP</option>
		<option>Perl</option>
	</select>
</form>

Buttons

Buttons (oder auch Schaltflächen genannt) erlauben dem Benutzer, eine bestimmte Aktion auszuführen. Hierfür besitzen Formulare 2 fest definierte Buttons: der Zurücksetzen-Button und der Sende-Button.

Der Zurücksetzen-Button setzt, wie der Name schon sagt, alle Werte im Formular wieder zurück. Hierbei wird nicht der im HTML-Code definierte Wert des value-Attributs wiederhergestellt, sondern das Eingabefeld wird lediglich „geleert“. Um einen solchen Button zu definieren, benötigen wir das input-Element mit dem Typ reset.

Der Sende-Button führt den Versand des Formulars aus. Dabei wird das Formular zuerst geprüft (z. B. ob Felder ausgefüllt wurden, welche mit dem required-Attribut versehen sind) und anschließend die Daten an die im action-Attribut angegebene Datei (oder falls nicht angegeben, an die gleiche Datei) gesendet. Beim Drücken des Sende-Buttons wird hierfür die neue Seite geladen bzw. die gleiche Seite erneut geladen. Der Sende-Button wird ebenfalls über das input-Element definiert. Als Wert im type-Attribut muss hier submit gesetzt werden. Bei beiden Buttons entspricht der im value-Attribut festgelegte Wert dem anzuzeigenden Text innerhalb des Buttons.

Weitere universelle Buttons können über den Wert button im Type-Attribut spezifiziert werden. Diese Buttons haben ohne eine Skriptsprache wie JavaScript keine Wirkung. Das Klicken eines solchen Buttons, ohne ein JavaScript-Ereignis zu hinterlegen, führt weder zum Versand des Formulars, noch zum erneuten laden der Seite, noch zum Zurücksetzen irgendwelcher Werte.

Wollen wir innerhalb eines Buttons nicht nur einen einfachen Text anzeigen, sondern z. B. ein Bild, so können wir das input-Element durch ein button-Element ersetzen. Auch hier gibt es das type-, name- und disabled-Attribut. Das value-Attribut ist beim button-Element ebenfalls vorhanden, wird jedoch nicht zur Anzeige verwendet, sondern legt lediglich den zu versenden Wert des Buttons fest. Das button-Element ist zweiteilig, wodurch es möglich ist, zwischen den Tags einen HTML-Code (z. B. ein img-Tag für ein Bild) zu notieren.

Übrigens: Zumeist ist es nicht notwendig, den Inhalt (Text) eines Buttons zu versenden. Deshalb wird bei Buttons oft das name-Attribut weggelassen, denn dadurch wird dessen Wert nicht übermittelt.

<form>
	Nachname: <input type="text" name="Nachname" />
	<br />
	<input type="reset" value="Zurücksetzen" />
	<input type="submit" value="Senden" />
	<br />
	<input type="button" value="Kaufen" />
	<input type="button" value="Ausleihen" />
	<br />
	<button type="button" title="Startseite aufrufen">
		<img src="/Bilder/Logo/Logo.png" alt="Logo" width="50" />
	</button>
</form>

Dateiuploads

Um den Upload einer Datei zu ermöglichen, müssen wir ein input-Element mit dem Typ file notieren. Möchten Sie den Typ der auswählbaren Dateien einschränken, so können Sie im Attribut accept entweder den MIME-Typ oder die Dateiendung mit vorangestelltem Punkt des zu erlaubenden Dateityps angeben.

Bei Dateiuploads muss das Formular zwingend per POST-Methode übertragen werden. Zudem muss im form-Tag das Attribut enctype mit dem Wert multipart/form-data angegeben werden. Die Standardeinstellung des enctype-Attributs ist application/x-www-form-urlencoded. Dabei werden alle Namen und Werte im URL-Format versendet (bsp. Vorname=Peter&Nachname=Meyer). Leerzeichen werden in Pluszeichen umgewandelt und Sonderzeichen werden in Hex-Werte umgewandelt (+ » %2B). Wird der Wert multipart/form-data verwendet, so werden die Datei und die restlichen Felder im HTTP-Protokoll durch sogenannte Boundarys getrennt. Der genaue Aufbau des Protokolls würde dieses Thema jedoch sprengen. Das enctype-Attribut ist nur für Formulare mit der POST-Methode relevant.

<form method="post" enctype="multipart/form-data">
	<input type="file" name="Datei" />
	<br />
	<input type="submit" value="Senden" />
</form>

Versteckte Felder

Versteckte Eingabefelder werden in HTML mit dem input-Element und dem Typ hidden notiert. Solche Eingabefelder dienen dabei vor allem als Hilfsmittel, um einen Formular-Versand mit, für den Benutzer nicht sichtbaren, Informationen zu erweitern. Oft werden solche versteckte Eingabefelder auch in Zusammenhang mit JavaScript-Funktionen verwendet.

<form>
	Vorname: <input type="hidden" name="Vorname" value="Kai" />
	<br />
	Nachname: <input type="text" name="Nachname" />
	<br />
	<input type="submit" value="Senden" />
</form>