HTML5: Formulare

Bei interaktiven Projekten werden oft Formulare verwendet. Mit Hilfe von Formularen können die Benutzer beispielsweise einen Gästebucheintrag vornehmen, sich in einer Plauderecke unterhalten (englisch: chat), an Abstimmungen teilnehmen, den Autor kontaktieren oder in virtuellen Läden einkaufen, bei Wikibooks Bücher schreiben etc. Die Möglichkeiten sind fast unbegrenzt. Dabei dienen die Formulare nur zur Eingabe von Daten. Die Eingabe erfolgt mit speziellen Elementen, den sogenannten Steuerelementen. Die Verarbeitung muß dann mit speziellen Dienstprogrammen auf dem referenzierten Rechner erfolgen. Dazu ist der Formularinhalt an den Rechner mit dem Dienstprogramm zu übertragen.

HTML5 bietet eine weitreichende Verfeinerung der Kontrolle oder Einschränkung der Eingaben. Diese Optionen ersetzen nicht die Prüfung mit einem Dienstprogramm nach dem Absenden, wohl aber eine Prüfung mit einer Skriptsprache.

Auf die Funktion von Attributen, welche die Bearbeitung von Eingabefeldern einschränken, sollte nicht vertraut werden, da diese vom Nutzer im Quelltext manipuliert werden können. Hier ist zwingend eine Überprüfung der Eingaben auf dem Zielrechner mit dem Dienstprogramm notwendig. Andersherum hat der Autor Einschränkungen sehr vorsichtig zu notieren, um keineswegs versehentliche gültige Angaben auszuschließen und damit das Formular für einige Nutzer unbrauchbar zu machen, sofern diese nicht beginnen, die Daten außerhalb der vom Autor vorgesehenen Formulareingabe zu manipulieren.

Übertragungsarten

Für die Übertragung der Daten gibt es zwei Möglichkeiten: Die GET- und die POST-Methode.

Bei der GET-Methode werden die Daten als Teil der IRI/URI verschickt. Eine solche URI/IRI sieht typischerweise wie folgt aus:

https://example.org/auswertung/formularantwort.php?Vorame=Arti&Nachname=Fischl

Die IRI/URI besteht hierbei aus mehreren Abschnitten: Vorne steht die Adresse des aufzurufenden Skriptes und anschließend die zu übermittelnden Daten. Beide Teile sind durch ein Fragezeichen getrennt. Übermittelt werden Namen und Werte von Steuerelementen. Nach dem Fragezeichen folgt also der Name eines Steuerelementes, dann ein Gleichheitszeichen, dann der zugehörige Wert. Werden mehrere solcher Paare von Name und Wert übermittelt, so werden diese durch ein Et-Zeichen (&) getrennt.

Bei der POST-Methode werden die Daten als Datenstrom übertragen. Dabei bleiben sie für den Anwender unsichtbar.

Jede der beiden Methoden hat ihre Vor- und Nachteile und sie dienen unterschiedlichen Aufgaben. Für größere Datenmengen ist die GET-Methode ungeeignet. Allerdings hat sie gegenüber der POST-Methode den Vorteil, daß der Benutzer für die Seite, zu welcher das Formular verschickt wurde, ein Lesezeichen setzen kann und daß eine Referenzierung des Ergebnisses von anderen Seiten aus möglich ist. Die Methode GET kann verwendet werden, wenn das Formular keine Nebeneffekte hat, also insbesondere wenn nur Daten oder Information abgefragt werden, aber nicht mit dem Dienstprogamm auf dem Dienstrechner verändert werden, ohne daß der Absender dies mitbekommt (zum Beispiel für eine Suchfunktion).
Werden hingegen relevante Daten vom Dienstprogramm aufgrund der Formulardaten geändert oder werden große Datenmengen mit dem Formular übertragen, so ist die POST-Methode angebracht; zum Beispiel zur Anmeldung und Nutzeridentifizierung bei einem interaktiven Projekt oder zum Heraufladen von Dateien.

Die Datenübertragung erfolgt im HTTP-Protokoll unverschlüsselt. Zur Übertragung vertraulicher Daten wird das HTTPS-Protokoll verwendet.

Aufbau eines Formulars, Element form

Die Definition eines Formulars erfolgt innerhalb des Elementes form. Darin befinden sich neben Strukturelementen und normalem Text insbesondere Elemente zum Eingeben des Textes, Auswählen einer Option und so weiter und – natürlich ganz wichtig – eine Schaltfläche zum Bestätigen und Abschicken der Eingabe. Alle Steuerelemente innerhalb eines Elementes form gehören zu diesem bestimmten Formular. HTML5 bietet zudem die Möglichkeit, Steuerelemente einem Formular zuzuordnen, auch wenn sie nicht im betreffenden Element form stehen.

Wird der Formularinhalt übertragen, so werden dabei jene Informationen übermittelt, welche über die Steuerelemente vorgegeben, eingegeben oder verändert wurden.

Das Element form kann notiert werden, wo fließender Inhalt erwartet wird. Der Inhalt ist wiederum fließender Inhalt. Insbesondere kann der Inhalt mit dem Element fieldset spezifisch für ein Formular strukturiert werden. form darf als Nachfahren aber kein weiteres Element form haben.

Das form-Element hat folgende Attribute:

action: Der Wert gibt eine IRI/URI an, an welche die Formulardaten gesendet werden, wenn der Nutzer das Formular abschickt.
method: Mit diesem Attribut wird angegeben, ob die Daten über die GET- oder die POST-Methode übermittelt werden sollen. Der Wert ist entweder 'get' oder 'post'. Ist das Attribut nicht angegeben, wird 'get' angenommen.
enctype: Falls method gleich 'post' ist, gibt enctype den Inhaltstyp für die Übertragung der Formulardaten an. Voreinstellung ist "application/x-www-form-urlencoded". Der Wert "multipart/form-data" sollte verwendet werden, wenn komplette Dateien hochgeladen werden sollen. Bei "text/plain" wird einfach Klartext versendet.
accept-charset: Das Attribut gibt eine Liste mit vom Dienstprogramm akzeptierten Kodierungen für die Eingabedaten an. Zwei Werte der Liste sind jeweils durch ein Komma oder Leerzeichen zu trennen. Voreinstellung ist die Zeichenkette 'UNKNOWN' - in dem Falle soll das Darstellungsprogramm die Kodierung wählen, welche für das Dokument mit dem Formular verwendet wurde.
name: Name des Formulars.
target: Mit dem Attribut kann der Autor einen Vorschlag machen, wo die Antwort des Dienstprogrammes nach Abschicken des Formulares angezeigt werden sollte. Das Attribut ist ausführlich für das Element a im Kapitel über Verweise erläutert, siehe dort.
novalidate: Ist das Attribut gesetzt, werden bei den Steuerelementen angegebene Einschränkungen nicht vom Darstellungsprogramm geprüft. Der Wert ist leer oder 'novalidate'
autocomplete: Ist das Attribut gesetzt, wird bei den Steuerelementen eine automatische Vervollständigung probiert, es werden also Fortsetzungsmöglichkeiten angeboten. Der Wert ist 'on' für eingeschaltet (Voreinstellung, wenn das Attribut nicht gesetzt ist) oder 'off' für abgeschaltet.

Formularstruktur, fieldset und legend

Strukturierung und Gruppierung von zusammengehörigen Eingaben verbessert die Lese- und Nutzbarkeit von Formularen. Neben den allgemeinen Strukturelementen gibt es auch spezielle Elemente, die es in Formularen ermöglichen zu gruppieren oder einer Gruppe eine Legende oder Beschriftungen zuzuordnen.

Zur Gruppierung dient innerhalb von form das Blockelement fieldset. Dies kann wiederum fließenden Inhalt enthalten. Innerhalb von fieldset sollte allerdings im Sinne einer guten Strukturierung vermieden werden, auf gleicher Ebene Blockelemente und Phrasenelemente zu mischen.

Für den Titel einer Gruppe ist das Element legend gedacht, welches dann die Beschriftung enthält. legend darf nur Text und inzeilige Elemente enthalten. Dies ist kompatibel zu HTML4, XHTML1.x, HTML5.0, HTML5.1. Ferner können in HTML5.2 (und eventuell späteren Versionen) stattdessen auch Überschriften enthalten sein, also die Elemente h1, h2, h3, h4, h5, h6. Es kann optional als erstes Kindelement von fieldset verwendet werden.

Attribute von fieldset:

disabled: Sofern angegeben deaktiviert das Attribut im fieldset notierte Eingaben. Der Wert ist leer oder 'disabled'.
form: Gibt an, auf welches Formular sich der Bereich bezieht, sofern nicht angegeben bezieht sich der Bereich auf den Vorfahren vom Element-Typ form.
name: Name des Elementes entsprechend dem Namen einer Formulareingabe.

