Tutorials zur Webentwicklung

Umfangreich · Verständlich · Strukturiert

HTML5 Formulare: 4.1 Mehr Interaktion!

Mehr Interaktion! ... erreichen Sie, u.a. durch den sinn­vollen Ein­satz von Formularen. Formulare dienen der Interaktion zwischen dem Nutzer einer Webseite und dem Server. So können zum Beispiel Informationen, wie Adress­angaben oder Such­anfragen ent­gegen­geneommen und anschließend mit einem server­seitigen Skript (z.B. PHP) ver­arbeitet werden.

Die empfangenden Daten können direkt aus­gewertet, in Daten­bank­systemen (z.B. MySQL) hinter­legt oder an eine E-Mail Adresse ver­sendet werden. Sie haben die Wahl! Allerdings bedarf es bei der Aus­wertung und Ver­arbeitung der Daten an Kenntnissen einer Script-Sprache. Dies ist nicht Bestand­teil dieser Lektionen, wir konzentrieren uns an dieser Stelle auf die HTML5 Elemente!

4.1.1 Formulare

Formulare bieten Ihnen zahl­reiche Möglich­keiten zur Kommunikation mit dem User! Damit Formulare die UX nicht negativ beeinflussen, sollten die folgenden Regeln beachtet werden!

Über­sichtlich­keit:

Strukturieren Sie Ihre Formulare über­sichtlich. Der Nutzer sollte das Formular als solches, so wie den logischen Auf­bau erkennen und intuitiv bedienen können. Über­schriften und andere strukturierende Elemente helfen dabei!

Barriere­freiheit:

Beschriften Sie alle Ein­gabe­felder! Achten Sie auf die Lesbar­keit des Quell­codes durch Screen­reader! Gestalten Sie Ihre Formular­felder groß genug, um unter allen Umständen gut bedient werden zu können!

Bei längeren Formularen:

Geben Sie dem Nutzer Hinweise über die Länge der Formulare. Stellen Sie ein erfolgreiches Ende der Bearbeitung in Aus­sicht. Teilen Sie große Formulare nötigen­falls über mehrere Seiten auf oder benutzen Sie Fort­schritts­balken.

Was passiert mit den Daten:

Nennen Sie dem Nutzer Gründe über die Erfassung der angeforderten Informationen. Erklären Sie warum Sie die Informationen benötigen!

Daten­schutz und Sicher­heit:

Notieren Sie schriftlich Ihre Daten­schutz­richt­linien und Ihren Sicher­heits­standard und stellen Sie diese Informationen in Sicht­weite des Formulars!

4.1.2 Syntax

Formulare lassen sich mit dem <form> Element realisieren. Alles was sich zwischen dem ein­leitenden <form> Tag und dem schließenden </form> Tag be­findet, gehört dem Formular an. Dabei kann es sich um Formular­elemente wie Ein­gabe­felder, Aus­wahl­boxen oder Button handeln. Auch Be­schriftungs­texte und strukturierende Elemente be­finden sich in diesem Bereich. Das Element muss ein Start- und ein End­tag besitzen!

 <form attribut="wert">
    |
   Inhalt
    |
 </form>
Syntax: <form> Element

Referenz

Da diesem Element ein ganzes Kapitel gewidmet ist, schauen wir es uns von vorn­herein etwas genauer an! Wir beginnen mit der Referenz. Diese bietet Ihnen eine gute Über­sicht über die Einsatz­möglich­keiten des Elements!

Kategorie

Das Element wird unter der Kategorie Fließender Inhalt (und zusätzlich unter mit Formularen assoziierte Inhalte) geführt.

Erlaubter Inhalt

Zwischen den beiden <form> ... </form> Tags dürfen Elemente aus der Kategorie Fließender Inhalt genutzt werden. Einzige Aus­nahme bildet ein weiteres <form> Element!

Erlaubte Eltern­elemente

Das <form> Element darf inner­halb von Elementen der Kategorie Fließender Inhalt notiert werden. Da kein weiteres <form> Element als Inhalt erlaubt ist, kann dies auch nicht als direkter Vor­fahre existieren!

Neben den beschriebenen Haupt­kategorien existieren zusätzliche Kategorien! Für Formulare gibt es noch die mit Formularen assoziierten Inhalte, beschreib­bare Formular-Elemente, gelistete Formular-Elemente, übertrag­bare Formular-Elemente und zurücksetz­bare Formular-Elemente

