Formulare HTML 5

Formulare werden gebraucht, um Abfragen oder Eingaben zu ermöglichen. Es gibt Emailformulare, Formulare in Warenkorb und Shopanwendungen. Formulare, um Beiträge und Posts in Foren oder Blogs zu ermöglichen, Suchmöglichkeiten und vieles mehr.

Die ausgwählten oder eingebenen Daten kann man unmittelbar mit Javascript auswerten oder serverseitig verarbeiten. Das klassische Beispiel ist, die Formulardaten werden an den Server geschickt und dort verarbeitet. So könnte beispielsweise ein PHP-Script die Daten empfangen und per email-Funktion verschicken, oder mittels mySQL in eine Datenbank eintragen.

Formular Generatoren im Netz

Tipps

Inhalt diese Seite

form Element

Ein Formular wird von einem form-Tag umschlossen. Zwischen die Formtags kommen sämtliche Elemente des Formulars (input Felder, Auswahllisten, Checkboxen, Buttons etc.), das können aber auch weitere Elemente sein, wie beschreibende Texte, Bilder oder Multimedia Elemente oder Script Bereiche.

so siehts aus Einfaches Formular

Attribute des form-Elements

Im einleitenden Formtag können einige wichtige Attribute notiert werden.

action

Das Attribut action bekommt eine URL-Adresse zugewiesen, an welche die Formulardaten geschickt werden. Das ist im Normalfall ein serverseitiges Script, welches die Formulardaten verarbeitet. Außerdem schickt das Script einen HTML-Inhalt an den Browser. Der Scriptaufruf, der durch das Absenden des Formulars erfolgt, ist auch ein Seitenaufruf, daher sind hier die Regeln der Referenzierung gültig.

action="warenkorb.php"

Email Adresse

Es ist möglich dem action- Attribut eine Emailadresse zuzuweisen, um das Formular als Email zu verschicken. Der Erfolg ist hierbei nicht garantiert, denn das hängt von Browser- und Emaileinstellungen auf dem Userrechner ab. Hier wird außerdem noch ein weiteres Attribut für die Zeichenkodierung benötigt: enctype="text/plain"

<form action="mailto:tritra@trulla.la" enctype="text/plain" method="post">

method

Wenn ein serverseitiges Script verwendet wird, muss eine HTTP Request Methode verwendet werden. Diese wird mit dem Attribut method definiert. Es sind hier 2 Wertzuweisungen möglich. Die Standardmethode GET, welche zugewiesen wird, wenn nichts angegeben ist und die Mehtode POST.

method="post"

method="get"

Wenn man die Methode GET verwendet, werden die Daten an die URL-Adresse angehängt. Diese Werte sieht man in der Adresszeile des Browsers. Das könnte beispielsweise so aussehen

...warenkorb.php?artikel=shirt0132&color=red&size=xxl

In diesem Beispiel werden 3 Variablen mit Wertzuweisung an eine Seite warenkorb.php geschickt. artikel=shirt0132, color=red, size=xxl. Die Datenmenge ist bei der GET Methode begrenzt. Bei Suchanfragen kann das jedoch sehr praktisch sein, da man so eine Adresse auch verlinken kann.

Bei größeren Datenmengen sollte man die POST- Methode verwenden. Außerdem sind diese Daten nicht in der Adresszeile einsehbar.

PHP Beispiel mit GET

PHP Beispiel mit iframe und Menü

name

Mit dem name-Attribut hat man die Möglichkeit, dem Formular einen eindeutigen Namen zuzuweisen. Das ist vor allen Dingen dann sinnvoll, wenn man mehrere Formulare auf einer Seite hat. 2 Formulare dürfen nicht den gleichen Namen haben und können somit eindeutig zugwiesen werden. Das name Attribut ist rückwärtskompatibel zu älteren Javascripts. Ansonsten wird kein name Attribut gebraucht.

enctype / Zeichencodierung

siehe Wikipedia URL-Encoding / Prozentcodierung

Zeichentabelle UTF-8

enctype="application/x-www-form-urlencoded"