Beschriftung zu einem Eingabefeld zuordnen, Element label

Zumeist ist von der Struktur eines Formulars her nicht formal klar, welche Beschriftung zu welcher Eingabe gehört – auch wenn dies durch Anordnung der Beschriftungen vor oder nach der Eingabe so aussehen mag. Für die erleichterte Bedienung des Formulars und die darstellungsunabhängige eindeutige Zuordnung der Beschriftung zur Eingabe sollte die Beschriftung mit dem Element label eindeutig einer Eingabe zugeordnet werden.

Auf diese Weise ist es zum Beispiel auch möglich, mit einem Zeigergerät wie einer Maus einen zugehörigen Beschreibungstext anzuklicken, um das nebenstehende Formularelement auszuwählen.

Das zugehörige Element zur Eingabe erhält dann mittels des allgemein verwendbaren Attributes id einen Fragmentidentifizierer. Im label wird dann im Attribut for dieser Fragmentidentifizierer notiert. Das Attribut for ist spezifisch und optional für label. Ohne Angabe funktioniert die Zuordnung implizit, dazu wird dann das Eingabeelement im label notiert.

label ist ein Phrasenelement und kann inzeiligen Inhalt wie Text und inzeilige Elemente enthalten, jedoch kein anderes Element label. Es können mehrere Elemente label mit demselben Wert für for notiert werden, um alle einer Eingabe zuzuordnen.

Schaltfläche mit Inhalt, button

Mit dem Element können Aktionen bewirkt werden, insbesondere das Absenden des Formulars.

Mit dem Steuerelement button kann weitgehend selbst bestimmt werden, was in der Schaltfläche ist und wie dies mit CSS oder anderen Methoden dekoriert werden kann.

Das Element button hat dabei primär die Funktion eines Absende- oder Rücksetzknopfes, kann aber auch als allgemeine Schaltfläche ohne Funktion verwendet werden.

Inhalt von button können Phrasenelemente sein, allerdings keine interaktiven Elemente, insbesondere sollen keine Formularelemente einschließlich button selbst enthalten sein. Ferner darf auch kein Element a enthalten sein. Dies ergibt sich mehr oder weniger bereits aus der Funktion einer Schaltfläche, die nicht mit anderen Funktionalitäten in Konflikt geraten darf. Entsprechend ist davon abzuraten, interaktive Bilder in button einzubetten.

Alle Attribute sind bei button optional. Spezifisch für button sind die Attribute autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, value und type.

Attribut autofocus

Ist das Attribut gesetzt, bekommt der Knopf den Fokus, nachdem das Dokument geladen ist. Der Wert ist leer oder 'autofocus'.

Attribut disabled

Ist das Attribut gesetzt, wird das Element deaktiviert, ist also nicht klickbar. Der Wert wird ebenfalls nicht gesendet, falls das Formular anderweitig versendet wird. Der Wert ist leer oder 'disabled'.

Attribut form

Sofern das Element nicht Nachfahre des Elementes form ist, zu dem es gehört, ist mit dem Attribut form anzugeben, zu welchem Formular es gehört. Wert ist ein Fragmentidentifizierer (Wert des Attributes id) eines Elementes form im selben Dokument.

Attribut formaction

Mit dem Attribut kann der Wert von action des zugehörigen Elementes form überschrieben werden, der Wert ist also eine IRI/URI, zu welcher der Formularinhalt gesendet werden soll. Dazu muß der Knopf dem Absenden des Formularinhaltes dienen. So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt alternativ an verschiedene Adressen zur Verarbeitung zu versenden.

Attribut formenctype

Mit dem Attribut kann der Wert von enctype des zugehörigen Elementes form überschrieben werden, der Wert entspricht also dem von enctype: "application/x-www-form-urlencoded", "multipart/form-data", "text/plain". Dazu muß der Knopf dem Absenden des Formularinhaltes dienen. So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt verschieden formatiert zu senden.

Attribut formmethod

Mit dem Attribut kann der Wert von method des zugehörigen Elementes form überschrieben werden, der Wert entspricht also dem von method: 'get' oder 'post'. Dazu muß der Knopf dem Absenden des Formularinhaltes dienen. So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt mit verschiedenen Methoden zu senden.

Attribut formnovalidate

Mit dem Attribut kann entsprechend dem Attribut novalidate von form festgelegt werden, daß der Formularinhalt nicht vom Darstellungsprogramm geprüft werden soll. Der Wert ist leer oder 'formnovalidate'. Dazu muß der Knopf dem Absenden des Formularinhaltes dienen. Das kann hilfreich sein, um dem Publikum eine Möglichkeit zu bieten, den Formularinhalt schon einmal unvollständig zwischenzuspeichern, also zu senden und auf dem Dienstrechner aufzubewahren, um das Formular später komplett oder korrekt auszufüllen. Eine weitere Anwendung für das Publikum kann sein, den Formularinhalt trotzdem senden zu können, wenn lediglich die Prüfkriterien falsch sind, nicht der ausgefüllte Formularinhalt. Es kann sehr frustrierend sein, ein Formular nicht absenden zu können, nur weil die Prüfkriterien fehlerhaft sind. Viele Menschen sind technisch nicht in der Lage, solch eine Prüfung selbst zu umgehen (Formular-Dokument kopieren und geeignet bearbeiten).

So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt einmal geprüft und einmal ungeprüft zu senden.

Attribut formtarget

Mit dem Attribut kann der Wert von target des zugehörigen Elementes form überschrieben werden, der Wert entspricht also dem von target.

Mit dem Attribut kann der Autor einen Vorschlag machen, wo die Antwort des Dienstprogrammes nach Abschicken des Formulares angezeigt werden sollte. Das Attribut ist ausführlich für das Element a im Kapitel über Verweise erläutert, siehe dort.

So ist es also möglich, mehrere Schaltflächen anzubieten, um die Rückmeldung des Dienstprogrammes auf die Formularsendung in verschiedenen Bereichen auszugeben.

Attribut name

Mit diesem Attribut wird der Name der Eingabe festgelegt. Wird das Attribut nicht angegeben, kann bei der Formularauswertung nicht auf den Wert des Formularfeldes zugegriffen werden.

Attribut value

Mit diesem Attribut kann ein Wert gesetzt werden, welcher als Formularinhalt mit Bezug zum name gesendet wird.

Dies kann bei der Auswertung des Formularinhaltes sehr hilfreich sein, wenn dieser geprüft oder ungeprüft versendet wurde. Hat value jeweils für verschiedene Absendemöglichkeiten unterschiedliche Werte, kann so die Auswertung differenziert gesteuert werden.

Attribut type

Für dies Attribut sind die Werte 'submit', 'reset' und 'button' erlaubt. Ist type nicht angegeben, ist die Voreinstellung 'submit'.

submit: eine Schaltfläche zum Absenden des Formulars; zu beachten ist dabei, daß unabhängig von der Anordnung der Schaltfläche im Quelltext immer das komplette Formular versendet wird.
reset: eine Schaltfläche, mit der das Formular in den Ausgangszustand zurückversetzt (geleert) werden kann.
button: eine allgemeine Schaltfläche ohne spezifisches Verhalten, welche im Wesentlichen dazu dient, Ereignisse dynamisch abzufragen (zum Beispiel um Formulare alternativ mit JavaScript vorab zu analysieren, was allerdings inhaltlich nicht relevant ist, eher dekorativ zu verwenden ist; auch dekorative Interaktionen per CSS sind möglich.)

Beispiel eines Formulars mit button

<form id="f1" action="wiki-form.php" method="post">
  <fieldset>
    <legend>Absenden an aktuelle Adresse</legend>
    <p><button type="submit" name="Knopf" value="42">42</button></p>
    <p><button type="submit" name="Knopf" value="137">137</button></p>
    <p><button type="submit" name="n88" value="88" disabled="">88</button></p>
    <p><button type="button" name="nix" value="nüscht">Knopf ohne Funktion</button></p>
  </fieldset>

  <fieldset>
    <legend>Absenden an example.org</legend>
    <p><button formaction="https://example.org/antwort.php"
        type="submit" name="Knopf" value="42">42</button></p>
    <p><button formaction="https://example.org/antwort.php"
        type="submit" name="Knopf" value="137">137</button></p>
  </fieldset>

  <fieldset>
    <legend>Absenden per get an aktuellen Dienstrechner</legend>
    <p><button formaction="formular.php" formmethod="get"
        type="submit" name="Knopf" value="42">42</button></p>
    <p><button formaction="formular.php" formmethod="get"
        type="submit" name="Knopf" value="137">137</button></p>
  </fieldset>

  <fieldset>
    <legend>Absenden an example.org per get</legend>
    <p><button formaction="https://example.org/antwort.php"
        formmethod="get"
        type="submit" name="Knopf" value="42">42</button></p>
    <p><button formaction="https://example.org/antwort.php"
        formmethod="get"
        type="submit" name="Knopf" value="137">137</button></p>
  </fieldset>

  <fieldset>
    <legend>Absenden an example.org; Antwort in neuem Fenster</legend>
    <p><button formaction="https://example.org/antwort.php"
               formtarget="_blank" type="submit" name="Knopf" value="42">42</button></p>
    <p><button formaction="https://example.org/antwort.php"
               formtarget="_blank" type="submit" name="Knopf" value="137">137</button></p>
  </fieldset>
