HTML5 Formulare: 4.1 Mehr Interaktion!
Mehr Interaktion! ... erreichen Sie, u.a. durch den sinnvollen Einsatz von Formularen. Formulare dienen der Interaktion zwischen dem Nutzer einer Webseite und dem Server. So können zum Beispiel Informationen, wie Adressangaben oder Suchanfragen entgegengeneommen und anschließend mit einem serverseitigen Skript (z.B. PHP) verarbeitet werden.Die empfangenden Daten können direkt ausgewertet, in Datenbanksystemen (z.B. MySQL) hinterlegt oder an eine E-Mail Adresse versendet werden. Sie haben die Wahl! Allerdings bedarf es bei der Auswertung und Verarbeitung der Daten an Kenntnissen einer Script-Sprache. Dies ist nicht Bestandteil dieser Lektionen, wir konzentrieren uns an dieser Stelle auf die HTML5 Elemente!
4.1.1 Formulare
Formulare bieten Ihnen zahlreiche Möglichkeiten zur Kommunikation mit dem User! Damit Formulare die UX nicht negativ beeinflussen, sollten die folgenden Regeln beachtet werden!
- Übersichtlichkeit:
-
Strukturieren Sie Ihre Formulare übersichtlich. Der Nutzer sollte das Formular als solches, so wie den logischen Aufbau erkennen und intuitiv bedienen können. Überschriften und andere strukturierende Elemente helfen dabei!
- Barrierefreiheit:
-
Beschriften Sie alle Eingabefelder! Achten Sie auf die Lesbarkeit des Quellcodes durch Screenreader! Gestalten Sie Ihre Formularfelder 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 Aussicht. Teilen Sie große Formulare nötigenfalls über mehrere Seiten auf oder benutzen Sie Fortschrittsbalken.
- 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!
- Datenschutz und Sicherheit:
-
Notieren Sie schriftlich Ihre Datenschutzrichtlinien und Ihren Sicherheitsstandard und stellen Sie diese Informationen in Sichtweite des Formulars!
4.1.2 Syntax
Formulare lassen sich mit dem <form>
Element realisieren. Alles was sich zwischen dem einleitenden
<form>
Tag und dem schließenden </form>
Tag befindet, gehört dem Formular an. Dabei kann
es sich um Formularelemente wie Eingabefelder, Auswahlboxen oder Button handeln. Auch Beschriftungstexte
und strukturierende Elemente befinden sich in diesem Bereich. Das Element muss ein Start- und ein Endtag besitzen!
Referenz
Da diesem Element ein ganzes Kapitel gewidmet ist, schauen wir es uns von vornherein etwas genauer an! Wir beginnen mit der Referenz. Diese bietet Ihnen eine gute Übersicht über die Einsatzmöglichkeiten 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 Ausnahme bildet ein weiteres<form>
Element! - Erlaubte Elternelemente
-
Das
<form>
Element darf innerhalb von Elementen der Kategorie Fließender Inhalt notiert werden. Da kein weiteres<form>
Element als Inhalt erlaubt ist, kann dies auch nicht als direkter Vorfahre existieren!
Neben den beschriebenen Hauptkategorien existieren zusätzliche Kategorien! Für Formulare gibt es noch die mit Formularen assoziierten Inhalte, beschreibbare Formular-Elemente, gelistete Formular-Elemente, übertragbare Formular-Elemente und zurücksetzbare 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 Elternelements an
und besitzt einen automatischen Zeilenumbruch.
Attribute im einleitenden <form> Tag
Attribut | Beschreibung |
---|---|
action: | Zur Angabe der Datei / URL, die beim Absenden des Formulars aufgerufen werden soll |
method: | Zur Angabe der HTTP-Request-Methode |
enctype: | Zur Angabe über die Kodierung, die bei der Übertragung der Daten an den Server genutzt werden soll |
name: | Name für das Formular |
accept-charset: | Bestimmt die Zeichenkodierung für die Übertragung der Formulardaten |
target: | Zur Angabe des Zielfensters (für die im action Attribut angegebene Datei) |
autocomplete: | Autovervollständigung der Formularfelder ein- / ausschalten |
novalidate: | Überprüfung (Validation) von Eingaben in Formularfeldern unterdrücken |
- action
-
Dem
action
Attribut kann als Wert eine Datei oder eine URL (unter bestimmten Voraussetzungen auch eine E-Mail Adresse) zugewiesen werden, die beim Absenden des Formulars aufgerufen werden soll. In der Regel handelt es sich dabei um eine Datei mit einem serverseitigen Skript. So können die übertragenden Informationen aus dem Formular auf dem Server verarbeitet werden. Bei der Angabe der Datei / URL gelten die gewohnten Regeln der Referenzierung. - method
-
Mit dem
method
Attribut kann die HTTP-Request-Methode festgelegt werden. Es wird unterschieden zwischen:Mögliche Werte Beschreibung get
Der Standardwert - Sendet die Daten über die URL-Adresszeile. Wird meist zum Holen von Daten von einem Server verwendet. Persönliche Daten sollten niemals mit dieser Methode versendet werden! post
Sendet die Daten nicht sichtbar an den Server. Diese Methode sollte stets zum Übertragen von Formularinhalten verwendet werden! - enctype
-
Mit dem
enctype
Attribut kann die Art der Kodierung der Daten für die Übertragung an den Server definiert werden. Da es sich um ein neues Attribut handelt, ist die Anwendung auf HTML5 beschränkt! Dieses Attribut kann nur beimethod="post"
genutzt werden!Mögliche Werte Beschreibung application/x-www-form-urlencoded
Der Standardwert - Alle Zeichen werden vor dem Senden kodiert! multipart/form-data
Wird z.B. beim File-Upload verwendet! Es werden keine Zeichen kodiert! text/plain
Reiner Text - Leerzeichen werden zu + kodiert. Sonderzeichen werden nicht kodiert! - name
-
Das
name
Attribut bestimmt den Namen des Formulars. Anwendung findet es zum Beispiel beim Einsatz von JavaScripten. - accept-charset
-
Mit dem
accept-charset
Attribut kann die Zeichenkodierung für die Übertragung festgelegt werden. Standardwert ist die Zeichenkodierung der aktuellen Seite. - target
-
Mit dem
target
Attribut kann das Ausgabefenster für die imaction
Attribut angeforderte Datei (Adresse) bestimmt werden.Mögliche Werte Beschreibung _blank
Neuer Tab oder Fenster _self
Der Standardwert - Gleicher Tab oder Seite _parent
Elternfenster _top
Ganzes Fenster - autocomplete
-
Mit dem
autocomplete
Attribut kann das automatische Vervollständigen und das damit verbundene Speichern von bereits eingegebenen Informationen in ein Formularfeld ein- bzw. ausgeschaltet werden. - novalidate
-
Bei dem
novalidate
Attribut handelt es sich um ein Standalone Attribut, welches die automatische Validierung der Eingabefelder von Formularen unterdrückt.Oder XHTML - Konform:
Elemente im <form> ... </form> Bereich
Für das <form>
Element wurden die folgenden Elemente definiert. Diese werden auch als Formular assoziierte Inhalte bezeichnet und
an dieser Stelle kurz vorgestellt. Weitere Informationen erhalten Sie unter: Übersicht der Elemente
Mögliche Werte | Beschreibung |
---|---|
input: | Erzeugt ein einzeiliges Eingabefeld |
label: | Name für Formularfelder |
fieldset: | Gruppierung von Formularfeldern |
legend: | Name für eine Gruppe von Formularfeldern |
textarea: | Erzeugt mehrzeilige Eingabefelder |
option: | Stellt einzelne Optionen für Auswahllisten und Comboboxen zur Verfügung |
select: | Erzeugt eine Auswahlliste |
optgroup: | Gruppierendes Element für den Inhalt von Auswahllisten |
datalist: | Erzeugt eine Combobox |
output: | Zur Verarbeitung und Ausgabe von clientseitigen Eingaben |
button: | Stellt einen Button zur Verfügung |
- <input>
-
Mit dem
<input>
Element können einzeilige Eingabefelder erzeugt werden. Einzeilige Eingabefelder dienen zum Abfragen von Informationen. Es existiert kein schließendes</input>
Element! Über die Angabe imtype
Attribut lassen sich mit diesem Element auch andere Formularfelder und Button realiesieren! Für einzeilige Eingabefelder wird das Attributtext
genutzt!Siehe dazu: 4.2 Einzeilige Formularfelder!
- <label>
-
Mit dem
<label>
Element kann eine Beschriftung für ein Formularfeld angeben werden. Zwei Varianten stehen Ihnen zur Verfügung.
I. Implizite Form:
Das
<input>
Element wird zusammen mit der Beschriftung im Inhaltsbereich des<label>
Elements notiert.
II. Explizite Form:
Beide Elemente werden getrennt voneinander notiert. Dazu benötigt das
<label>
Element einfor
Attribut. Über einid
Attribut im Formularelement wird eine Verknüpfung hergestellt.
Implizite vs. Explizite Form
Laut Literatur sollte die explizite Form genutzt werden. Diese weist eine bessere Zuordnung auf und bietet dem Nutzer eine größere Fläche zum anklicken, da der Titel zur Schaltfläche gehört.
- <fieldset>
-
Mit dem
<fieldset>
Element werden Gruppen gebildet. Alles was zwischen diesen Markierungen steht, gehört der Gruppe an. Ein Rahmen wird um die entsprechenden Elemente gezeichnet. Das<fieldset>
Element kann geschachtelt werden! - <legend>
-
Für eine zusammengehörige Gruppe (z.B. durch das
<fieldset>
Element markiert) kann mit<legend> ... </legend>
eine Überschrift angegeben werden. Das Element kann weitere HTML-Elemente enthalten. - <textarea>
-
Durch den Einsatz des
<textarea>
Elements kann ein mehrzeiliges Eingabefeld erzeugt werden.Siehe dazu: 4.3 Mehrzeilige Eingabefelder!
- <option>
-
Mit dem
<option>
Element können einzelne Optionen für Auswahlboxen und Comboboxen erstellt werden. Das Element dient dabei als Kindelement für das<select>
Element, das<optgroup>
Element oder das<datalist>
Element!Siehe dazu: 4.6 Auswahlboxen sowie 4.8 Comboboxen!
- <select>
-
Mit dem
<select>
Element kann eine Auswahlbox erzeugt werden. Die einzelnen Einträge werden mit dem<option>
Element realisiert.Siehe dazu: 4.6 Auswahlboxen!
- <optgroup>
-
Mit dem
<optgroup>
Element können zusammengehörende Optionen einer Auswahlbox gruppiert werden.Siehe dazu: 4.6 Auswahlboxen!
- <datalist>
-
Das
<datalist>
Element dient zur Ausgabe von Comboboxen! Das Element wird mit Hilfe einerid
, einem<input>
Element mitlist
Attribut zugeordnet. Die einzelnen Auswahlmöglichkeiten werden durch das<option>
Element realisiert.Das schließende
</option>
Tag ist optional. Da die Tags innerhalb desdatalist
Elements keinen Inhalt besitzen, sind die schließenden</option>
Tags weg gelassen worden. - <output>
-
Das
<output>
Element dient ausschließlich dazu, Werte darzustellen, deren Ausgabe bisher mit Hilfe von JavaScript realisiert wurde. Dabei beschränkt sich die Anwendung des Elements auf die Ausgabe von Berechnungen! -
Das
<button>
Element stellt einen Button zur Ververfügung. Der Button kann, je nachtype
Attribut, verschiedene Aufgaben übernehmen.Werte für das type
AttributBeschreibung button
Auslösen clientseitiger Aktionen submit
Standardwert - Absenden eines Formulars reset
Zurücksetzen eines Formulars Mit dem
<disabled>
Attribut können Button oder auch Formularfelder deaktiviert werden.