Websiteentwicklung: XHTML: Formulare

Websiteentwicklung XHTML 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 muss dann mit speziellen Dienstprogrammen auf dem referenzierten Rechner erfolgen. Dazu ist der Formularinhalt an den Rechner mit dem Dienstprogramm zu übertragen.

Ü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 URI verschickt. Eine solche URI sieht typischerweise wie folgt aus:

seite.php?Name=peter&Vorname=muster

Die URI besteht hierbei aus mehreren Abschnitten: Vorne 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, dass der Benutzer für die Seite, zu welcher das Formular verschickt wurde, ein Lesezeichen setzen kann und dass 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 verändert werden, ohne dass 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. Wird der Formularinhalt übertragen, so werden dabei jene Informationen übermittelt, welche über die Steuerelemente vorgegeben, eingegeben oder verändert wurden.

Das Element form ist ein Blockelement und kann als Inhalt Blockelemente oder für Formulare spezifische Elemente fieldset enthalten, darf als Nachfahren aber kein weiteres Element form haben. Steuerelemente sollten immer ein Element form als Vorfahren haben.

Das form-Element hat folgende Attribute:

action: Die Angabe des Attributes ist zwingend erforderlich. Der Wert gibt eine 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.
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.
accept: Das Attribut gibt eine Liste mit Inhaltstypen an, von denen Dateien richtig bearbeitet werden können. Zwei Werte der Liste sind jeweils durch ein Komma mit optionalen Leerzeichen zu trennen. Das Darstellungsprogramm kann diese Angabe nutzen, um nur solche Dokumente aus der Nutzereingabe herauszufiltern, die von einem geeigneten Inhaltstyp sind.
name: Name des Formulars. Dies Attribut sollte nur verwendet werden, wenn Rückwärtskompatibilität zu HTML notwendig ist. Stattdessen ist das allgemein verwendbare Attribut id zu verwenden, name allenfalls zusätzlich mit dem gleichen Wert wie id.
target: Dies Attribut steht nur in XHTML+RDFa und in XHTML1.0 transitional zur Verfügung. 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.

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 Text und Blockelemente und inzeilige Elemente enthalten. Innerhalb von fieldset sollte allerdings im Sinne einer guten Strukturieren vermieden werden, auf gleicher Ebene Blockelemente und inzeilige Elemente 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. Es kann als Kindelement von fieldset verwendet werden.

Beide Elemente haben keine Attribute, die für sie spezifisch sind.

Für ein Beispiel, siehe Eingabefeld input.

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 inzeiliges Element 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.

Für ein Beispiel, siehe Eingabefeld input.

Eingabefeld input

Die Eingabe von Daten erfolgt häufig mit einzeiligen Eingabefeldern. 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.

Es gibt folgende, für das Element spezifische Attribute:

type

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

text: einzeiliges Textfeld, dies ist der Standardwert, sollte kein Typ angegeben sein
password: einzeiliges Textfeld, allerdings wird die Eingabe 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, dass ein Beobachter des Nutzers die Eingabe nicht einfach mitlesen kann (die Datenübertragung selbst hängt vom Protokoll ab, siehe Attribut action bei form)
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
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 manipulieren
submit: eine Schaltfläche zum Absenden des Formulars; zu beachten ist dabei, dass 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 auszuwerten)
image: eine graphische Schaltfläche zum Absenden des Formulars; Mit dem Attribut src wird dazu die URI einer Graphik angegeben, welches die Schaltfläche repräsentiert. Wird das Bild mit einem Zeigegerät angeklickt, werden die Koordinaten des Zeigegeräts 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 Zeigegerät ist ein alternativer Zugang zum Inhalt bereitzustellen, wenn dieser von den Koordinaten abhängt.

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.

value

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

checked

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

readonly

Durch Angabe des Attributes (immer mit dem Wert 'readonly'), wird angegeben, dass der Wert nicht vom Nutzer verändert werden können soll. Der Wert wird mit dem Formular versendet und kann vom Nutzer noch fokussiert werden.

disabled

Durch Angabe des Attributes (immer mit dem Wert 'disabled'), wird angegeben, dass 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.

size

Diese Zahl bestimmt, wie breit das Eingabefeld ist. Der Wert ist eine positive ganze Zahl. Im Falle von type 'text' oder 'password' bedeutet die Zahl die Anzahl der Zeichen, sonst handelt es sich um eine Angabe in Pixeln.

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.

src

Ist type gleich 'image', so ist der Wert von src die URI eines Bildes, welches für die Schaltfläche verwendet werden soll.

alt

Ist type gleich 'image', so ist der Wert von alt eine Textalternative zum Schaltflächenbild.

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.

usemap

Ist type gleich 'image', so kann mit dem Wert von usemap die URI, beziehungsweise ein Fragmentidentifizier eines Elementes map angegeben werden, mit welchem die Eingabe zu einer verweissensitiven Graphik wird.