</form>
<section>
<h1>Von außerhalb des Formulars per get absenden</h1>
<p>
<button form="f1" formmethod="get"
        type="submit" name="Knopf" value="42">42</button>
<button form="f1" formmethod="get"
        type="submit" name="Knopf" value="137">137</button>
</p>
</section>

Mehrzeilige Textfelder, textarea

Es können auch Textfelder erzeugt werden, die sich über mehrere Zeilen erstrecken. Dazu wird das Phrasenelement textarea verwendet.

Das Element kann zu interpretierenden Text enthalten, keine anderen Elemente. Dieser Inhalt wird dann bei der Darstellung des Formulars verwendet und kann vom Nutzer modifiziert werden. Wird das Formular abgesendet, so wird der Inhalt des Elementes versendet (daher existiert für textarea auch kein Attribut value).

Für das Element spezifische Attribute sind:

name: Mit diesem Attribut wird der Name der Eingabe festgelegt. Wird das Attribut nicht angegeben, kann bei der Formularauswertung nicht auf den Wert des Formularfeldes zugegriffen werden.
rows: Das Attribut gibt die Anzahl der Textzeilen des Eingabebereiches an, die Angabe ist erforderlich. Entsprechend ist der Wert eine positive ganze Zahl. Wenn mehr Inhalt als Platz vorhanden ist, sollte das Darstellungsprogramm einen Mechanismus zur Verfügung stellen, der den Zugang zum gesamten Inhalt ermöglicht, etwa der bewährte Rollmechanismus (englisch: scroll).
cols: Das Attribut gibt die Breite des Eingabebereiches in mittleren Zeichenbreiten an, die Spalten. Die Angabe ist erforderlich. Entsprechend ist der Wert eine positive ganze Zahl. Wenn mehr Inhalt als Platz vorhanden ist, sollte das Darstellungsprogramm einen Mechanismus zur Verfügung stellen, der den Zugang zum gesamten Inhalt ermöglicht, etwa der bewährte Rollmechanismus. Generell findet ein automatischer Zeilenumbruch der Eingabe statt, sofern Leerzeichen in der Zeile vorhanden sind oder das Programm Silbentrennung beherrscht.
readonly: Durch Angabe des Attributes (immer leer oder mit dem Wert 'readonly'), wird angegeben, daß der Wert nicht vom Nutzer verändert werden darf. Der Wert wird mit dem Formular versendet und kann vom Nutzer auch fokussiert werden.
autocomplete: Ist das Attribut gesetzt, wird eine automatische Vervollständigung probiert, es werden also Fortsetzungsmöglichkeiten angeboten. Der Wert ist 'on' für eingeschaltet (Voreinstellung, wenn das Attribut nicht gesetzt ist) oder 'off' für abgeschaltet.
autofocus: Ist das Attribut gesetzt, bekommt der Eingabebereich den Fokus, nachdem das Dokument geladen ist. Der Wert ist leer oder 'autofocus'.
dirname: Name für die Information der Textrichtung, mit welcher der Eingabebereich ausgefüllt wurde. Das Darstellungsprogramm ergänzt den Wert automatisch, also 'ltr' für von links nach rechts, 'rtl' für von rechts nach links etc.
disabled: Durch Angabe des Attributes (immer mit dem Wert 'disabled'), wird angegeben, daß der Wert nicht vom Nutzer verändert werden darf. Der Wert wird nicht mit dem Formular versendet und kann vom Nutzer auch nicht fokussiert werden.
form: Sofern das Element nicht Nachfahre des Elementes form ist, zu dem es gehört, ist mit dem Attribut form anzugeben, zu welchem Formular es gehört. Wert ist ein Fragmentidentifizierer (Wert des Attributes id) eines Elementes form im selben Dokument.
maxlength: Beschränkung der Eingabe auf eine maximale Anzahl von Zeichen. Der Wert ist eine positive ganze Zahl.
minlength: Beschränkung der Eingabe auf eine minimale Anzahl von Zeichen. Der Wert ist eine positive ganze Zahl. Sofern maxlength ebenfalls gesetzt ist, sollte maxlength nicht kleiner als minlength sein, damit die Forderung erfüllbar ist.
placeholder: Der Wert ist ein Platzhalter-Text. Dieser wird also anfangs als Hinweis eingeblendet, verschwindet, sobald das Publikum selbst Text eingibt. Der Text ist also nur verfügbar, wenn das Element sonst noch leer ist und nicht den Fokus hat.
required: Ist das Attribut gesetzt, muß das Feld ausgefüllt werden, beim Absenden darf der Wert also nicht leer sein. Das Attribut selbst hat entweder einen leeren Wert oder 'required'.
wrap: Angabe, ob der Textbereich automatisch umgebrochen werden soll oder nicht. Mögliche Werte sind 'soft' oder 'hard'. Bei hard ist ebenfalls cols zu setzen. Beim Absenden werden Paare von Zeilenumbrüche in einfache verwandelt (also Unicode-Zeichen U+000D nach U+000A und U+000D U+000A nach U+000A). Im Falle 'hard' wird wiederum an jede Zeile ein U+000D U+000A angehängt. Bei der Formularauswertung kann diese Zeichenfolge dann eindeutig einem Zeilenende zugeordnet werden.

Beispiel zum Element textarea

Ein Formular für einen Gästebucheintrag:

<form action="gaestebuch.php" method="post">
  <fieldset>
    <legend>Einen Gästebucheintrag erstellen</legend>
    <p>
      <label for="Name">Dein Name:</label><br />
      <textarea name="name" id="Name" cols="40" rows="1"
       id="Name" autocomplete="" minlength="2"
       dirname="name.dir"
       placeholder="Erika Mustermann"></textarea>
    </p>
    <p>
      <label for="Texteingabe">Dein Gästebucheintrag (nicht mehr als 1234 Zeichen!):</label><br />
      <textarea name="text" cols="40" rows="10"
       id="Texteingabe" minlength="2" maxlength="1234"
       dirname="text.dir"
       placeholder="Alles super hier!"></textarea>
    </p>
  </fieldset>
  <fieldset>
    <legend>Senden?</legend>
    <p><button type="submit" value="1/137">Absenden</button></p>
    <p><button type="reset"">Zurücksetzen</button></p>
  </fieldset>
</form>

Die Auswahlliste, select, optgroup und option

Es gibt auch Formulare, in denen etwas aus einer Liste ausgewählt werden kann, Einträge (Optionen) können markiert werden. Um dies zu realisieren, werden die Elemente select, optgroup und option verwendet. Inhalt des Phrasenelementes select ist mindestens eines der beiden anderen Elemente, es können auch mehrere davon in beliebiger Mischung sein. Dabei dient optgroup der Gruppierung oder Strukturierung von option-Elementen innerhalb von select. So kommt option also nur innerhalb von optgroup oder select vor und optgroup nur innerhalb von select vor.

optgroup enthält entsprechend ein oder mehrere Elemente option. option kann wiederum nur interpretierten Text enthalten.

Attribute sind für select optional. Folgende für select spezifische Attribute sind verfügbar:

