Verwendung von Formularen

Formulare kommen auf jeder Webseite zum Einsatz, wenn es um die Interaktion mit dem Benutzer geht. Möchte man Daten des Nutzers erfassen, wie beispielsweise Login-Daten oder die Adresse bei einer Shopbestellung, so benötigt man immer bestimmte Elemente, die es uns erlauben auf einen Klick oder einen Tastenschlag des Webseitenbesuchers zu reagieren. Genau das erledigen wir mit Formularen.

HTML5 bietet sehr viel mehr Elemente, die genau auf die Bedürfnisse des modernen Webzeitalters eingehen. Dort finden sich Hilfsmittel, wie zum Beispiel "DatePicker", die es uns auf einfachste Weise ermöglichen, mit wenigen Klicks unser Geburtsdatum anzugeben und andere Elemente. Diese werden jedoch gesondert in den HTML5-Tutorials behandelt.

Formular-Element

Alle Elemente, die wir mit dem Thema Formulare und deren Funktionalität verbinden, müssen standardmäßig in HTML in ein <form></form> Element geschachtelt werden.

  • Html
  • Ergebnis
<form> <input type="text" name="benutzername" placeholder="Benutzername eintragen..." /> <input type="password" name="passwort" placeholder="Passwort eintragen..." /> <input type="submit" /> </form>

ACTION & METHOD

Das action="" Attribut ist wichtig, um dem Formular mitzuteilen, an welche Adresse die Daten geschickt werden sollen. Dabei kann es sich um eine URL zu einer Serverdatei handeln, die die eingegebenen Daten validiert und in eine Datenbank einträgt oder aber zum eigenen Dokument, damit dieses die Daten bearbeitet und gegebenenfalls Cookies oder Session-Variablen setzt. Im Folgenden haben wir zwei Formulare. Das eine sendet die Daten an einen externen Server weiter. Das andere bearbeitet die Daten mit einer Anfrage an das selbige Dokument:

  • Html
  • Ergebnis
<form action="http://www.DATEI_AUF_EINEM_ANDEREN_SERVER.php"> <input type="text" name="benutzername" placeholder="Benutzername eintragen..." /> <input type="password" name="passwort" placeholder="Passwort eintragen..." /> <input type="submit" /> </form> <form action="#"> <input type="text" name="benutzername" placeholder="Benutzername eintragen..." /> <input type="password" name="passwort" placeholder="Passwort eintragen..." /> <input type="submit" /> </form>

Alternativ hätten wir bei dem zweiten Formular auch gar keinen Wert setzen können bzw. den Wert leer lassen können. Dies hätte den gleichen Effekt: Eine Anfrage an das selbige Webdokument. Jedoch könnte diese Methode bei einigen Browsern zu Fehlern führen, weswegen man oftmals eine Raute (Hash) als Wert nimmt:

  • Html
  • Ergebnis
<!-- Anfrage an das eigene Dokument --> <form action=""></form> <!-- Anfrage an das eigene Dokument --> <form action></form>

Mit dem method="" Element geben wir an, mit welcher Methode wir die Daten übertragen wollen. Dafür stehen uns zwei grundlegende Arten zur Verfügung:

MethodeBeschreibung
GET
(default)
Ist die Standardmethode, wenn wir von einem Server Daten anfragen wollen
POSTIst die Standardmethode, wenn wir Daten an einen Server schicken wollen

Fälschlicherweise werden die beiden Methoden oftmals durcheinander und je nach Fall für beide Arten (anfragen & schicken) gebraucht, obwohl die Definitionen für diese beiden Methoden recht klar verteilt sind. Standardmäßig ist also bei einem Formular die GET Methode vordefiniert. Geben wir das method="" Attribut also nicht an, so werden die Daten als sogenannten "QueryString" gesendet, d.h. sämtliche Informationen werden an die URL angehängt, die wir mit dem Attribut action="" angegeben haben:

  • Html
  • Ergebnis
<form action="#" method="GET"> <input type="text" name="benutzername" placeholder="Benutzername eintragen..." /> <input type="password" name="passwort" placeholder="Passwort eintragen..." /> <input type="submit" /> </form>

