Formulare erstellen in HTML 5

Zuletzt aktualisiert: Sonntag, 15. Januar 2017 Geschrieben von Jan Pionzewski

Formularfelder werden im Internet für die verschiedensten Dinge eingesetzt. Sei es in Form eines Kontaktformulars, eines Bestellformulars oder im Rahmen einer Profilseite.

Formulare sind vielseitig einsetzbar und werden immer wieder gebraucht. Hier erkläre ich, welche Formularfelder es gibt und wie du diese auszeichnen und definieren kannst.

 

Einleitung

Formularfelder gibt es in HTML schon sehr lange. Mit dem neuen HTML 5 Standard sind noch weitere Möglichkeiten hinzugekommen. Daher wird die Erläuterung an dieser Stelle zweigeteilt. Einmal für die "klassischen" Formularfelder und einmal für die neuen Möglichkeiten, die HTML 5 bietet.

Ganz allgemein lässt sich sagen: Formularfelder werden in HTML mit dem Tag <form>...</form> ausgezeichnet. Innerhalb dieser Tags können dann die einzelnen Formularfelder und Formulartypen definiert werden. Dies geschieht mit dem Tag <input type="...">.  In der Regel besitzt ein Formular am Ende auch einen oder mehrere Buttons, mit denen man seine Eingabe Speichern bzw. Absenden oder löschen kann. Auch dieser Button ist ein <input type="...">.

Formulare lassen sich auch in einzelne Bereiche gruppieren. Dazu rahmt man, sinnbildlich gesprochen, das Formular mit dem <fieldset>...</fieldset>-Tag ein. Ein Einfaches Formular könnte somit wie folgt aussehen.

 

Code-Beispiel:

<form action="hier_eintragen.php" method="post">
  <fieldset>
  <legend>Pers&ouml;nliche Information:</legend>
    Vorname:<br>
    <input type="text" name="vorname" value="Max"><br>
    Nachname:<br>
    <input type="text" name="nachname" value="Mustermann"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>


Live-Anzeigebeispiel:

Persönliche Information: Vorname:

Nachname:



 

Im obigen Beispiel würden die Inhalte des Formulars an die Datei "hier_eintragen.php" gesendet werden, die dann eine entsprechende Aktion auslöst. Dies kann beispielsweise ein sogenannter Formmailer sein, der die Eingaben per Mail versendet, oder ein Datenbank-Script, welches die Daten in eine Datenbank speichert.

In den nachfolgenden Abschnitten erläutere ich die einzelnen "Input Types", die du in deinen Formularen verwenden kannst.

 

Hinweis für die hier gezeigten Anzeigebeispiele:

Bedingt durch das allgemeine Website-Template und den dazugehörigen CSS-Angaben für Formularfelder, werden auf dieser Seite unter Umständen nicht alle Live-Beispiele lesbar angezeigt. Dies lässt sich durch die eigenen Style-Angaben auf deiner Webseite natürlich entsprechend umgehen.

Die Anzeigebeispiele kannst du dir jedoch auch gesammelt auf einer unformatierten Website ansehen. Dazu folge bitte einfach diesem Link.

 

Klassische HTML Input Types

Die klassischen HTML Input Types für Formulare werden von allen Browsern unterstützt.

 

Input Type: Text

Mit dem HTML-Tag <input type="text"> wird ein einfaches Textfeld erstellt. Im folgenden Beispiel werden zwei Textfelder für die Eingabe von Vor- und Nachnamen erstellt.

 

Code-Beispiel:

<form>
  Vorname:<br>
  <input type="text" name="vorname"><br>
  Nachname:<br>
  <input type="text" name="nachname">
</form>

 


Live-Anzeigebeispiel:

Vorname:

Nachname:

 

Input Type: Password

Mit dem Tag <input type="password"> kannst du ein Textfeld für Passwörter erstellen. Hier werden die einzelnen Zeichen maskiert, so dass man sie im Browser nicht im Klartext sieht.

 

Code-Beispiel:

<form>
  Benutzername:<br>
  <input type="text" name="username"><br>
  Passwort:<br>
  <input type="password" name="passwort">