name: Mit diesem Attribut wird der Name der Eingabe festgelegt. Wird das Attribut nicht angegeben, kann bei der Formularauswertung nicht auf den Wert des Formularfeldes zugegriffen werden.
size: Wie Auswahllisten umgesetzt werden, ist nicht festgelegt. Werden sie aber mit einem Rollmechanismus realisiert, so gibt size an, wieviele Zeilen gleichzeitig sichtbar sein sollen. Entsprechend ist also eine positive ganze Zahl anzugeben.
multiple: Ist dies Attribut angegeben (leerer Wert oder mit dem Wert 'multiple'), so können mehrere Punkte der Liste gleichzeitig ausgewählt werden, sonst nicht. Wie die Mehrfachauswahl im Darstellungsprogramm realisiert ist, ist nicht festgelegt, ist also der Anleitung oder Hilfe zum Programm zu entnehmen. In der Regel funktioniert eine Auswahl von mehr als einer Option nur, wenn size größer als eins ist.
disabled: Durch Angabe des Attributes (immer mit dem Wert 'disabled'), wird angegeben, daß der Wert nicht vom Nutzer verändert werden darf. Der Wert wird nicht mit dem Formular versendet und kann vom Nutzer auch nicht fokussiert werden.
autocomplete: Ist das Attribut gesetzt, wird eine automatische Auswahl probiert. Der Wert ist 'on' für eingeschaltet (Voreinstellung, wenn das Attribut nicht gesetzt ist) oder 'off' für abgeschaltet.
autofocus: Ist das Attribut gesetzt, bekommt der Eingabebereich den Fokus, nachdem das Dokument geladen ist. Der Wert ist leer oder 'autofocus'.
form: Sofern das Element nicht Nachfahre des Elementes form ist, zu dem es gehört, ist mit dem Attribut form anzugeben, zu welchem Formular es gehört. Wert ist ein Fragmentidentifizierer (Wert des Attributes id) eines Elementes form im selben Dokument.
required: Ist das Attribut gesetzt, muß etwas ausgewählt werden, beim Absenden darf der Wert also nicht leer sein. Das Attribut selbst hat entweder einen leeren Wert oder 'required'.

Auch für optgroup ist das Attribut disabled verfügbar. Entsprechend kann damit die ganze Gruppe von Listenpunkten, die darin enthalten sind, deaktiviert werden. Erforderlich für optgroup ist das Attribut label. Dessen Wert ist einfacher Text. Dieser dient als Gruppenüberschrift.

Für option gibt es die Attribute value, label und disabled. Das Attribut value beinhaltet den Wert, welcher mit dem Formular für diese Auswahlliste versendet wird, falls diese Option ausgewählt wurde. Der Inhalt des Elementes hingegen dient der sichtbaren Beschriftung und wird nur gesendet, falls value nicht angegeben ist. label ist bei diesem Element optional. Der Wert von label soll als Auswahlmöglichkeit ausgegeben werden. Ist das Attribut nicht angegeben, soll der Inhalt des Elementes als Auswahlmöglichkeit verwendet werden.

Ferner kann durch Angabe des Attributes selected (leerer Wert oder mit dem Wert 'selected') der entsprechende Eintrag vorausgewählt werden. Wenn multiple für select nicht angegeben ist, darf dies natürlich nur einmal pro Auswahlliste angegeben werden.

Beispiele zu Auswahllisten

Auswahl eines Landes

<form action="statistik.php" method="post">
  <p>
  <label for="Land">Wähle ein Land aus:</label><br />
  <select id="Land" name="land" size="4">
    <option value="de">Deutschland</option>
    <option value="fr">Frankreich</option>
    <option value="it">Italien</option>
    <option value="li">Liechtenstein</option>
    <option value="at">Österreich</option>
    <option value="ch">Schweiz</option>
    <option value="es">Spanien</option>
  </select><br />
  <button type="submit" value="Land">Absenden</button>
  </p>
</form>

Brötchenbelag

<form action="bestellen.php" method="get">
  <fieldset>
  <legend>Bestelle eine belegtes Brötchen</legend>
  <label for="Belag">Wähle den Brötchenbelag aus</label><br />
  <select id="Belag" name="belag" size="10" multiple="">
   <optgroup label="Schmierfett">
    <option value="Butter">Butter</option>
    <option value="Margarine">Margarine</option>
   </optgroup>
   <optgroup label="Süßes">
    <option value="Rübenkraut">Rübenkraut</option>
    <option value="Erdbeermarmelade">Erdbeermarmelade</option>
    <option value="Nußnugatcreme">Nußnugatcreme</option>
    <option value="Honig">Honig</option>
   </optgroup>
   <optgroup label="Deftiges">
    <option value="Salami">Salami</option>
    <option value="Leberwurst">Leberwurst</option>
    <option value="Schinken">Schinken</option>
   </optgroup>
   <optgroup label="Heikles" disabled="">
    <option value="Crystal Meth">Crystal Meth</option>
    <option value="Kokain">Kokain</option>
   </optgroup>
  </select><br />
  <button type="submit" value="Belag">Absenden</button>
  </fieldset>
</form>

Eingabefeld input

Die Eingabe von Daten erfolgt häufig mit einzeiligen Eingabefeldern. Bei speziellen Typen des Eingabefeldes gibt es auch besondere Hilfen oder Schnittstellen für die Eingabe. Diese werden mit dem Steuerelement input erzeugt. Das Element ist immer inhaltsleer. Alle Angaben zur Funktion und Art des Eingabefeldes werden in den Attributen angegeben, diese sind allesamt optional.

Das Element hat zahlreiche Attribute, welche davon sinnvoll verwendbar sind, kann vom Attribut type abhängen, dessen Wert wiederum bestimmt, wie die Eingabe erfolgen kann.

Attribut autofocus

Ist das Attribut gesetzt, bekommt der Eingabebereich den Fokus, nachdem das Dokument geladen ist. Der Wert ist leer oder 'autofocus'.

Attribut disabled

Durch Angabe des Attributes (der Wert ist leer oder 'disabled'), wird angegeben, daß der Wert nicht vom Nutzer verändert werden darf. Der Wert wird nicht mit dem Formular versendet und kann vom Nutzer auch nicht fokussiert werden. Meist werden diese Felder ausgegraut dargestellt.

Attribut form

Sofern das Element nicht Nachfahre des Elementes form ist, zu dem es gehört, ist mit dem Attribut form anzugeben, zu welchem Formular es gehört. Wert ist ein Fragmentidentifizierer (Wert des Attributes id) eines Elementes form im selben Dokument.

Attribut name

Mit diesem Attribut wird der Name der Eingabe festgelegt. Wird das Attribut nicht angegeben, kann bei der Formularauswertung nicht auf den Wert des Formularfeldes zugegriffen werden.

Attribut value

Mit diesem Attribut kann ein Anfangswert gesetzt werden, welcher dann gegebenenfalls vom Nutzer modifiziert werden kann.

Attribut type

Dieses Attribut legt die Art des Eingabefeldes fest. Folgende Werte sind möglich:

hidden: Ein nicht angezeigtes Formularfeld, um Informationen, die nicht vom Nutzer verändert werden müssen, zu übertragen; jedoch lassen sich die Inhalte dieser Formularfelder im Quelltext nachschlagen und manipulieren.
text: Einzeiliges Textfeld, dies ist der Standardwert, sollte kein Typ angegeben sein.
search: Die Funktion entspricht der von 'text', die Dekoration kann anders sein, eine allgemeine Suche repräsentierend.
tel: Die Eingabe repräsentiert eine Telephonnummer. Weil es verschiedene Arten von Telephonnummern gibt, impliziert das noch keine Einschränkung der Eingabemöglichkeiten.
url: Die Eingabe ist eine IRI/URI, folgt also einer bestimmten Syntax, zum Beispiel: Protokoll '://' Zeichenfolge.
email: Die Eingabe ist eine email, folgt also einer bestimmten Syntax, zum Beispiel: Zeichenfolge '@' Zeichenfolge '.' Zeichenfolge. Ist per Attribut multiple die Angabe mehrerer Adressen erlaubt, sind diese mit Komma und optionalen Leerzeichen zu trennen.
password: Die Eingabe wird nicht offen anzeigt, sondern etwa durch Sternchen ersetzt; dies dient der Eingabe von Paßwörtern und ähnlich vertraulichen Informationen, wobei sich vertraulich nur darauf bezieht, daß ein Beobachter des Nutzers die Eingabe nicht einfach mitlesen kann (die Vertraulichkeit der Datenübertragung selbst hängt vom Protokoll ab, siehe Attribut action bei form).
date: Eingabe eines Datums (im internationalen Datumsformat, zum Beispiel; 2019-03-18. Das Darstellungsprogramm kann auch eine Hilfe anbieten, um ein Datum auszuwählen).
month: Eingabe eines Datums, nur auf den Monat genau (im internationalen Datumsformat, zum Beispiel; 2019-03. Das Darstellungsprogramm kann auch eine Hilfe anbieten, um ein Datum auszuwählen).
week: Eingabe eines Datums, nur auf die Woche genau (im internationalen Datumsformat, zum Beispiel; 2019-W34. Das Darstellungsprogramm kann auch eine Hilfe anbieten, um eine Woche auszuwählen).
time: Eingabe einer Zeitgabe (im internationalen Datumsformat, zum Beispiel; 18:19:20.9876. Das Darstellungsprogramm kann auch eine Hilfe anbieten, um eine Uhrzeit auszuwählen).
datetime-local: (nicht verfügbar in HTML5.0) Eingabe eines Datums mit Zeitangabe (im internationalen Datumsformat, zum Beispiel; 2019-03-18T20:19:18.6Z oder 2019-03-18T20:19:18+02 oder 2019-03-18T20:19:18-01. Das Darstellungsprogramm kann auch eine Hilfe anbieten, um ein Datum samt Uhrzeit auszuwählen).
number: Eingabe einer Zahl, also ein optionales Vorzeichen (+ oder -) gefolgt von einer Ziffernfolge, optional mit einem Separator nach dem ganzzahligen Anteil (.), zum Beispiel -0.1234. Alternativ ist auch wissenschaftliche Notation zulässig, zum Beispiel +1.842E-3: Das Darstellungsprogramm kann auch eine Hilfe anbieten, um eine Zahl auszuwählen oder kultur- oder sprachspezifisch zu notieren.
range: Eingabe einer Zahl aus einem Bereich. Der Bereich wird mit min und max festgelegt. Zur Anwendung kommt der Typ meist für Schätzwerte, denn die Eingabehilfe ist meist ein Schieberegler über den erlaubten Bereich.
color: Eingabe einer Farbangabe im üblichen RGB-Format, allerdings nur die hexadezimale Langform, Beispiele: #ffeedd, #0123456. Das Darstellungsprogramm kann eine graphische Eingabemöglichkeit anbieten, bei welcher in einem bunten Farbverlauf eine Farbe ausgewählt werden kann, ebenfalls kann es eine Eingabemöglichkeit für den Wert oder die einzelnen Komponenten geben.
checkbox: Eine Auswahlbox mit den Zuständen 'an' und 'aus'.
radio: eine Auswahlbox mit den Zuständen 'an' und 'aus', existieren jedoch mehrere davon mit gleichem Namen in einem Formular, so kann nur exakt eine davon ausgewählt werden, bei Auswahl eines 'radio'-input werden die anderen automatisch deaktiviert.
file: ein Auswahlfeld, um Dateien vom Rechner des Nutzers auszuwählen, das Aussehen und die Funktionalität variieren hier stark zwischen den einzelnen Darstellungsprogrammen und Betriebsystemen. Ist multiple gesetzt, wird eine Liste von Dateien eingegeben, also mit Komma und optionalen Leerzeichen als Separator.
submit: Eine Schaltfläche zum Absenden des Formulars; zu beachten ist dabei, daß unabhängig von der Anordnung der Schaltfläche im Quelltext immer das komplette Formular versendet wird.
reset: Eine Schaltfläche, mit der das Formular in den Ausgangszustand zurückversetzt (geleert) werden kann.
button: eine allgemeine Schaltfläche ohne spezifisches Verhalten, welche im Wesentlichen dazu dient, Ereignisse dynamisch abzufragen (zum Beispiel um Formulare alternativ mit JavaScript vorab dekorativ zu analysieren; auch eine interaktive Dekoration mit CSS ist möglich).
image: eine graphische Schaltfläche zum Absenden des Formulars; Mit dem Attribut src wird dazu die URI/IRI einer Graphik angegeben, welches die Schaltfläche repräsentiert. Wird das Bild mit einem Zeigergerät angeklickt, werden die Koordinaten des Zeigergerätes als Wert übermittelt, dabei ist links oben 0,0. Ist 'name' der Wert des Attributes name, so sind die Koordinaten als Parameter name.x und name.y verfügbar. Für Nutzer ohne graphische Darstellung oder Zeigergerät ist ein alternativer Zugang zum Inhalt bereitzustellen, wenn dieser von den Koordinaten abhängt.

Attribut accept

Ist type gleich 'file', so können mittels accept die erlaubten Dateitypen angegeben werden: Die konkrete Umsetzung ist jedoch nicht in allen Darstellungsprogrammen identisch.

Attribut autocomplete

Ist das Attribut gesetzt, wird eine automatische Vervollständigung probiert, es werden also Fortsetzungsmöglichkeiten angeboten. Der Wert ist 'on' für eingeschaltet (Voreinstellung, wenn das Attribut nicht gesetzt ist) oder 'off' für abgeschaltet.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'range', 'color'.

Attribut checked

Bei den Typen 'radio' oder 'checkbox' (immer mit dem Wert 'checked') kann damit angegeben werden, daß die Schalterstellung 'ein' ist. Wenn der Schalter ausgeschaltet sein soll, wird dieses Attribut nicht gesetzt.

Attribut dirname

Beim Typ 'text' und 'search': Name für die Information der Textrichtung, mit welcher der Eingabebereich ausgefüllt wurde. Das Darstellungsprogramm ergänzt den Wert automatisch, also 'ltr' für von links nach rechts, 'rtl' für von rechts nach links etc.

Attribut maxlength

Im Falle von 'text' oder 'password' bestimmt dieses Attribut die maximale Anzahl Zeichen, die eingegeben werden dürfen. Wird die maximale Länge nicht angegeben, so können beinahe beliebig viele Zeichen eingegeben werden, also insbesondere mehr als wegen size auf einmal angezeigt werden. Der Wert ist also eine positive ganze Zahl.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password'.

Attribut minlength

Im Falle von 'text' oder 'password' bestimmt dieses Attribut die minimale Anzahl Zeichen, die eingegeben werden dürfen. Wird die minimale Länge nicht angegeben, gibt es keine Einschränkung. Der Wert ist also eine positive ganze Zahl.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password'.

Attribut pattern

Der Wert wird eingeschränkt auf ein Muster. Das Muster wird durch einen regulären Ausdruck festgelegt, welcher als Wert angegeben wird. Mittels title oder im Begleittext zur Eingabe sollte ausreichend Information über die erlaubte Eingabe angegeben werden, besser ebenfalls Beispiele.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password'.

Attribut placeholder

Der Wert ist ein Platzhalter-Text. Dieser wird also anfangs als Hinweis eingeblendet, verschwindet, sobald das Publikum selbst Text eingibt. Der Text ist also nur verfügbar, wenn das Element sonst noch leer ist und nicht den Fokus hat.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password', 'number'.

Attribut readonly

Durch Angabe des Attributes (der Wert ist leer oder 'readonly'), wird angegeben, daß der Wert nicht vom Nutzer verändert werden können soll. Dieser kann natürlich immer den Quelltext des Formulares manipulieren, der Wert ist bei der Auswertung also immer zu prüfen. Der Wert wird mit dem Formular versendet und kann vom Nutzer noch fokussiert werden.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password', 'date', 'month', 'week', 'time', 'datetime-local', 'number'.

Attribut required

Ist das Attribut gesetzt, muß etwas ausgewählt werden, beim Absenden darf der Wert also nicht leer sein. Das Attribut selbst hat entweder einen leeren Wert oder 'required'.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password', 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'radio', 'checkbox', 'file'.

Attribut size

Diese Zahl bestimmt, wie breit das Eingabefeld ist. Der Wert ist eine positive ganze Zahl. Es bedeutet die Zahl die Anzahl der Zeichen.

Das Attribut ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'password', 'number'.

Attribute min und max

Mit den Attributen werden erlaubte Bereiche für Eingaben festgelegt. Der Eingabetyp impliziert daher also eine Reihenfolge. Mit min einen minimalen Wert, mit max einen maximalen Wert.

Die Attribute sind anwendbar bei den Typen: 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'range'.

Attribut step

Mit dem Attribut wird die Schrittweite für erlaubte Eingaben festgelegt. Der Eingabetyp impliziert damit eine Reihenfolge und einen Anfangswert, typisch durch min oder value festgelegt.

Die Attribute sind anwendbar bei den Typen: 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'range'.

Attribute zum Typ 'submit' oder 'image': formaction, formenctype, formmethod, formnovalidate, formtarget

Beim Typ 'submit' werden einige Attribute anwendbar, welche entsprechende Angaben im zugehörigen Element form überschreiben können:

Attribut formaction

Mit dem Attribut kann der Wert von action des zugehörigen Elementes form überschrieben werden, der Wert ist also eine IRI/URI, zu welcher der Formularinhalt gesendet werden soll. So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt alternativ an verschiedene Adressen zur Verarbeitung zu versenden.

Attribut formenctype

Mit dem Attribut kann der Wert von enctype des zugehörigen Elementes form überschrieben werden, der Wert entspricht also dem von enctype: "application/x-www-form-urlencoded", "multipart/form-data", "text/plain". So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt verschieden formatiert zu senden.

Attribut formmethod

Mit dem Attribut kann der Wert von method des zugehörigen Elementes form überschrieben werden, der Wert entspricht also dem von method: 'get' oder 'post'. So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt mit verschiedenen Methoden zu senden.