ismap

Ist type gleich 'image', so kann mit dem Attribut (immer mit dem Wert 'ismap') angegeben werden, dass eine verweissensitive Graphik verwendet wird, die auf dem Zielrechner mit einem Dienstprogramm ausgewertet wird. Versendet werden dann entsprechend die Koordinaten, bei welchen die Graphik angeklickt wurde.

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. Diese Anmerkung betrifft die Attribute: readonly, disabled, size, maxlength und accept. 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 des Formulareingabe zu manipulieren.

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 angepasst 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ählen Sie 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ören Sie?</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, dass 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'.

Mehrzeilige Textfelder, textarea

Es können auch Textfelder erzeugt werden, die sich über mehrere Zeilen erstrecken. Dazu wird das inzeilige Element 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 value-Attribut).

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 mit dem Wert 'readonly'), wird angegeben, dass der Wert nicht vom Nutzer verändert werden darf. Der Wert wird mit dem Formular versendet und kann vom Nutzer auch fokussiert werden.
disabled: Durch Angabe des Attributes (immer mit dem Wert 'disabled'), wird angegeben, dass 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.

Beispiel

Ein Formular für einen Gästebucheintrag:

<form action="gaestebuch.php" method="post">
  <fieldset>
    <legend>Einen Gästebucheintrag erstellen</legend>
    <p>
      <label for="Name">Ihr Name:</label><br />
      <input type="text" name="name" id="Name" size="51" />
    </p>
    <p>
      <label for="Texteingabe">Ihren Gästebucheintrag:</label><br />
      <textarea name="text" cols="40" rows="10" id="Texteingabe"></textarea>
    </p>
    <p><input type="submit" value="Absenden" /></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 inzeiligen Elementes 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 (immer 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, dass 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.

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. 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 (immer 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.

Beispiel

Auswahl eines Landes

<form action="statistik.php" method="post">
  <p>
  <label for="Land">Wählen Sie 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 />
  <input type="submit" value="Absenden" />
  </p>
</form>

So könnte die Ausgabe zum Beispiel aussehen – bei den unteren Beispielen wurde lediglich das Attribut size auf 1 gesetzt (unten rechts nach Klick auf die Auswahlliste):

Schaltfläche mit Inhalt, button

Während beim Element input die Darstellung stark dem Darstellungsprogramm überlassen bleibt und auch mit CSS nur bedingt beeinflußt werden kann, zudem die inhaltlichen Möglichkeiten stark eingeschränkt sind, kann man mit dem Steuerelement button weitgehend selbst bestimmen, was in der Schaltfläche ist und wie dies mit CSS oder anderen Methoden dekoriert werden kann.

Das inzeilige 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 Blockelemente und inzeilige Element sein, mit Ausnahme von Formularelementen einschließlich button selbst. 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 name, value, disabled und type. Für name und value ist die Bedeutung die gleiche wie für die gleichnamigen Attribute von input. Ebenfalls gibt es das Attribut type. Allerdings sind für dies nur die Werte 'submit', 'reset' und 'button' erlaubt. Die Werte haben dann die gleiche Bedeutung wie für type von input. Ist type nicht angegeben, ist die Voreinstellung 'submit'.

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 nie erfolgreich, sie haben also 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, dass 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' oder object-Elemente, die zwar als Schaltfläche verwendet werden, bei denen aber das Attribut declare notiert ist.

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.

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 zwingend erforderlich, dass mittels action eine 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ässlich. Die Auswertung erfolgt dann in der Regel manuell.

Zusätzlich oder als Hilfe während des Ausfüllens kann es als nützlich empfunden werden, im Dokument ein Skript laufen zu lassen, welches dazu dient, die Richtigkeit von Angaben zu überprüfen, bevor das Formular losgeschickt wird. Dies kann jedoch nur im Rahmen der Dynamisierung von Formularen mit JavaScript als zusätzliche Hilfe vor dem Versenden der Daten zum Dienstprogramm geschehen. Eine Überprüfung der Daten mit dem Dienstprogramm ist ohnehin notwendig, da der Nutzer sämtliche Formularelemente im Quelltext manipulieren oder schlicht die Ausführung von Skriptsprachen deaktivieren kann.

Mit HTML5 werden einige neue Methoden und Attribute eingeführt, die eine weitergehende Prüfung der Formulardaten gleich durch das Darstellungsprogramm ohne Skript ermöglichen. Dies wird in Zukunft die Formularprüfung mit JavaScript größtenteils überflüssig machen und ersetzt damit individuelle Skripte durch ein standardisiertes Prüfverfahren, was eine große Erleichterung für Autoren darstellen wird.

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.

Zurück zu Objekte |

Hoch zu XHTML |

Vor zu Tabellen