Formulare erstellen in HTML 5

Formularfelder werden unter dem Strich für die verschiedensten Dinge eingesetzt. Sei es bspw. in Form eines Kontaktformulars, eines Fragebogens oder im Rahmen einer Profilseite. HTML 5 bietet dabei neue Möglichkeiten, wie du Formulare erstellen und auszeichnen kannst.

Formulare sind vielseitig einsetzbar, daher braucht man sie immer wieder. In diesem Artikel erkläre ich zuerst welche Formularfelder es gibt und danach wie du sie auszeichnen und benutzen kannst.

 

Einleitung

Formulare gibt es in HTML zwar schon sehr lange, aber mit dem neuen HTML 5 Standard gibt es mehr Möglichkeiten. Daher teile ich die Erläuterung an dieser Stelle in zwei Teile. Zunächst erkläre ich „klassischen“ Formularfelder, danach die neuen Möglichkeiten, die HTML 5 bietet.

Ganz allgemein lässt sich dabei sagen: Du kannst in HTML mit dem Tag form Formulare erstellen. Innerhalb dieser Tags kannst du dann die einzelnen Felder und Typen des Formulars definieren. Dies geschieht dort 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 ebenso ein input type="...“.

Formulare lassen sich außerdem in einzelne Bereiche gruppieren. Dazu rahmt man, sinnbildlich gesprochen, das Formular mit einem fieldset ein. Ein Einfaches Formular könnte somit wie folgt aussehen.

 

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 sendet das Formular den eigenen Inhalt an die Datei „hier_eintragen.php„, die dann eine weitere Aktion auslöst. Dies kann bspw. ein Formmailer sein, der die Eingaben per Mail versendet. Auch denkbar ist demzufolge ein Script, was die Eingaben in einer Datenbank speichert.

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

 

Hinweis für die hier gezeigten Anzeigebeispiele:

Möglicherweise sind nicht alle Beispiele auf dieser Website lesbar angezeigt. Dies liegt unter dem Strich am Template der Website und den dazugehörigen CSS Angaben für Formularfelder. Auf deiner eigenen Website lässt sich dies natürlich umgehen.

Die Beispiele kannst du dir jedoch auch gesammelt auf einer unformatierten Website ansehen. Folge dazu bitte einfach diesem Link.

 

 

Formulare erstellen mit klassischen 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" erstellst du dabei ein einfaches Textfeld. Mit diesem Beispiel kannst du bspw. ein Formular erstellen, das zwei Felder für die Eingabe von Vor- und Nachnamen enthält.

 

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 zudem Formulare erstellen, die ein Textfeld für Passwörter beinhalten. Der Browser maskiert dabei einzelne Zeichen und zeigt sie nicht mehr im Klartext an.

 

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" erstellst du dabei einen Button, der das gesamte Formular an den sogenannten „form-handler“ sendet. Diesen legst du dann im Tag form fest (siehe Einleitung). Mit input type="reset" erzeugst du ebenfalls einen Button. Dieser schickt das Formular jedoch nicht ab, sondern setzt es auf die Ursprungswerte zurück.

 

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", sowie mit input type="checkbox", kannst du Optionen zu deinem Formular hinzufügen. Das Attribut radio lässt den Anwender dabei nur eine Auswahl aus mehreren möglichen treffen. Verwendest du hingegen das Attribut checkbox, lassen sich mehrere Antworten gleichzeitig auswählen.

 

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 schließlich über das Attribut name="...“. Dieses Attribut muss aber bei Buttons, die zueinander gehören, immer gleich bleiben. 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 erwähne ich hier schließlich noch den input type="button". Mit diesem Tag erzeugst du einen anklickbaren Button, der aber auch eine Meldung im Browser ausgeben kann. Sonst hat er allerdings keine Funktion.

 

Beispiel:

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

 


Live Anzeigebeispiel:


 

Formulare erstellen mit HTML 5 Input Types