Die Formulardaten werden standardmäßig mit einem MIME-Type namens application/x-www-form-urlencoded verschickt, damit es keine Probleme in URL-Adressen gibt. Das geschieht, indem alle Zeichen jenseits des ASCII-Codes und alle Zeichen, die in URL-Adressen eine spezielle Bedeutung haben, maskiert werden. Diese sogenannte Prozentcodierung setzt für die Maskierung ein % Zeichen gefolgt von einem Hex-Wert ein, zB. %21 für $

enctype="multipart/form-data"

Ein Formular welches aus mehreren Ressourcen besteht, beispielsweise bei Dateiuploads, werden hiermit ausgezeichnet.

enctype="text/plain"

Hiermit werden die Formulardaten ohne jede Kodierung übertragen. Man benötigt es in der Regel für die Email- Übertragung.

autocomplete

Die meisten Browser bieten dem User eine Autovervollständigung an. Man kann als Webentwickler mittels des Attributs autocomplete="off" diese Autovervollständigung deaktivieren. Im einleitenden form-Tag hat diese Einstellung Auswirkung auf alle im Formular enthaltenen Elemente. Möchte man für ein einzelnes Element die Autovervollständigung wieder aktivieren, kann man das innerhalb des Elements folgendermaßennotieren: autocomplete="on"

novalidate

novalidate hat die Bedeutung das auch Fehleingaben übertragen werden. In vielen HTML5 Eingabefeldtypen sind nur bestimmte Wertzuweisungen erlaubt. Bei falschen Angaben verhindern HTML5 fähige Browser den Versand, es sei denn man notiert das Standalone- Attribut novalidate im einleitenden Formtag.

Beispiel PHP Formular zum Download

Das folgenden Beispiel können Sie sich herunterladen. Sie müssen beide Dateien auf den Server laden. Die HTML Seite mit Formular verschickt die Daten an die PHP Seite, die PHP Seite verschickt eine Email und zeigt einen Bestätigungstext an, den Sie nach Belieben ändern können.

Sie können das Beispiel erweiteren lesen Sie dazu die Kommentare in der PHP Datei.

Beispiel

Formularstruktur

fieldset & legend

Ein größeres Formular kann aus mehreren Teilen oder Gruppen bestehen. Beispielsweise eine Gruppe für die Eingabe der persönlichen Daten, wie Name, Adresse, Telefon, Email etc. eine Gruppe für eine Bestellung, eine Gruppe für das Absenden mit AGB-Zustimmung etc. Für eine derartige Aufteilung stellt HTML das Element fieldset zur Verfügung. Zum fieldset lässt sich noch das legend Element hinzufügen, welches als Überschrift oder Titel dient. Diese Elemente lassen sich mittels CSS formatieren.

<form>
  <fieldset>
      <legend>Persönliche Daten</legend>
      <input...>
      <input...>
      <input...>
  </fieldset>
</form>

input & label

Um input-Felder zu strukturieren, kann man diesen ein label- Element zuweisen, welches als Beschriftung dient. Hier gibt es 2 Möglichkeiten das label- Element dem dazugehörigen input- Element zuzuweisen.

In der expliziten Fassung wird mittels des for Attributs ein Bezug, zum id Attribut des input Elements hergestellt. Die implizite Variante basiert auf einer Verschachtelung des input Elements innerhalb des label Elements. Moderne Browser fokussieren beim Klick auf ein Label- Element das dazugehörige Input Element. Mittels CSS kann man die Ausrichtung des label Elements bestimmen.

Beispiel

Beispiel: Strukturiertes Formular mit Fieldset und Label Elementen

Dialogelemente

Es gibt in HTML eine Reihe von Dialogelementen, wie Eingabefelder, mehrzeilige Eingabefelder, Checkboxen, Radiobuttons, Auswahllisten, Menüs und Buttons. Diese Elemente werden vom Browser zur Verfügung gestellt. Bei einigen kann man das Aussehen mittels CSS sehr stark beeinflussen, bei anderen ist das nicht so gut möglich (z.B. bei Radiobuttons, Checkboxen).

input - Standalone- Element

Das Standalone Element input deckt eine Reihe von Einsatzmöglichkeiten ab. Das hängt von dem zugewiesenen Feldtyp ab, den man dem Attribut type zuweist. Das input Element ist kein Blockelement und erzeugt somit auch keine neue Zeile im Textfluss. Es gibt viele Feldtypen, die die Funktionsweise eines input-Feldes bestimmen. type="submit", type="tel" type="date" type="email" type="password" type= "radio" Siehe dazu diese Seite HTML5 type für input Felder