Siehe dazu: Übersicht der Elemente - <form>

Darstellung

Bei dem <form> Element handelt es sich um ein Block-Element. Es nimmt die gesamte Breite des Eltern­elements an und besitzt einen automatischen Zeilen­umbruch.

Attribute im ein­leitenden <form> Tag

Attribut Beschreibung
action: Zur Angabe der Datei / URL, die beim Absenden des Formulars auf­gerufen werden soll
method: Zur Angabe der HTTP-Request-Methode
enctype: Zur Angabe über die Kodierung, die bei der Über­tragung der Daten an den Server genutzt werden soll
name: Name für das Formular
accept-charset: Bestimmt die Zeichen­kodierung für die Über­tragung der Formular­daten
target: Zur Angabe des Ziel­fensters (für die im action Attribut angegebene Datei)
autocomplete: Auto­ver­vollständigung der Formular­felder ein- / aus­schalten
novalidate: Über­prüfung (Validation) von Ein­gaben in Formular­feldern unter­drücken
action

Dem action Attribut kann als Wert eine Datei oder eine URL (unter bestimmten Vor­aus­setzungen auch eine E-Mail Adresse) zu­gewiesen werden, die beim Absenden des Formulars auf­gerufen werden soll. In der Regel handelt es sich dabei um eine Datei mit einem server­seitigen Skript. So können die über­tragenden Informationen aus dem Formular auf dem Server ver­arbeitet werden. Bei der Angabe der Datei / URL gelten die gewohnten Regeln der Referenzierung.

 <form action="wert">
    |
   Inhalt
    |
 </form>
Syntax: action Attribut
method

Mit dem method Attribut kann die HTTP-Request-Methode fest­gelegt werden. Es wird unter­schieden zwischen:

Mögliche Werte Beschreibung
get Der Standardwert - Sendet die Daten über die URL-Adress­zeile. Wird meist zum Holen von Daten von einem Server ver­wendet. Persönliche Daten sollten niemals mit dieser Methode ver­sendet werden!
post Sendet die Daten nicht sicht­bar an den Server. Diese Methode sollte stets zum Über­tragen von Formular­inhalten ver­wendet werden!
 <form method="wert">
    |
   Inhalt
    |
 </form>
Syntax: method Attribut
enctype

Mit dem enctype Attribut kann die Art der Kodierung der Daten für die Über­tragung an den Server definiert werden. Da es sich um ein neues Attribut handelt, ist die Anwendung auf HTML5 beschränkt! Dieses Attribut kann nur bei method="post" genutzt werden!

Mögliche Werte Beschreibung
application/x-www-form-urlencoded Der Standard­wert - Alle Zeichen werden vor dem Senden kodiert!
multipart/form-data Wird z.B. beim File-Upload ver­wendet! Es werden keine Zeichen kodiert!
text/plain Reiner Text - Leer­zeichen werden zu + kodiert. Sonder­zeichen werden nicht kodiert!
 <form method="post" enctype="wert">
    |
   Inhalt
    |
 </form>
Syntax: enctype Attribut
name

Das name Attribut bestimmt den Namen des Formulars. Anwendung findet es zum Beispiel beim Ein­satz von Java­Scripten.

 <form name="wert">
    |
   Inhalt
    |
 </form>
Syntax: name Attribut
accept-charset

Mit dem accept-charset Attribut kann die Zeichen­kodierung für die Über­tragung fest­gelegt werden. Standard­wert ist die Zeichen­kodierung der aktuellen Seite.

 <form accept-charset="utf-8">
    |
   Inhalt
    |
 </form>
Syntax: accept-charset Attribut
target

Mit dem target Attribut kann das Ausgabe­fenster für die im action Attribut an­ge­forderte Datei (Adresse) bestimmt werden.

Mögliche Werte Beschreibung
_blank Neuer Tab oder Fenster
_self Der Standardwert - Gleicher Tab oder Seite
_parent Eltern­fenster
_top Ganzes Fenster
 <form target="wert">
    |
   Inhalt
    |
 </form>
Syntax: target Attribut
autocomplete