Kommen wir nun jedoch zu den Neuerungen, die uns HTML 5 bei den Input Types bietet. Die neuen Input Types funktionieren dabei häufig nur in aktuellen, modernen Browsern. In älteren Browsern werden die neuen Input Types hingegen als normales Textfeld behandelt. Es ist dabei aber nicht nur aus funktioneller Sicht ratsam, den Browser stets aktuell zu halten. Durch einen aktuellen Browser erhöht sich bspw. auch die Sicherheit.

Es kann auch passieren, dass nicht alle Input Types von jedem Browser unterstützt werden, obwohl er aktuell ist. Ich habe daher die folgenden Beispiele jeweils mit diesen Browsern getestet:

  • Chrome (Version 55.0).
  • Firefox (Version 50.1).
  • Internet Explorer (Version 11, Windows 10).
  • Edge (Version 38.14393).

 

Wenn es zu einem Beispiel Abweichungen der Darstellung zwischen den Browsern gibt, habe ich dann eine „Browser Info“ hinzugefügt.

 

Input Type: Number

Mit input type="number" kannst du Formulare erstellen, in die man aber nur Zahlen eintragen kann. Die Werte kannst du dabei auch auf einer Von-Bis-Skala einschränken.

 

Beispiel:

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

 

Du kannst dabei festlegen, welche Werte man in das Formular eintragen kann. Dazu verwendest du die Attribute min="x" und max="x". Sendest du das Formular ab nachdem du einen anderen Wert eingetragen hast, gibt der Browser automatisch eine Fehlermeldung aus.

 


Live Anzeigebeispiel:

Anzahl (zwischen 1 und 5):

 

Input Type: Date

Mit input type="date" erzeugst du bspw. ein Eingabefeld, das mit einem Datums-Format vorbelegt ist. Neben der händischen Eingabe ist aber auch die Auswahl per Kalender möglich, sofern der Browser ihn darstellt.

 

Browser Info:

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

 

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.

 

Beispiel:

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

 


Live Anzeigebeispiel:

Wähle deine Lieblingsfarbe:

 

Input Type: Range

Mit diesem Input Type kannst du dir zudem einen Schieberegler anzeigen lassen. Beachte jedoch, dass die Skala nicht von allen Browsern dargestellt wird. Daher solltest du die Skala auch immer noch einmal separat anzeigen.

 

Browser Info:

Immerhin kennen alle Browser den Input Type „Range„. Edge und Internet Explorer (Windows 10) blenden beim Verschieben sogar die Skala ein. Chrome und Firefox hingegen nicht.

 

Beispiel:

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

 


Live Anzeigebeispiel:


 

Input Type: Month / Week

Mit diesen Input Types kannst du Formulare erstellen, in denen ein Kalender auswählbar ist. Hierzu benutzt du die Felder input type="month" und input type="week". Du kannst dabei entweder die Kombination Monat und Jahr, oder Kalenderwoche und Jahr auswählen.

 

Browser Info:

Während Firefox und Internet Explorer nur ein Textfeld ausgeben, bieten Edge und Chrome hingegen die Auswahl per Kalender an.

 

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

Du kannst sowohl mit input type="time", als auch mit input type="datetime-local" Zeitangaben in Formularen übertragen. Mit type="datetime-local" kannst du hingegen auch ein Datum integrieren.

 

Browser Info:

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

 

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

Mit HTML 5 hast du neue Möglichkeiten, Formulare zu erstellen. Jedoch können nur moderne Browser diese Neuerungen anzeigen. Die Anzeige der neuen Standards kann sich zudem noch je nach Browser unterscheiden. Diesen Fakt solltest du daher beachten, wenn du auf deiner Website mit HTML 5 Formulare erstellen möchtest.

Immerhin: Sollte ein Browser ein Feld nicht kennen, wird es als normales Textfeld ausgegeben. Somit besteht eine bequeme Fallback Lösung für ältere Browser. Bleibt zu hoffen, dass sich die Browser künftig immer weiter an die Standards halten und diese auch gleichartig umsetzen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.