type = text

Mit der Wertzuweisung type="text" wird ein einzeiliges Textfeld erzeugt.

Attribute für input type="text"
Attribut Bedeutung
type Der Standardwert type="text" kann auch weggelassen werden. Hier wird ein einfaches einzeiliges Textfeld erzeugt.
name Das Attribut name sollte nicht fehlen, denn wenn das Formular verschickt wird, werden die Daten nach dem Schema name=Wert versand. Wenn beispielsweise im folgenden Formularelement der Name "Horst" eingegeben wurde, erhält das Script folgende Daten vorname=Horst
<input name="vorname" type="text>
size

Mit dem size-Attribut kann man die angezeigte Feldlänge eines einzeiligen Textfeldes bestimmen. Dabei entspricht die ganzzahlige Wertzuweisung der Anzahl der Buchstaben, die angezeigt werden ohne zu scrollen.

size="10"

maxlength

Das Attribut maxlength erwartet auch einen ganzahligen Wert. Dieser entspricht der maximalen Anzahl der Buchstaben, die eingegeben werden können. Man sollte sich in Script jedoch nicht auf diese Grenze verlassen.

maxlength="20"

value

Mit dem Attribut value kann man die Eingabe vorbelegen. Der dort vergebene Wert erscheint als vordefinierte Eingabe.

value="bitte ausfüllen"

Hier bietet sich auch das placeholder Attribut an, welches bei einer Eingabe automatisch verschwindet.

textarea - mehrzeilige Textfelder

Mittels textarea erstellt man ein mehrzeiliges Eingabefeld. Hier kann man reinen Text eingeben. Es ist nicht möglich formatierten Text zu bearbeiten. Es ist kein Standalone-Element. Man kann innerhalb des Gültigkeitsbereich vorbelegten Texteinfügen.

<textarea>Bitte ausfüllen</textarea>

Folgende Attribute sind möglich

Attribute für textarea
Attribut Bedeutung
name selbstvergebenen Bezeichnername eingeben
rows Ganzahl Anzahl der angezeigten Reihen, Höhe, besser ist hier CSS
cols Ganzzahl Anzahl der Zeichen oder Spalten, Breite, besser ist hier CSS
maxlength Anzahl der maximal zulässigen Zeichen
wrap Werte sind soft und hard Dabei stellt soft den Standardwert dar und braucht daher nicht explizit angegeben werden. Es erfolgt ein automatischer Zeilenumbruch. Ein erzwungener Zeilenumbruch kann mit der Entertaste eingegben werden. Der Wert hard bewirkt, dass der Text nicht automatisch am Ende umgebrochen wird.
value Im Gegensatz zum einzeiligen input Feld, wird hier mit value der Text innerhalb des Gültigkeitsbereichs des Textarea Feldes vergeben. In der Praxis kommt es jedoch auf das gleiche raus, weil das der Eingabetext oder der vorbelegte Text ist.

Radiobuttons

so sieht's aus

input type="radio"

Radiobuttons stellen eine zusammenhängede Gruppen von Knöpfen dar, von denen jeweils nur eine aktivierbar ist. So kann man beispielsweise aus einer Liste von Farben, die gewünschte Farbe eines Produktes auswählen.

Eine zusammenhängede Gruppe wird durch das Attribut name bestimmt. Alle Radiobuttons, die dort die gleiche Wertzuweisung haben gehören zu einer Gruppe. name="farbe"

Attribute für input type=radio
Attribut Bedeutung
type radio
name Alle Radiobuttons einer Gruppe bekommen die gleiche Wertzuweisung beim Attribut name
value Jeder Radiobutton bekommt einen eigene Wertzuweisung bei value. Wenn das Formular verschickt wird, geschieht das nach dem Schema name=value. Es folgt ein Beispiel: Alle Radiobuttons einer Gruppe haben den name="farbe" der aktivierte Radiobutton hat value="rot", verschickt wird farbe="rot"
checked Einem der Radiobuttons einer Gruppe kann man das Standalone Attribut checked zuweisen. Dadurch ist dieser Radiobutton beim Aufruf der Seite aktiviert.
disabled Das standalone Elemente disabled, deaktiviert den Button. Er wird angegraut dargestellt.
<form>
  <input type="radio" name="farbe" value="rot"> rot <br>
  <input type="radio" name="farbe" value="blau"> blau <br>
  <input type="radio" name="farbe" value="gelb"> gelb <br>