Mit dem autocomplete Attribut kann das automatische Ver­vollständigen und das damit ver­bundene Speichern von bereits ein­gegebenen Informationen in ein Formular­feld ein- bzw. aus­geschaltet werden.

 <form autocomplete="on/off">
    |
   Inhalt
    |
 </form>
Syntax: autocomplete Attribut
novalidate

Bei dem novalidate Attribut handelt es sich um ein Stand­alone Attribut, welches die auto­matische Validierung der Eingabe­felder von Formularen unter­drückt.

 <form novalidate>
    |
   Inhalt
    |
 </form>
Syntax: novalidate Attribut

Oder XHTML - Konform:

 <form novalidate="novalidate">
    |
   Inhalt
    |
 </form>
Syntax: novalidate Attribut

Elemente im <form> ... </form> Bereich

Für das <form> Element wurden die folgenden Elemente definiert. Diese werden auch als Formular assoziierte Inhalte be­zeichnet und an dieser Stelle kurz vor­gestellt. Weitere Informationen erhalten Sie unter: Übersicht der Elemente

Mögliche Werte Beschreibung
input: Erzeugt ein ein­zeiliges Eingabe­feld
label: Name für Formular­felder
fieldset: Gruppierung von Formular­feldern
legend: Name für eine Gruppe von Formular­feldern
textarea: Erzeugt mehr­zeilige Eingabe­felder
option: Stellt einzelne Optionen für Auswahl­listen und Combo­boxen zur Ver­fügung
select: Erzeugt eine Auswahl­liste
optgroup: Gruppierendes Element für den Inhalt von Auswahl­listen
datalist: Erzeugt eine Combo­box
output: Zur Ver­arbeitung und Aus­gabe von client­seitigen Ein­gaben
button: Stellt einen Button zur Ver­fügung
<input>

Mit dem <input> Element können ein­zeilige Eingabe­felder er­zeugt werden. Ein­zeilige Eingabe­felder dienen zum Abfragen von Informationen. Es existiert kein schließendes </input> Element! Über die Angabe im type Attribut lassen sich mit diesem Element auch andere Formular­felder und Button realiesieren! Für ein­zeilige Eingabe­felder wird das Attribut text genutzt!

 <form>

   <input type="text" />

 </form>
Syntax: <input> Element
Ansicht im Browser

Siehe dazu: 4.2 Einzeilige Formular­felder!

<label>

Mit dem <label> Element kann eine Beschriftung für ein Formular­feld an­geben werden. Zwei Varianten stehen Ihnen zur Ver­fügung.


I. Implizite Form:


Das <input> Element wird zusammen mit der Beschriftung im Inhalts­bereich des <label> Elements notiert.

 <form>

   <label>Vorname:
     <input type="text">
   </label>

 </form>
Syntax: <label> Element
Ansicht im Browser

II. Explizite Form:


Beide Elemente werden getrennt von­einander notiert. Dazu benötigt das <label> Element ein for Attribut. Über ein id Attribut im Formular­element wird eine Ver­knüpfung her­gestellt.

 <form>

   <label for="nachname">Nachname:</label>
     <input type="text" id="nachname">

 </form>
Syntax: <label> Element
Ansicht im Browser

Implizite vs. Explizite Form


Laut Literatur sollte die explizite Form genutzt werden. Diese weist eine bessere Zu­ordnung auf und bietet dem Nutzer eine größere Fläche zum anklicken, da der Titel zur Schalt­fläche gehört.

<fieldset>

Mit dem <fieldset> Element werden Gruppen ge­bildet. Alles was zwischen diesen Markierungen steht, gehört der Gruppe an. Ein Rahmen wird um die ent­sprechenden Elemente ge­zeichnet. Das <fieldset> Element kann ge­schachtelt werden!

 <form>

   <fieldset>

     <label for="vorname">Vorname:</label>
       <input type="text" id="vorname">

     <br />

     <label for="nachname">Nachname:</label>
       <input type="text" id="nachname">

   </fieldset>

 </form>
Syntax: <fieldset> Element

Ansicht im Browser
<legend>

Für eine zusammen­gehörige Gruppe (z.B. durch das <fieldset> Element markiert) kann mit <legend> ... </legend> eine Überschrift angegeben werden. Das Element kann weitere HTML-Elemente ent­halten.

 <form>

   <fieldset><legend>Meine Daten</legend>

     <label for="vorname">Vorname:
       <input type="text" id="vorname">
     </label>

     <br />

     <label for="nachname">Nachname:
       <input type="text" id="nachname">
     </label>

   </fieldset>

 </form>