</form>

 


Live-Anzeigebeispiel:

Benutzername:

Passwort:

 

Input Type: Submit / Reset

Mit <input type="submit"> wird ein Button erstellt, der das gesamte Formular an den sogenannten "form-handler" sendet, welcher im <form>-Tag festgelegt werden muss (siehe Einleitung). Mit <input type="reset"> wird ebenfalls ein Button erzeugt. Dieser schickt das Formular jedoch nicht ab, sondern setzt es auf die Ursprungswerte zurück.

 

Code-Beispiel:

<form action="hier_eintragen.php" method="post">
  Vorname:<br>
  <input type="text" name="vorname" value="Max"><br>
  Nachname:<br>
  <input type="text" name="nachname" value="Mustermann"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

 


Live-Anzeigebeispiel:

Vorname:

Nachname:



 

Input Type: Radio / Checkbox

Mit <input type="radio"> und <input type="checkbox"> kannst du Auswahloptionen zu deinem Formular hinzufügen. Das Attribut radio lässt den Anwender dabei nur eine Auswahl aus mehreren möglichen treffen. Beim Attribut checkbox hingegen können mehrere Felder ausgewählt werden.

 

Code-Beispiel:

<form>
  <fieldset><legend>Radio-Buttons</legend>
    <input type="radio" name="Geschlecht" value="Maennlich" checked> M&auml;nnlich<br>
    <input type="radio" name="Geschlecht" value="Weiblich"> Weiblich<br>
    <input type="radio" name="Geschlecht" value="Anderes"> Anderes
  </fieldset><br>
  <fieldset><legend>Checkboxen</legend>
    <input type="checkbox" name="Fahrzeug1" value="Motorrad"> Ich habe ein Motorrad<br>
    <input type="checkbox" name="Fahrzeug2" value="Auto"> Ich habe ein Auto
  </fieldset>
</form>

 

Hinweis:

Die Radio-Buttons finden ihre Zuordnung zueinander über das Attribut name="...", welches bei den zugehörigen Buttons gleich bleiben muss. Das zusätzliche Attribut checked sorgt dafür, dass dieser Button vorausgewählt ist.

 


Live-Anzeigebeispiel:

Radio-Buttons Männlich
Weiblich
Anderes

Checkboxen Ich habe ein Motorrad
Ich habe ein Auto

 

Input Type: Button

Der Vollständigkeit halber soll hier noch <input type="button"> erwähnt werden. Mit diesem Tag wird ein anklickbarer Button erzeugt, der eine Meldung im Browser ausgeben kann. Sonst hat er allerdings keine Funktion.

 

Code-Beispiel:

<input type="button" onclick="alert('Ich bin eine Meldung. Ganz wichtig!')" value="Wichtige Meldung!">

 


Live-Anzeigebeispiel:

 


Werbung


 

HTML 5 Input Types

Kommen wir nun zu den Neuerungen, die uns HTML 5 bei den Input Types bietet. Die nachfolgenden Input Types funktionieren dabei häufig nur in aktuellen, modernen Browsern. In älteren Browsern werden die neuen Input Types als normales Textfeld behandelt. Dennoch ist es nicht nur aus funktioneller Sicht ratsam, seinen Browser stets aktuell zu halten.

Es kann auch passieren, dass nicht alle Input Types von jedem Browser unterstützt werden, obwohl er aktuell ist. Ich habe die folgenden Beispiele jeweils mit Chrome (Version 55.0), Firefox (Version 50.1), Internet Explorer (Version 11, Windows 10) und Edge (Version 38.14393) getestet. Gibt es Abweichungen der Darstellung zwischen den Browsern, habe ich zu dem betroffenen Beispiel eine "Browser-Info" hinzugefügt.

 

Input Type: Number

Mit <input type="number"> kannst du ein Eingabefeld erstellen, in dem nur Zahlen einzutragen sind. Dieses kann sogar auf bestimmte Von-Bis-Werte eingeschränkt werden.

 

Code-Beispiel:

<form>
  Anzahl (Zwischen 1 und 5):
  <input type="number" name="anzahl" min="1" max="5">
</form>

 