</form>
  

Checkboxen

so sieht's aus

input type="checkbox"

Checkboxen funktionieren ähnlich wie Radiobuttons, man kann sie aktivieren oder deaktivieren. Im Gegensatz zu Radiobuttons hat man hier die Wahl, entweder eine Gruppe von checkboxen zu bilden, oder jeder checkbox einen eigenen Namen zuzuweisen. Bildet man eine Gruppe von Checkboxen so lassen sich hier auch mehrere Checkboxen aktvieren.

Attribute für input type=checkbox
Attribut Bedeutung
type checkbox
name Man kann jeder Checkbox einen eigenen Namen zuweisen oder man weist bei mehreren Checkboxen den gleichen name Wert zu. In letzteren Fall, bilden diese Checkboxen eine Gruppe. Verschickt man das Formular an ein PHP-Script sollte man den Wert mit einer geöffneten und geschlossenen, eckigen Klammer am Ende abschließen. name="farben[]" Die Werte der ausgewählten Checkboxen werden so in einem Array übertragen.
value

Wie bei den Radiobuttons werden die Wertzuweisungen des value Attributs der aktivierten Checkboxen übertragen. Wenn man eine Gruppe von Checkboxen gebildet hat, dient der name als Arrayname und die ausgwählten Werte bilden die Elemente des Arrays.

Wenn es nur eine Checkbox mit dem name gibt, braucht man kein value Attribut zu vergeben. Wenn die Checkbox aktiviert ist, wird der Wert von name übertragen andernfalls nicht.

checked Einem der Radiobuttons einer Gruppe kann man das Standalone Attribut checked zuweisen. Dadurch ist dieser Radiobutton beim Aufruf der Seite aktiviert.
disabled Das standalone Elemente disabled, deaktiviert den Button. Er wird angegraut dargestellt.
<form>
  <input type="checkbox" name="size[]" value="S"> klein <br>
  <input type="checkbox" name="size[]" value="L"> groß <br>
  <input type="checkbox" name="size[]" value="XL"> extra groß <br>
  <input type="checkbox" name="kurzarm"> kurze Ärmel <br>
</form>

Auswahllisten

so sieht's aus

<select><option></option></select>

Mit Auswahllisten hat der User die Möglichkeit eine oder mehrere Optionen aus einer vordefinierten Liste auszuwählen. Die ausgwählten Werte werden nach Absenden des Formulars übertragen.

select

Durch das select- Element wird eine Liste definiert.

<select></select>

Eine Liste kann auch von einem label- Element umschlossen werden.

<label>Weine<br><select>.....</select></select>

<select name="weine[]" multiple size="4">....</select>

Attribute für das select Element
Attribut Bedeutung
name Das select Element bekommt das Attribut name mit einem selbstvergebenen Namen, der wie schon zuvor als Variablenname oder Arrayname verschickt wird. Hat man mehrere mögliche Wert sollte der Wert von name mit eckigen Klammern abschließen name= wein[]
multiple Durch das standalone Attribut multiple wird eine mehrfache Auswahl ermöglicht. Der User kann mehrere Elemente durch Drücken der Strg Taste auswählen.
size

Hier wird eine Ganzzahl erwartet, die bestimmt wieviele Elemente standarmäßig sichtbar sind. Die anderen Element klappen auf, wenn man die Auswahlliste anklickt.

option

Ein Eintrag innerhalb einer Liste wird durch ein option- Element definiert.

<option></option>

Das option Element benötigt ein value Attribut mit einer Wertzuweisung, welche bei Auswahl übertragen wird.

Eine Vorselektierung kann man durch das standalone Attribut selected erreichen. <option selected value="3">

<option value="burgund">Burgunder</option>
<option value="ries">Riesling</option>
<option value="rohne">Rohne</option> 

optgroup

Wenn man innerhalb einer Auswahlliste mehrere Gruppen von Einträgen definieren will, so schießt man die option Elemente in das Element optgroup ein. Die Überschrift der Gruppe wird dem label Attribut von optgroup zugewiesen. Nicht zu verwechseln mit dem label Element, siehe oben.