Syntax: <legend> Element
Meine Daten
Ansicht im Browser: Beispiel - Meine Daten
<textarea>

Durch den Einsatz des <textarea> Elements kann ein mehr­zeiliges Eingabe­feld erzeugt werden.

 <form>

   <textarea>Inhalt ...</textarea>

 </form>
Syntax: <textarea> Element
Ansicht im Browser

Siehe dazu: 4.3 Mehrzeilige Eingabefelder!

<option>

Mit dem <option> Element können einzelne Optionen für Auswahl­boxen und Combo­boxen erstellt werden. Das Element dient dabei als Kind­element für das <select> Element, das <optgroup> Element oder das <datalist> Element!

 <form>

   <Elternelement>
       |
     <option>Inhalt<option>
       |
   </Elternelement>

 </form>
Syntax: <option> Element

Siehe dazu: 4.6 Auswahlboxen sowie 4.8 Comboboxen!

<select>

Mit dem <select> Element kann eine Auswahl­box erzeugt werden. Die einzelnen Einträge werden mit dem <option> Element realisiert.

 <form>

   Eingabe:
   <select>
     <option value="auswahl 1">Auswahl I</option>
     <option value="auswahl 2">Auswahl II</option>
   </select>

 </form>
Syntax: <select> Element
Eingabe:
Ansicht im Browser

Siehe dazu: 4.6 Auswahlboxen!

<optgroup>

Mit dem <optgroup> Element können zusammen­gehörende Optionen einer Auswahl­box gruppiert werden.

 <form>

   Eingabe:
   <select>
     <optgroup label="Auswahl I">
         <option value="auswahl1">Auswahl 1</option>
         <option value="auswahl2">Auswahl 2</option>
     </optgroup>

     <optgroup label="Auswahl II">
         <option value="auswahl3">Auswahl 3</option>
         <option value="auswahl4">Auswahl 4</option>
     </optgroup>
   </select>

 </form>
Syntax: <optgroup> Element
Eingabe:
Ansicht im Browser

Siehe dazu: 4.6 Auswahlboxen!

<datalist>

Das <datalist> Element dient zur Aus­gabe von Combo­boxen! Das Element wird mit Hilfe einer id, einem <input> Element mit list Attribut zu­geordnet. Die einzelnen Auswahl­möglich­keiten werden durch das <option> Element realisiert.

 <form>

   Eingabe: <input list="liste">

   <datalist id="liste">
     <option value="Auswahl 1">
     <option value="Auswahl 2">
     <option value="Auswahl 3">
     <option value="Auswahl 4">
     <option value="Auswahl 5">
   </datalist>

 </form>
Syntax: <datalist> Element
Eingabe:  
Ansicht im Browser

Das schließende </option> Tag ist optional. Da die Tags inner­halb des datalist Elements keinen Inhalt besitzen, sind die schließenden </option> Tags weg gelassen worden.

<output>

Das <output> Element dient aus­schließlich dazu, Werte dar­zustellen, deren Ausgabe bisher mit Hilfe von Java­Script realisiert wurde. Dabei beschränkt sich die Anwendung des Elements auf die Aus­gabe von Berechnungen!

 <form oninput="document.getElementById('output').innerHTML = (parseFloat(a.value) + parseFloat(b.value))">

   Eingabe:<br />
   <input id="a" type="number" step="any"> +
   <input id="b" type="number" step="any"> =

   <output id="output" for="a b"></output>

 </form>
Syntax: <output> Element
Eingabe:
+ =
Ansicht im Browser
<button>

Das <button> Element stellt einen Button zur Ver­verfügung. Der Button kann, je nach type Attribut, ver­schiedene Auf­gaben über­nehmen.

Werte für das type Attribut Beschreibung
button Aus­lösen client­seitiger Aktionen
submit Standard­wert - Absenden eines Formulars
reset Zurück­setzen eines Formulars
 <form action="zieladresse.html">

   Eingabe: <input type="text">

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

 </form>
Syntax: <button> Element
Eingabe:

Ansicht im Browser

Mit dem <disabled> Attribut können Button oder auch Formular­felder deaktiviert werden.