Mit den Attributen min="x" und max="x" können die Werte festgelegt werden, die eingetragen werden dürfen. Wird ein anderer Wert eingetragen, gibt der Browser automatisch eine Fehlermeldung aus, wenn das Formular abgesendet wird.

 


Live-Anzeigebeispiel:

Anzahl (zwischen 1 und 5):

 

Input Type: Date

Mit <input type="date"> wird ein Eingabefeld erzeugt, was mit einem Datums-Format vorbelegt ist. Neben der händischen Eingabe ist auch die Auswahl per Kalender möglich, welcher vom Browser dargestellt wird.

 

Browser-Info:

Firefox und Internet Explorer interpretieren dieses Feld nicht. Chrome und Edge haben keine Probleme.

 

Code-Beispiel:

<form>
  Geburtstag:
  <input type="date" name="geburtstag">
</form>

 


Live-Anzeigebeispiel:

Geburtstag:

 

Input Type: Color

Mit diesem Eingabefeld können deine Besucher eine spezielle Farbe auswählen und diese Auswahl dann an das Formular übergeben.

 

Browser-Info:

Der Internet Explorer mag dieses Feld ebenfalls nicht. Chrome, Firefox und Edge hingegen haben keine Probleme.

 

Code-Beispiel:

<form>
  W&auml;hle deine Lieblingsfarbe:
  <input type="color" name="lieblingsfarbe">
</form>

 


Live-Anzeigebeispiel:

Wähle deine Lieblingsfarbe:

 

Input Type: Range

Mit diesem Eingabefeld kannst du einen Schieberegler anzeigen lassen. Beachte jedoch, dass die Skala nicht von allen Browsern dargestellt wird. Die Skala sollte daher separat noch einmal angezeigt werden.

 

Browser-Info:

Alle Browser kennen den Range-Befehl. Edge und Internet Explorer (Windows 10) blenden beim Verschieben sogar die Skala ein. Chrome und Firefox nicht.

 

Code-Beispiel:

<form>
  <input type="range" name="Punkte" min="0" max="10">
</form>

 


Live-Anzeigebeispiel:


 

Input Type: Month / Week

Mit <input type="month"> und <input type="week"> kann im Formularfeld aus einem Kalender entweder eine Kombination aus Monat und Jahr oder Kalenderwoche und Jahr ausgewählt und übertragen werden.

 

Browser-Info:

Firefox und Internet Explorer geben nur ein Textfeld aus. Edge und Chrome bieten hingegen die Auswahl per Kalender an.

 

Code-Beispiel:

<form>
  Ablaufdatum (Monat und Jahr):
  <input type="month" name="ablaufdatum"><br>
  W&auml;hlen Sie eine Woche aus:
  <input type="week" name="Woche">
</form>

 


Live-Anzeigebeispiel:

Ablaufdatum (Monat und Jahr):
Wählen Sie eine Woche aus:

 

Input Type: Time / Datetime-local

Mit <input type="time"> und <input type="datetime-local"> können Zeitangaben in Formularen übertragen werden. Mit type="datetime-local" wird auch eine Datumsangabe integriert.

 

Browser-Info:

Edge und Chrome zeigen die Felder problemlos an, während Internet Explorer und Firefox nur ein normales Textfeld anzeigen.

 

Code-Beispiel:

<form>
  Uhrzeit:
  <input type="time" name="Uhrzeit"><br>
  Datum und Uhrzeit:
  <input type="datetime-local" name="datum-und-uhrzeit">
</form>

 


Live-Anzeigebeispiel:

Uhrzeit:
Datum und Uhrzeit:

 

Fazit

HTML 5 bietet einige Neuerungen für Formularfelder. Allerdings werden die neuen Formularfelder nur in modernen Browsern unterstützt. Und hier unterscheiden sich leider die Interpretationen je nach Browser. Dies solltest du bei der Verwendung auf deiner Webseite beachten.

Immerhin: Sollte ein Browser ein Feld nicht unterstützen, wird es als normales Textfeld ausgegeben. Somit besteht eine bequeme Fallback-Lösung für ältere Browser.

 

 

Kommentar schreiben