Die Adressleiste unseres Browser sieht nun wie folgt aus, wenn wir fiktive Daten eingeben:

http://www.MEINE_EIGENES_DOKUMENT.php?benutzername=Test&passwort=Test123

Bei sensiblen Daten, wie beispielsweise einem Passwort ist es wenig förderlich, wenn dieses in der Adressleiste zu sehen ist. Genau aus diesem Grund wird dafür die POST Methode benutzt:

  • Html
  • Ergebnis
<form action="#" method="POST"> <input type="text" name="benutzername" placeholder="Benutzername eintragen..." /> <input type="password" name="passwort" placeholder="Passwort eintragen..." /> <input type="submit" /> </form>

Nun werden die Daten ebenfalls gesendet, allerdings nicht visuell sichtbar.

Input-Elemente

Das <input /> Element ist eines der wichtigsten in HTML, denn es bietet dem Benutzer eine Unmenge an Möglichkeit Daten anzugeben. Der Name verrät es bereits: "input" kommt aus dem Englischen und bedeutet soviel wie "Eingabe".

Ein wichtiges Merkmal dieses Elements ist, dass wir es anhand des type="" Attributs ändern können. Damit haben wir allerdings auch ein Problem. Wir haben sehr oft in einem Formular das gleiche Element. Damit wir nun die einzelnen Daten auseinanderhalten können, brauchen wir ein weiteres Attribut. Das name="" muss in jedem <input /> Element vorhanden sein, denn sobald die Daten abgeschickt werden, wird mithilfe dieses Attributs ein Element genaustens identifiziert und als "Key-Value-Pair" übermittelt.

  • Html
  • Ergebnis
<form action="#" method="GET"> <input type="text" name="benutzername" placeholder="Benutzername eintragen..." /> <input type="password" name="passwort" placeholder="Passwort eintragen..." /> <input type="submit" /> </form>

Senden wir diese Daten ab, so können wir dieses Key-Value-Pair (Schlüssel-Werte-Paar) bereits in der Adressleiste unseres Browsers sehen:

http://www.MEINE_EIGENES_DOKUMENT.php?benutzername=Test&passwort=Test123

Textfeld

Mit dem Textfeld haben wir die wohl herkömmlichste Form Daten anzugeben: Mit der Tastatur. Dafür müssen wir das type="" Attribut auf den Wert text setzen.

  • Html
  • Ergebnis
<input type="text" name="FeldName" />

Weiterhin haben wir die Möglichkeit diesem Element wichtige Attribut mitzugeben:

WertBeschreibung
disabledSperrt dieses Element
readonlyElement ist nur zum Lesen; nicht zum Bearbeiten
valueGibt dem Element einen Wert vor
maxlengthGibt die maximale Anzahl an Zeichen an

Passwortfeld

Für das Passwortfeld müssen wir den Wert des type="" Attributs auf password setzen. Dabei ist darauf zu achten, dass es sich hierbei um das englische Wort "password" mit einem "d" am Ende handelt.

  • Html
  • Ergebnis
<input type="password" name="FeldName" />

Dieses Element zensiert die eingegebenen Zeichen, damit niemand auf den Bildschirm gucken und das Passwort erraten kann. Außer diesem Merkmal gibt es keinen Unterschied zum Textfeld. Deswegen können auch hierfür die obigen zusätzlichen Attribute benutzt werden.

Buttons

Für Buttons haben wir gleich vier Grundelemente:

Wollen wir einen einfachen Button erstellen, der zunächst keine vorgegebene Funktionalität hat und meistens erst mit Javascript diese bekommt, müssen wir das type="" Attribut auf button setzen. Damit erhalten wir einen Bereich, den wir mit der Maus anklicken können. Diesem Bereich können wir einen Text hinzufügen mittels des value="" Attributs.

  • Html
  • Ergebnis
<input type="button" value="Buttontext" />