<optgroup label="Deutsche Weine">
<option value="burgund">Burgunder</option>
<option value="ries">Riesling</option>
<option value="rohne">Rohne</option>
</optgroup> 

Comboboxen

so sieht's aus

Comboboxen oder Kombinationsfelder sind Hybrid-Elemente zwischen Auswahllisten und Eingabefeldern. Diese Möglichkeit besteht seit langem, aber erst seit HTML5 gehört sie zum Standard. Durch Doppelklick in so ein Feld erscheinen die vorgegebenen Werte.

<form >
  <input type="text" name="bundesliga" list="liga">
  <datalist id="liga">
      <option value="bvb">
      <option value="hsv">
      <option value="Schalke 04">
  </datalist>
</form>

Folgendermaßen wird eine Combobox erzeugt. Man erzeugt ein einzeiliges Textfeld und weist diesem das Attribut list zu. Dem list Element wird der gleiche Wert zugewiesen, dem das folgende datatlist Element als id bekommt. So wird der Bezug zur datalist hergestellt. Die Werte werden den value Attributen der option Elemente zugewiesen, die hier als Standalone Elemente innerhalb der datalist eingefügt werden.

Datei-Upload Feld

so sieht's aus

Mit <input type="file"> wird dem User die Möglichkeit gegeben eine Datei aus seinem Dateisystem auszuwählen. Die Datei kann dann beispielsweise mit eine Script gespeichert werden.

Um einen Dateiupload zu ermöglichen folgende Wertzuweisungen bei den Attributen method und enctype erforderlich.

<form method="post" enctype="multipart/form-data" action="upload.php">

<input type="file" name="bild" accept="image/*"> <input

Attribute für input type="file" Dateiupload
Attribut Bedeutung
name Auch Datei-Upload- Felder benötigen einen Bezeichnernamen, der bei einer Mehrfachauswahl mit eckigen Klammern schließen sollte name="bilder[]"
multiple Durch das standalone Attribut multiple kann man mehrere Dateien auswählen.
accept

Wenn man nur bestimmte Dateitypen zulassen will, kann man dem Attribut accept einen Mime-Type zuweisen. Hier ist das Wildcardzeichen bei Subtypen möglich accept="image/*" erlaubt alle Bilder.

Versteckte Felder

input type="hidden"

In Formularen kann es vorkommen, das bestimmte Daten verschickt werden sollen, die von einem Script generiert werden und für den User nicht sichtbar sind. Das kann beispielsweise die id einer Datenbankzelle sein, um die Daten eindeutig zuweisen zu können.

Man verwendet hier das Attribut type="hidden". Wie üblich wird name und value Wert in der Kombination name=value versendet.

<input type="hidden" name="user" value="herbert">

Buttons

so sieht's aus
Buttons oder Schaltflächen werden zum Abschicken oder Zurücksetzen des Formulars benötigt. Desweiteren gibt es noch Scripting Buttons die eine beliebige Javascript Aktion auslösen können.

Die Buttons werden über das Attribut type eines input- Feldes definiert. Die Beschriftung auf dem Button wird dem value Attribut zugewiesen

<input type="submit" value="Senden">

<input type="reset" value="Abbrechen">

<input type="button" value="Senden">

Grafische Submit Buttons

so sieht's aus

Es gibt noch eine weitere Möglichkeit Submit- Buttons als Grafik- Buttons zu definieren und zwar durch die Wertzuweisung type="image". Der Button funktioniert genauso wie der submit-Button und verschickt das Formular. Auch ein alt Attribut ist möglich, welches wie beim image Element einen Fallback Text enthalten sollte, sofern die Grafik nicht erkannt wird.

<input type="image" src="send.gif" alt="Versenden">

button Element

so sieht's aus

Anstatt das input Element für einen Button zu verwenden kann man auch das button-Element verwenden. Es ist jedoch kein Standalone Element. Im Gültigkeitsbereich zwischen den Button-Tags kann man Text und auch Bilder einfügen. Das value Attribut bestimmt hier den Absendewert. Wie beim input Element definiert man mit dem Attribut type die Art des Buttons.
type="submit", type="reset", type="button"

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

Mehrere Submit Buttons mit HTML5 Attributen