Attribut formnovalidate

Mit dem Attribut kann entsprechend dem Attribut novalidate von form festgelegt werden, daß der Formularinhalt nicht vom Darstellungsprogramm geprüft werden soll. Der Wert ist leer oder 'formnovalidate'. Das kann hilfreich sein, um dem Publikum eine Möglichkeit zu bieten, den Formularinhalt schon einmal unvollständig zwischenzuspeichern, also zu senden und auf dem Dienstrechner aufzubewahren, um das Formular später komplett oder korrekt auszufüllen. Eine weitere Anwendung für das Publikum kann sein, den Formularinhalt trotzdem senden zu können, wenn lediglich die Prüfkriterien falsch sind, nicht der ausgefüllte Formularinhalt. Es kann sehr frustrierend sein, ein Formular nicht absenden zu können, nur weil die Prüfkriterien fehlerhaft sind. Viele Menschen sind technisch nicht in der Lage, solch eine Prüfung selbst zu umgehen (Formular-Dokument kopieren und geeignet bearbeiten).

So ist es also möglich, mehrere Schaltflächen anzubieten, um den Formularinhalt einmal geprüft und einmal ungeprüft zu senden.

Attribut formtarget

Mit dem Attribut kann der Wert von target des zugehörigen Elementes form überschrieben werden, der Wert entspricht also dem von target.

Mit dem Attribut kann der Autor einen Vorschlag machen, wo die Antwort des Dienstprogrammes nach Abschicken des Formulares angezeigt werden sollte. Das Attribut ist ausführlich für das Element a im Kapitel über Verweise erläutert, siehe dort.

So ist es also möglich, mehrere Schaltflächen anzubieten, um die Rückmeldung des Dienstprogrammes auf die Formularsendung in verschiedenen Bereichen auszugeben.

Attribute zum Typ 'image': src, alt, width, height

Beim Typ 'image' werden einige besondere Attribute anwendbar:

src: Der Wert von src die IRI/URI eines Bildes, welches für die Schaltfläche verwendet werden soll.
alt: Der Wert von alt ist eine Textalternative zum Schaltflächenbild.
width: Breite des Bildes, entsprechend dem gleichnamigen Attribut von img.
height: Höhe des Bildes, entsprechend dem gleichnamigen Attribut von img.

Attribut list

Mit dem Element datalist (siehe unten) kann eine Liste von Vorschlägen zur Auswahl bereitgestellt werden. Diese Liste wird mit dem Attribut list mit dem Eingabeelement verknüpft. Der Wert ist ein Fragmentidentifizierer (Wert des Attributes id) eines Elementes datalist.

list ist anwendbar bei den Typen: 'text', 'search', 'url', 'tel', 'email', 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'range', 'color'.

Attribut multiple

Liegt der Typ 'email' oder 'file' vor, können Listen mit mehreren Angaben gemacht werden. Um dies zu erlauben, wird das Attribut multiple verwendet. Der Wert ist leer oder 'multiple'.

Beispiele

Ein Beispiel, wie eine Anmeldung zu einer Plauderecke (englisch: chat) realisiert sein könnte. Die Plauderecke kann auch auf einem anderen Rechner liegen als das Formular. So kann die Plauderecke gemeinsam genutzt werden. Über eine versteckte Eingabe, die das Dienstprogramm auswertet, könnte etwa die Darstellung der Plauderecke dynamisch an die Seite angepaßt werden, von der die Anmeldung erfolgt.

<form action="http://example.org/chat-login.php" method="post">
  <fieldset>
    <legend>Anmeldung zur Zaubberer-Lehrling-Tratschecke</legend>
    <ul>
      <li><label for="spitzname">Spitzname:</label>
          <input type="text" id="spitzname" name="spitzname" /></li>
      <li><label for="kennwort">Kennwort:</label>
          <input type="password" id="kennwort" name="kennwort" /></li>
      <li>Status:<br />
        <label for="mitZauberstab">Mit Zauberstab</label>
        <input type="radio" id="mitZauberstab" name="status"
               value="mit" /><br />
        <label for="ohneZauberstab">Ohne Zauberstab</label>
        <input type="radio" id="ohneZauberstab" name="status"
               value="ohne" checked="checked" />
      </li>
      <li><input type="submit"
           value="Rabitz, Rabatz, Rabaa - und schon bin ich da!" />
          <input type="hidden" name="von_woher"
           value="Hermines und Harries Töpfer-Kompendium" />
      </li>
    </ul>
  </fieldset>
</form>

Beispiel mit den Typen 'radio' und 'checkbox' zur statistischen Ermittlung des Urlaubsverhaltens nach Alter der Befragten:

<form action="statistik.php" method="post">
  <fieldset>
    <legend>Wähle ein oder mehrere Länder aus.</legend>
    <ul>
      <li><input type="checkbox" name="land" value="deutschland" id="de" />
          <label for="de">Deutschland</label></li>
      <li><input type="checkbox" name="land" value="frankreich" id="fr" />
          <label for="fr">Frankreich</label></li>
      <li><input type="checkbox" name="land" value="italien" id="it" />
          <label for="it">Italien</label></li>
      <li><input type="checkbox" name="land" value="oesterreich" id="at" />
          <label for="at">Österreich</label></li>
      <li><input type="checkbox" name="land" value="schweiz" id="ch" />
          <label for="ch">Schweiz</label></li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Zu welcher Altergruppe gehörst du?</legend>
    <ul>
      <li><input type="radio" name="alter" value="1" id="alter_1" />
          <label for="alter_1">0 - 18 Jahre</label></li>
      <li><input type="radio" name="alter" value="2" id="alter_2" />
          <label for="alter_2">19 - 35 Jahre</label></li>
      <li><input type="radio" name="alter" value="3" id="alter_3" />
          <label for="alter_3">36 - 50 Jahre</label></li>
      <li><input type="radio" name="alter" value="4" id="alter_4" />
          <label for="alter_4">51 - 65 Jahre</label></li>
      <li><input type="radio" name="alter" value="5" id="alter_5" />
          <label for="alter_5">ab 66 Jahre</label></li>
    </ul>
  </fieldset>
  <p><input type="submit" name="senden" value="Abschicken"/></p>
</form>

Dies Beispiel eignet sich auch gut, um zu erläutern, wie schlecht durchdachte Formulare Nutzer frustrieren können. Hier stehen etwa nur fünf Länder zur Auswahl – Menschen, die andere Länder bevorzugen oder lieber nicht verreisen, werden bei der Umfrage diskriminiert. Um das Formular also zu verbessern, sollte neben anderen Ländern zum einen eine Auswahlmöglichkeit angelegt werden, die das Nichtverreisen auswählbar macht und ein freies Eingabefeld, um Urlaubsziele anzugeben, die nicht in der Liste stehen. So vermeidet man nicht nur Frustrationen, sondern bekommt nebenbei bei der Auswertung auch statistisch signifikantere Informationen, weil keine Menschen ausgegrenzt werden. Die Umformulierung zu einem brauchbaren Formular wird dem Leser zur Übung überlassen.

Auch beim Typ 'radio' ist Vorsicht geboten, das Sortiment sollte immer alle Möglichkeiten abdecken, damit der Nutzer immer eine zutreffende Auswahl vornehmen kann. Kritisch ist dabei auch, daß sich einmal ausgewählte Knöpfe von diesem Typ nur durch Wahl eines anderen Knopfes wieder abschalten lassen, es ist im Zweifelsfalle also nicht einfach möglich, wieder keinen Knopf auszuwählen, wenn irrtümlich bereits einer betätigt wurde oder einer per Vorauswahl vom Autor aktiviert wurde. Hier ist obiges Beispiel besser ausgelegt, weil die Altersgruppen so gewählt sind, daß niemand ausgeschlossen wird, es sei denn, das eigene Alter ist nicht bekannt oder wird als hier irrelevante Privatsache betrachtet. Sicherheitshalber empfiehlt sich da also ebenfalls eine Ergänzung um eine Auswahlmöglichkeit 'ohne Angabe'.

Beispiel mit diversen Typen, Einschränkungen und Prüfungangaben:

<form action="formular.php" method="post">
  <fieldset>
    <legend>Texteingabe</legend>
    <ul>
      <li><label for="Spitzname">Spitzname:</label>
          <input type="text" id="Spitzname" name="Spitzname" placeholder="Purzelchen" autofocus="" /></li>
      <li><label for="Kennwort">Kennwort:</label>
          <input type="password" id="Kennwort" name="Kennwort" size="5" /></li>

      <li><label for="Telephon">Telephon:</label>
          <input type="tel" id="Telephon" name="Telephon" value="42" /></li>
      <li><label for="URI">URI/IRI:</label>
          <input type="url" id="URI" name="URI" placeholder="https:// …"/>
      </li>
      <li><label for="email">email (mehrere mit Kommata trennen):</label>
          <input type="email" id="email" name="email" multiple="" /></li>
      <li><label for="nix">Eingabe ohne Funktion:</label>
          <input type="button" id="nix" name="nix" value="Steht nur so herum." /></li>
      <li><label for="Freitext">Freitext:</label>
        <textarea name="Freitext" id="Freitext"></textarea>
      </li>
    </ul>
  </fieldset>

  <fieldset>
    <legend>Prüfung oder Eingabehilfen</legend>

    <ul>
      <li><label>Deaktivierte Eingabe:
          <input type="text" name="Deaktiviert" disabled="disabled" value="wird nicht mitgeschickt" /></label>
      </li>

      <li><label>Nur lesbare Eingabe:
          <input type="text" name="nurlesen" readonly="" value="wird mitgeschickt" /></label></li>
      <li><label>Das Programm kann etwas vorschlagen zum Thema 'Name':
          <input type="text" name="Name" autocomplete="on" /></label></li>
      <li><label>Das Programm soll nichts vorschlagen zum Thema 'name':
          <input type="text" name="name" autocomplete="off" /></label></li>

      <li><label>Erforderliche Eingabe:
          <input type="text" name="Erforderlich" required="" /></label></li>
      <li><label>Mindestens 5 Zeichen, höchstens 10 Zeichen (type search, ähnlich text):
          <input type="search" id="MinMax" name="MinMax" minlength="5" maxlength="10" size="10"/></label></li>
      <li><label>(ganze) Zahl:
          <input type="number" name="Zahl" /></label></li>
      <li><label>nicht negative ganze Zahl (min=0):
          <input type="number" name="ZahlNichtNegativ" min="0"/></label></li>
      <li><label>nicht positive ganze Zahl (max=0):
          <input type="number" name="ZahlNichtPositiv" max="0" /></label></li>
      <li><label>auch nicht ganze Zahlen (step 0.0000000001):
          <input type="number" name="NGZahlNichtPositiv" step="0.0000000001" /></label></li>

      <li><label>Schieberegler (-100 bis 10, Auswahl in Schritten von 1. Ausgewählt: 1):
          <input type="range" name="Bereich-1" min="-10" max="10" step="1" value="1" /></label>
      </li>
      <li><label>Schieberegler (0 bis 1000 in Schritten von 100, Auswahl in Schritten von 50. Ausgewählt: 800):
          <input type="range" name="Bereich-2" min="0" max="1000" step="50" value="800" /></label>
      </li>
      <li><label title="Hex-Farbwert wie #XXXXXX wobei X von 0 bis f)">Farbe:
          <input type="color" name="Farbe" value="#004444" /></label></li>
      <li><label>Muster (Hex-Farbkurzwert eingeben wie #48f):
          <input type="text" name="hex" value="#f63" pattern="^#([A-Fa-f0-9]{3})$" placeholder="#abc" /></label></li>
    </ul>
  </fieldset>

  <fieldset>
    <legend>Datum und Zeit</legend>
    <ul>
      <li><label title="2018-08-08">Datum:
          <input type="date" name="Datum" /></label></li>
      <li><label title="22:45:17.1 oder 13:27 etc">Zeit:
          <input type="time" name="Zeit" /></label></li>
      <li><label title="2018-08-08T23:56:08">Datum und Zeit:
          <input type="datetime-local" name="Datum-und-Zeit" /></label></li>
      <li><label title="2018-W33">Woche:
          <input type="week" name="Woche" /></label></li>
      <li><label title="2018-08">Monat:
          <input type="month" name="Monat" /></label></li>
    </ul>
  </fieldset>

  <fieldset>
    <legend>Datei auswählen</legend>
    <p>
      <label title="Nach Absenden wird allerdings nur der Dateiname angezeigt, weil die Datei nicht wirklich gebraucht wird!">Datei (text/plain, XHTML)
      <input form="bsp" type="file" name="Datei" accept="text/plain,application/xhtml+xml" /></label>
    </p>
  </fieldset>

  <fieldset>
          <legend>Absenden</legend>
          <p>
          <input type="submit"  name="Abschicken"
           value="Abschicken" /><br />
          <input type="submit"  name="AbschickenohnePruefung"
           value="Abschicken ohne Prüfung" formnovalidate="" /><br />
          <input type="submit"  name="Abschicken_self"
           value="Abschicken, Antwort im selben Fenster" formtarget="_self" /><br />
          <input type="submit"  name="AbschickenohnePruefung_self"
           value="Abschicken ohne Prüfung, Antwort im selben Fenster" formnovalidate="" formtarget="_self" /><br />
          <input type="reset"  name="zuruecksetzen"
           value="Zurücksetzen" /><br />
          <input type="button"  name="nichtstun"
           value="Nichts tun" /><br />
          <input type="submit" name="AbschickenPOST" value="Abschicken per post-Methode" formmethod="post" /><br />
          <input type="submit" name="AbschickenPOSTop" value="Abschicken per post-Methode ohne Prüfung" formmethod="post" formnovalidate="" /><br />
          <input type="submit" name="AbschickenPOST_self" value="Abschicken per post-Methode, Antwort im selben Fenster" formmethod="post" formtarget="_self" /><br />
          <input type="submit" name="AbschickenPOSTop_self" value="Abschicken per post-Methode ohne Prüfung, Antwort im selben Fenster" formmethod="post" formnovalidate="" formtarget="_self" />
          </p>
          <p>
          Versteckter Wert (wird mitgesendet).
          <input type="hidden" name="Versteckt"
           value="Nur im Quelltext zu sehen." />
          </p>
  </fieldset>
</form>

Datenliste datalist

Bei einigen Typen für input kann auch eine Liste mit Vorschlägen angehängt werden. Die Liste wird im Element datalist mit Elementen option notiert. Der Fragmentidentifizierer von datalist verwendet wird abermals in list des input angegeben, um die Liste mit der Eingabe zu assoziieren.

Das Element kann notiert werden, wo Phrasen-Inhalt erwartet wird. Der Inhalt ist wiederum Phraseninhalt oder ein oder mehrere Elemente option.

Beispiel zu datalist

<form action="formular.php" method="post">
  <fieldset>
    <legend>Wohin als nächstes?</legend>
    <p>
    <label for="URI" title="Angefangen mit 'd' sollten Vorschläge kommen.">URI/IRI (mit Vorschlagsliste: Wikipedia, Wikibooks, Wiktionary):</label>
          <input type="url" id="URI" name="URI" placeholder="https:// …" list="hpurls"/>
          <datalist id="hpurls">
            <option value="https://de.wikipedia.org" label="Wikipedia" />
            <option value="https://de.wikibooks.org" label="Wikibooks" />
            <option value="https://de.wiktionary.org" label="Wiktionary" />
          </datalist>
    </p>
  </fieldset>
  <fieldset>
    <legend>Schiebung</legend>
    <ul>
     <li><label>Schieberegler (mit Vorschlagsliste 0, 1, 5, 7, 10, Auswahl in Schritten von 1. Ausgewählt: 1):
          <input type="range" name="Bereich-1" min="0" max="10" step="1" list="Bv" /></label>
          <datalist id="Bv">
            <option value="0" label="min"/>
            <option value="1" selected="" />
            <option value="5" />
            <option value="7" />
            <option value="10" label="max"/>
           </datalist>
      </li>
      <li><label>Schieberegler (mit Vorschlagsliste 0 bis 1000 in Schritten von 100, Auswahl in Schritten von 50. Ausgewählt: 800):
          <input type="range" name="Bereich-2" min="0" max="1000" step="50" list="Bh" /></label>
          <datalist id="Bh">
            <option value="0" />
            <option value="100" />
            <option value="200" label="200" />
            <option value="300" />
            <option value="400" />
            <option value="500" />
            <option value="600" />
            <option value="700" />
            <option value="800" selected="" label="800" />
            <option value="900" />
            <option value="1000" />
           </datalist>
      </li>
    </ul>
  </fieldset>
  <p><input type="submit" name="senden" value="Abschicken"/></p>
</form>

Element output

Mit dem Element output kann Inhalt als Ergebnis einer Verarbeitung gekennzeichnet werden. Hilfreich ist dies zum Beispiel, wenn ein Formular versendet wurde. Der Inhalt wird geprüft und eine Antwort mit einer Auswertung wird zurückgesendet.

Das Element ist ein Phrasenelement und kann Phraseninhalt enthalten.

Das Element kann mehrere spezifische Attribute haben:

Attribut form

Sofern das Element nicht Nachfahre des Elementes form ist, zu dem es gehört, ist mit dem Attribut form anzugeben, zu welchem Formular es gehört. Wert ist ein Fragmentidentifizierer (Wert des Attributes id) eines Elementes form im selben Dokument.

Attribut name

Mit diesem Attribut wird der Name der Ausgabe festgelegt. Wird das Attribut nicht angegeben, kann bei der Formularauswertung nicht auf den Wert des Formularfeldes zugegriffen werden.

Attribut for

Ähnlich wie bei label kann mit dem Attribut for ein Eingabeelement zugeordnet werden, welches einen Fragmentidentifizierer hat. Im output wird dann im Attribut for dieser Fragmentidentifizierer notiert. Das Attribut for ist spezifisch und optional für output.

Erfolgreiche und nicht erfolgreiche Steuerelemente

Ein Steuerelement wird erfolgreich genannt, wenn dessen Daten bei der Absendung des Formulars übertragen werden. Formal können Steuerelemente auch außerhalb eine Elementes form notiert werden, diese sind aber allenfalls erfolgreich, falls sie mit dem Attribut form mit einem Formular verknüpft werden. Sonst haben sie nicht die inhaltliche Funktion von Elementen, die zur Übersendung von Information gedacht sind. Dies sollte vom Autor also unbedingt vermieden werden, um die Nutzer nicht mit funktionslosen Formularelementen zu verwirren.

Auch wenn Steuerelemente innerhalb von form notiert werden, aber keinen Steuerelementnamen mittels des Attributes name bekommen haben, sind sie nicht erfolgreich. Wenn das Formular abgesendet wird, werden deren Daten also nicht mit übertragen. Auch hier sollte der Autor natürlich Verwirrung beim Nutzer vermeiden.

Wird ferner mit dem Attribut disabled festgelegt, daß ein Steuerelement deaktiviert ist, ist es auch nicht erfolgreich.

Es können in einem Formular auch mehrere Absendeschaltflächen notiert werden, es ist dann aber nur jene erfolgreich, welche vom Nutzer verwendet wurde, um das Formular zu versenden. Die anderen Absendeschaltflächen sind entsprechend nicht erfolgreich. Es kann also ausgewertet werden, welche Absendeschaltflächen verwendet wurde, somit können sie mit unterschiedlichen Funktionen oder Informationen verknüpft werden.

Checkboxen, welche eingeschaltet sind, können erfolgreich sein, sind sie nicht eingeschaltet, sind sie auch nicht erfolgreich.

Bei Radio-Knöpfen mit gleichem Steuerelementnamen kann nur jener erfolgreich sein, der eingeschaltet wurde.

Bei einer Auswahlliste können nur jene Optionen erfolgreich sein, die ausgewählt wurden. Ist keine ausgewählt, ist der gesamte zugehörige Steuerelementname nicht erfolgreich.

Hat ein Steuerelement keinen aktuellen Wert, entweder vom Autor vorgegeben oder vom Nutzer eingegeben, so braucht das Darstellungsprogramm solche Steuerelemente auch nicht als erfolgreich zu betrachten und den Namen übertragen.

Nicht erfolgreich sind zudem Schaltflächen vom typ 'reset'.

Der Erfolg ist unabhängig von der Dekoration, also können insbesondere auch solche Steuerelemente erfolgreich sein, welche mittels CSS versteckt wurden, nicht dargestellt werden.

Einschränkung, Prüfung und Auswertung von Formulardaten

Die Auswertung der Formulare erfolgt normalerweise durch ein Skript, welches als Dienstprogramm läuft. Diese Methode funktioniert unabhängig davon, was im Darstellungsprogramm des Nutzers aktiviert ist oder nicht, daher ist beim Element form auch immer notwendig für eine sichere Auswertung, daß mittels action eine IRI/URI angegeben wird, wohin der Formularinhalt geschickt werden soll. Wie man solche Skripte schreibt, etwa mit den Skriptsprachen PHP oder Perl, ist nicht Gegenstand dieses Buches über XHTML.

Der Autor kann sich die Daten auch per E-Mail zuschicken lassen, das geht, sofern das Darstellungsprogramm über eine Funktionalität verfügt, E-Mails zu verschicken oder per Voreinstellung ein anderes Programm starten kann, welches dies tut. Die Methode eignet sich jedenfalls nicht für alle Nutzer und ist daher nicht verläßlich. Die Auswertung erfolgt dann in der Regel manuell.

Bei jeglichem Prüfverfahren ist wieder an das Gebot zu denken, Nutzer nicht mit fehlerhaften Einschränkungen zu frustrieren, etwa in dem absichtlich oder versehentlich korrekte Eingaben blockiert werden.

Exkurs: Beispiel Formularauswertung mit PHP

Eher um einfach mal loslegen zu können, zu testen, gibt es hier ein kleines PHP-Skript, welches als Antwort auf die Zusendung eines Formulars alle erfolgreich gesendeten Parameter auflistet. Dazu ist es natürlich notwendig, das Skript unter einer URI/IRI verfügbar zu machen, also etwa auf dem eigenen Rechner lokal ein Dienstprogramm für HTTP (mit Interpretation von PHP) laufen zu lassen. Die URI/IRI wird dann als Wert etwa von action oder des gleichwertigen formaction notiert.

Um Mehrfachangaben bei select mit PHP auswerten zu können, kann beim Wert von name hinten '[]' angehängt werden. Damit wird es dann möglich, alle Angaben als Datensatz auslesen zu können. Ohne diesen Trick wäre es etwa bei der 'get'-Methode notwendig, die zur Datensendung an die URI/IRI angehängte Zeichenkette auszuwerten. Sonst sind die Daten bei PHP in einem Datensatz für 'get' und einem für 'post' bequem einzeln verfügbar.

Bei anderen Skriptsprachen kann es für eine Mehrfachangaben zum gleichen Namen andere Lösungen geben.

<?php
# alle GET- oder POST-Parameter ausgeben:

# Kopf senden
$httpheader="Content-type: application/xhtml+xml; charset=UTF-8";
header($httpheader);
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>  \n";

# Wer fragt?
$ua=$_SERVER['HTTP_USER_AGENT']
$ua=htmlspecialchars($ua, ENT_XHTML,'UTF-8', true);
?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="de">
  <head>
    <title>Formularausgabe</title>
  </head>
  <body>
    <h1>Formularausgabe</h1>

<p>
user-agent: <?php echo $ua;?>

</p>

<?php
# Wenn es GET-Parameter gibt ...
if (count($_GET)>0)
{
echo '<h2>GET-Parameter</h2>
';

# alle durchgehen
foreach(array_keys($_GET) as $key){
  if (is_array($_GET[$key])) {
    $dummy=$_GET[$key];
    $val='(mehrere ausgewählt): ';
    foreach(array_keys($dummy) as $sch){
      $val.=$dummy[$sch].' | ';
    }
    $value=htmlspecialchars($val, ENT_XHTML,'UTF-8', true);
    $issue=htmlspecialchars($key, ENT_XHTML,'UTF-8', true);
  } else {
    $value=htmlspecialchars($_GET[$key], ENT_XHTML,'UTF-8', true);
    $issue=htmlspecialchars($key, ENT_XHTML,'UTF-8', true);
  }
echo "<pre>$issue: $value</pre>
";
}

# Dateien als Eingabe?
if (count($_FILES)>0)
echo '<h3>Datei-Parameter</h3>
';

foreach(array_keys($_FILES) as $key){
    $value=htmlspecialchars($_FILES[$key], ENT_XHTML,'UTF-8', true);
    $issue=htmlspecialchars($key, ENT_XHTML,'UTF-8', true);
    echo "<pre>$issue: $value</pre>
";
}
}
# POST-Parameter verfügbar?
if (count($_POST)>0)
{
echo '<h2>POST-Parameter</h2>
';
# alle durchgehen
foreach(array_keys($_POST) as $key){
  if (is_array($_POST[$key])) {
    $dummy=$_POST[$key];
    $val='(mehrere ausgewählt): ';
    foreach(array_keys($dummy) as $sch){
      $val.=$dummy[$sch].' | ';
    }
    $value=htmlspecialchars($val, ENT_XHTML,'UTF-8', true);
    $issue=htmlspecialchars($key, ENT_XHTML,'UTF-8', true);
  } else {
    $value=htmlspecialchars($_POST[$key], ENT_XHTML,'UTF-8', true);
    $issue=htmlspecialchars($key, ENT_XHTML,'UTF-8', true);
  }
echo "<pre>$issue: $value</pre>
";

}
}
?>
</body>
</html>

Zurück zu Tabellen |

Hoch zum Inhaltsverzeichnis |

Vor zu Interaktive Elemente