Geben wir den Typ submit an, so bekommen wir einen Button, der bei einem Klick versucht die Daten an die Zieladresse aus dem <form></form> Element zu schicken. Standardmäßig wird hierfür der Text "Abschicken" auf deutschen Webseiten benutzt, aber mit dem value="" Attribut kann man diesen ändern.

  • Html
  • Ergebnis
<input type="submit" value="Senden" />

Mit dem Wert reset können wir einen Button definieren, der alle eingegebenen Daten auf ihren Ursprung setzt. Standardmäßig wird hierfür der Text "Zurücksetzen" auf deutschen Webseiten benutzt, welchen wir mit dem <value=""> Attribut ändern können. Beim folgenden Beispiel sollte ein Augenmerk darauf gelegt werden, dass die vordefinierten Werte mittels des value="" Attributs ebenfalls wiederhergestellt werden.

  • Html
  • Ergebnis
<form> <input type="text" placeholder="Benutzername" value="Test" /> <br> <input type="password" placeholder="Passwort" value="1234" /> <br> <input type="submit" value="Einloggen" /> <input type="reset" value="Auf Anfang" /> </form> <br><br> <form> <input type="text" placeholder="Benutzername" /> <br> <input type="password" placeholder="Passwort" /> <br> <input type="submit" value="Einloggen" /> <input type="reset" /> </form>

Wollen wir dem Benutzer anbieten eine Datei hochzuladen, dann können wir das mit dem "FileDialog" machen. Dafür müssen wir den Wert des type="" Attributs auf den Wert file setzen. Bei einem Klick auf diesen Button öffnet sich ein Fenster, welches uns ermöglicht, durch die verschiedenen Ordner unseres Betriebssystems zu navigieren und eine Datei auszuwählen. Standardmäßig wird hierfür der Text "Datei auswählen" auf deutschen Webseiten benutzt. Diesen Text können wir leider nicht ohne weiteres ändern.

  • Html
  • Ergebnis
<input type="file" value="Bitte auswählen" />

Weiterhin besteht dieses Element aus einem Text, der uns anzeigt, welche Datei wir ausgewählt haben. Wollen wir den Dateityp dieser Datei festlegen, können wir dafür das accept="" Element mit einem der folgenden Werte festlegen:

WertBeschreibung
Dateiendung,DateiendungNur diese Dateiendungen (durch Komma getrennt)
audio/*Nur Audiodateien
video/*Nur Videodateien
image/*Nur Bilddateien
Mediatyp/*Einer der Mediatypen definiert von der IANA

Weiterhin können wir für alle Buttons das Attribut disabled setzen. Damit werden diese Elemente gesperrt und das Klicken auf diese verhindert. Das ist sinnvoll, wenn eine Funktionalität zunächst gesperrt werden soll, bis bestimmte Daten gesetzt vorhanden oder gesetzt sind.

Radiobuttons

Radiobuttons sind von den restlichen hervorzuheben, da diese Elemente nur in einer Gruppe von Bedeutung sind. Wir verwenden Radiobuttons also immer da, wo wir eine Entscheidung von dem Nutzer haben wollen. Ein Paradebeispiel dafür ist die typische Geschlechterfrage bei einer Anmeldung auf einer Webseite:

  • Html
  • Ergebnis
<input type="radio" name="geschlecht" />Männlich <input type="radio" name="geschlecht" />Weiblich <input type="radio" name="geschlecht" />Neutral

In dem obigen Beispiel hat der Benutzer die Möglichkeit einen der drei kreisförmigen Buttons anzuklicken. Wählt er einen weiteren aus, so wird die Markierung bei dem vorherigen weggenommen. Auf diese Weise kann immer nur eine der vorgegebenen Optionen ausgewählt werden. Möchten wir einen ganz bestimmten Radiobutton vorweg makieren, so können wir genau diesem Element das Attribut checked hinzufügen:

<input type="radio" name="geschlecht" checked />

Checkboxen

Mit Checkboxen haben wir annähernd die gleiche Funktionalität wie mit Radiobuttons, bis auf den Unterschied, dass wir nun mehrere Boxen auswählen können:

  • Html
  • Ergebnis
<input type="checkbox" name="maennlich" checked />Blau <input type="checkbox" name="weiblich" checked />Rot <input type="checkbox" name="neutral" />Grün <input type="checkbox" name="maennlich" />Gelb

Bei dem obigen Beispiel können wir außer der beiden vorausgewählten Farben "Blau" und "Rot" auch noch die beiden Farben "Grün" und "Gelb" auswählen. Auffällig und wichtig ist bei diesem Codeabschnitt, dass wir die Elemente wieder mit dem name="" Attribut eindeutig kennzeichnen müssen. Somit brauchen wir einen anderen Namen für jedes Element.

Versteckte Elemente

Wollen wir Daten mitsenden, die nicht von einem Benutzer eingegeben wurden, so können wir das mit versteckten Feldern. Dafür müssen wir das <type=""> Attribut auf den Wert hidden setzen. Dieses Element hat damit eine gleichgroße Gültigkeit, wie alle anderen Elemente, mit dem Unterschied, dass es visuell nicht erkennbar ist:

  • Html
  • Ergebnis
<form> <input type="text" name="benutzername" /> <input type="password" name="passwort" /> <input type="hidden" name="browser" value="chrome" /> <input type="hidden" name="land" value="Deutschland" /> <input type="submit" /> </form>

Label-Element

Mit dem <label></label> Element können wir eine Überschrift für alle Textfelder angeben:

  • Html
  • Ergebnis
<form> <label>Benutzername: </label> <input type="text" name="benutzername" /> <label>Passwort: </label> <input type="password" name="passwort" /> <input type="submit" /> </form>

Des Weiteren haben wir mit diesem Element die Möglichkeit eine Verbindung zwischen Überschrift und Feld herzustellen. Dafür müssen wir dem Textfeld zusätzlich eine ID mithilfe des id="" Attributs zuweisen. Anschließend muss diese ID als Wert für das for="" Attribut des <label></label> Elements genommen werden. Die Vorteile sind hierbei nicht nur semantischer Natur, sondern auch in puncto "Benutzbarkeit". Der Benutzer kann nun auf die Überschrift klicken und gelangt mit dem Cursor sofort in dem jeweiligen Textfeld:

  • Html
  • Ergebnis
<form> <label for="username">Benutzername: </label> <input id="username" type="text" name="benutzername" /> <label for="pw">Passwort: </label> <input id="pw" type="password" name="passwort" /> <input type="submit" /> </form>

Textarea

Eine Textarea ist ein wesentlich Größeres Feld (meist in der größe veränderbar), in das wir eine unbegrenzte Anzahl an Text einfügen können. Dafür benötigen wir das <textarea></textarea> Element:

  • Html
  • Ergebnis
<textarea rows="20" cols="30"> Schreibe uns eine Nachricht... </textarea>

Wenn die Breite und Höhe mit CSS nicht definiert wird, benutzt man standardmäßig die Attribute rows="" für die Anzahl der Zeilen (Höhe) und cols="" für die Anzahl der Spalten (Breite).

Elemente untereinander Anzeigen

Da alle hier gezeigten Elemente eines Formulars Inline-Elemente sind und sich somit nebeneinander anzeigen, brauchen wir eine Möglichkeit, diese geordnet und übersichtlich untereinander anzeigen zu können. In der Regel wird dies mit CSS erreicht, allerdings haben wir auch eine sehr einfache HTML-Version dafür: Das Element <br />. Es steht für "Break Rule" und bedeutet in weiterem Sinne "Zeilenumbruch". Dieses Element können wir an beliebiger Stelle zwischen die anderen setzen. Genau da, wo wir einen Zeilenumbruch bewirken wollen. Wir sollten jedoch auf eine semantisch korrekte Gruppierung achten:

  • Html
  • Ergebnis
<form> <label for="username">Benutzername: </label> <input id="username" type="text" name="benutzername" /> <br /> <label for="pw">Passwort: </label> <input id="pw" type="password" name="passwort" /> <br /> <input type="submit" /> </form>