Man kann Formularen mehrere Submit Buttons zuweisen. Das Script beispielsweise ein Php-Script kann dann auswerten, welcher Button angeklickt wurde. Denkbar wäre so eine Anwendung bei einem Newsletter.
Dort gibt man seinen Namen ein und wählt dann entweder den Button aus, um sich für den Newsletter anzumelden oder den Newsletter abzubestellen. Das Script wertet den Button über den Wert des value Attributs aus. Eine weitere Möglichkeit besteht darin, jedem Button ein anderes Script zuzuweisen.

<input type="submit" value="Abmelden" formaction="news_abmelden.php" formmethod="post">

<input type="submit" value="Anmelden" formaction="news_anmelden.php" formmethod="post">

In diesem Beispiel enthält das form Element keine Attribute action und method. Auch die übrigen Attribute, welche man form Elementen zuweist lassen sich durch entsprechende Attribute in submit Buttons ersetzten

Attribute aus form-Elementen in Buttons ersetzen
input Button form
formaction action
formmethod method
formenctype enctype
formtarget target
formnovalidate novalidate
 

Felder außerhalb von Formularen HTML5

Mit HTML5 ist es möglich auch Felder außerhalb des umschließenden Form- Tags zu notieren, die sich auf das Formular beziehen. Dazu muss innerhalb des einleitenden form-Tags das Attribut id mit einem dokumentweit eindeutigen Namen vergeben werden. Das Eingabefeld welches dem Formular zugewiesen werden soll, bekommt das Attribut form mit dem Wert der id.

<form id="emailform" .....>
	weitere Felder ...
</form>

Ein Feld irgendwo auf der Seite außerhalb des Formulars
<input form="emailform" type="text" name="vorname">

Die hier aufgeführten Elemente sind nicht direkt Formular Elemente aber es Elemente, die auf Usereingaben reagieren. Das menu Element gibt es schon seit den Anfängen von HTML. Man unterscheidet 2 Arten.

Toolbar Menüs sind dauerhaft sichtbar wie man es in Werkzeugleisten und Anwendungsfenstern kennt.

Popup Menüs sind, wie der Name schon sagt, Aufklapp Menüs, die den Inhalt überlappen. Es können einzelne Kontextmenüs sein oder auch Untermenüs eines Toolbar Menüs.

Der Inhalt dieser Menüs kann aus unterschiedlichem Inhalt bestehen.

Toolbar Menü

so sieht's aus

Das Toolbar Menü beinhaltet Listeneinträge, wie man sie von geordneten und ungeordneten Listen her kennt. Im Unterschied dazu sollten die li Elemente in einem menu immer aus interaktiven, ausführbaren Elementen bestehen. Das ist hier durch die Links gegeben.

<menu>
  <li><a href="home.html">Home</a></li>
  <li><a href="produkt.html">Produkte</a></li>
  <li><a href="team.html">Team</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</menu>  
  

Popup Menü

Siehe auch How to make a Select Menü

so sieht's aus

  <form id="form1" name="form1" method="post">
    <menu type="popup">
         <select name="products">
            <option value="p_add">Neues Produkt</option>
            <option value="p_list"> Produkt suchen</option>
   		</select>
      </menu>
    </form>

Aufklappbare Details

Um komplexe Inhalte etwas übersichtlicher zu gestalten, kann es hilfreich sein, dass bestimmte Bereiche nur auf Useranweisung eingeblendet werden. Das war bisher nur mittels Scripting möglich HTML5 bietet hier eine Möglichkeit mittels details und summary Leider funktioniert das bis jetzt nur in Google Chrome.

so sieht's aus (Chrome benutzen)

<details>

<summary>Aufklapp Hinweis</summary>

<ul>

<li>Listenelemente</li>

<li>Listenelemente</li>

</ul>

</details>

Der Inhalt zwischen den summary Tags wird immer angezeigt. Der restliche Inhalt wird nur angezeigt wenn er aufgeklappt ist.

Dynamisches Formular mit Javascript

Hier zeige ich euch ein Beispiel für ein dynamisches Formular. Das bedeutet, dass bestimmte Fomularelemente nur angezeigt werden, wenn in einem anderen Auswahlfeld eine Vorauswahl getroffen wurde.

so sieht`s aus