Formulare

Formulare werden immer dann eingesetzt, wenn bestimmte Eingaben vom User erforderlich sind. Das bekannteste Beispiel ist sicherlich das Anmelden bei einem Webservice mit dem Benutzername oder der E-Mail-Adresse und dem Passwort. Aber auch beim Online-Shoppen wird spätestens wenn es um den Versand geht, über ein Formular die Adresse abgefragt. Ein Formular wird mit dem <form>-Tag erstellt und erhält ein Attribut, welches angibt, wohin die Daten gesendet werden.

Formular


<form action="#">
...
</form>

In HTML werden die Formulare nur erstellt. Zum Auswerten und Verarbeiten der Daten werden Sprachen wie JavaScript oder PHP benötigt.

Input

Das <input>-Tag wird verwendet, um Daten vom Benutzer abzufragen. Um welche Art der Eingabe es sich handelt, wird über das Attribut "type" ermittelt. Wenn kein Attribut gesetzt wird, dann verwendet der Browser die Standardeinstellung "text".

Formular mit Inputelement


<form action="#">
 <input type="text">
</form>

Das Ergebnis ist ein einfaches Eingabefeld.

Das Attribut `"type"` kann mehrere Werte annehmen.

Eine Übersicht der Texteingabetypen:

Eingabetypen des Inputelements


<input type="text"> <!-- Einfache einzeilige Texteingabe -->
<input type="password"> <!-- Eine versteckte Texteingabe -->
<input type="tel"> <!-- Angepasste Tastatur bei mobilen Geräten -->
<input type="email"> <!-- Angepasste Tastatur mit @-Symbol auf mobilen Geräten -->
<input type="url"> <!-- Zusätzliches .com auf Tastatur (IOS und Android) -->

Auch eine nur auf Zahlen beschränkte Eingabe ist möglich.

Zahleneingabe im Formular


<input type="number"> <!-- Nur auf Zahleneingabe beschränkt -->

Bei dem "type" "number" können zusätzliche Attribute verwendet werden.

Das Attribut "min" legt einen Mindestwert fest. Das Attribut "max" legt einen Maximalwert fest. Das Attribut "step" ermöglicht ein stufenbasiertes Springen durch Scrollen. Das Attribut "value" kann das Feld mit einem Wert vorbelegen.

Label

Um dem Eingabefeld ein Label hinzuzufügen, verwenden wir Id´s zur Identifikation. Das Label selbst erzeugen wir mit dem <label>-Tag.

Formular mit Label


<form action="#">
 <label for="eingabetext">Ich bin ein Label</label>
 <input type="text"id="eingabetext">
</form>

Eine Auswahl treffen

Mit dem Wert "radio" können wir eine Gruppe von Button erstellen, von denen der Benutzer einen Auswählen kann. Durch das <fieldset>-Tag können wir den Bereich im Formular gruppiert darstellen.

Radiobutton im Formular


<form action="#">
 <p>Wählen Sie eine Jahreszeit</p>
 <fieldset>
  <input type="radio" id="fruehling" name="jahreszeit" value="fruehling">
  <label for="fruehling">Frühling</label>
  <input type="radio" id="sommer" name="jahreszeit" value="sommer">
  <label for="sommer">Sommer</label>
  <input type="radio" id="herbst" name="jahreszeit" value="herbst">
  <label for="herbst">Herbst</label>
  <input type="radio" id="winter" name="jahreszeit" value="winter">
  <label for="winter">Winter</label>
 </fieldset>
</form>

Mit dem Attribut "name" geben wir an, welche Button zusammen gehören. Wenn mehrere Button den gleichen Wert beim Attribut "name" haben, dann kann nur einer davon ausgewählt werden.

Das Attribut "value" wird als interner Bezeichner verwendet, beim absenden des Formulars wird der "value"-Wert verarbeitet.

Mit "checkbox" erstellen wir eine Gruppe von Buttons, bei denen der Benutzer auch mehrere Auswahlmöglichkeiten gleichzeitig treffen kann.

Checkboxen im Formular


<form action="#">
 <p>Was soll alles auf die Pizza?</p>
 <fieldset>
  <label>
   <input type="checkbox" name="belag" value="tomatensosse">Tomatensoße
  </label>
  <label>
   <input type="checkbox" name="belag" value="salami">Salami
  </label>
  <label>
   <input type="checkbox" name="belag" value="schinken">Schinken
  </label>
  <label>
   <input type="checkbox" name="belag" value="kaese">Käse
  </label>
 </fieldset>
</form>

Aktion auslösen

Mit dem <button>-Element erzeugen wir einen sichtbaren und anklickbaren Bereich, um Aktionen auszulösen. Wir können dabei auf 3 verschiedene Arten des Buttons zugreifen. Die Zuordnung erfolgt über das "type" Attribut.

Um das Formular abzusenden, verwenden wir den Wert "submit".

Absendebutton


<button type="submit">Absenden</button>

Der Wert "button" wird verwendet, um eine clientseitige Aktion auszuführen.

Button für Aktionen


<button type="button">Aktion ausführen</button>

Um das Formular zurückzusetzen / reseten, verwenden wir den Wert "reset".

Formular zurücksetzen


<button type="reset">Formular zurücksetzen</button>

Der Unterschied ist am Button nicht wirklich sichtbar, aber dafür liegt er eindeutig in der Funktion.

Weiter mit Grafiken