Erstellen von HTML-Formularen mit dem FORM-Tag

Für die Erstellung von Formularen mit HTML wird zunächst einmal der FORM-Tag benötigt. Das ist sozusagen das Gerüst für das Formular und der Code für die Formularfelder wie Textfeld, Checkbox etc. wird zumindest bis HTML4 innerhalb des FORM-Tags platziert. Mit HTML5 ist es möglich, den Code für die Formularfelder auch außerhalb des FORM-Tags zu platzieren.

<form>


<!-- In diesem Bereich werden (bis HTML4) die Formularfelder eingefügt. -->


</form>

<!-- Mit HTML5 können die Formularfelder auch hier platziert werden. -->

Mit dem Code wäre das Formular bereits erstellt. Allerdings fehlen noch wichtige Attribute, z.B. die Angabe des Ziels, an das die Formulardaten geschickt werden sollen. Name und ID des Formulars sollten auch angegeben werden. Der Code könnte daher wie folgt erweitert werden. Der Übersichtlichkeit halber werden die Kommentare aus dem vorherigen Code entfernt.

<form action="verarbeitung.php" method="post" name="..." id="...">


</form>

Dem FORM-Tag wurden die folgenden Attribute zugewiesen.

  • action: Damit wird das Zielprogramm angegeben, an das die Formulardaten verschickt werden sollen. In der Regel ist das ein Script, das in einer Sprache wie Perl, ASP oder PHP für die Entgegennahme, Verarbeitung und Weiterleitung der Daten programmiert wurde. Näheres dazu steht unter Erstellung des Formulars und Verarbeitung der Daten. In diesem Beispiel ist das Zielprogramm verarbeitung.php, das separat programmiert werden müsste.
  • method: Damit wird die (HTTP-) Übertragungsmethode angegeben. Denn, auf "irgendeinem" Weg müssen die Daten an das Programm übertragen werden. Es wird dabei zwischen GET und POST unterschieden. Mit GET werden die Daten praktisch über die Adresszeile des Browsers übertragen. In der Adresszeile werden die Daten in der Form verarbeitung.php?name=beispielname&nachricht=Text+mit+Nachricht einfach an die URI angehängt und können vom Programm ausgelesen werden. GET ist übrigens die Standardmethode und wird verwendet, wenn keine Übertragungsmethode angegeben wurde. Eine andere, bequemere Form ist die Methode POST und sollte wenn möglich gewählt werden, weil die maximale Zeichenlänge in der Adresszeile begrenzt ist. Wenn Passwörter übertragen werden, kommt ein Sicherheitsrisiko dazu. Wenn Dateien übertragen werden sollen, ist die Methode POST sogar zwingend notwendig. Hierbei werden die Daten über einen Standardeingabekanal des Webservers an das Programm übertragen. In diesem Beispiel wurde die Methode POST gewählt und wie bei allen Attributen gemäß den Empfehlungen des W3C in Kleinbuchstaben geschrieben, auch wenn die Schreibweise in Großbuchstaben evtl. auch funktionieren würde.
Formulardaten per GET übertragen

Auch wenn in der Praxis der Name und die ID meistens identisch gehalten werden, so gibt es einige Unterschiede.

  • id: Die ID kann fast allen HTML-Elementen zugewiesen werden und ist ein eindeutiger Bezeichner innerhalb einer Seite. Man darf eine ID nicht mehrfach vergeben. Man kann sie z.B. für die Formatierung mit CSS, als Sprungmarken für interne Links oder in Scripte verwenden. In JavaScript können sie über die Methode getElementById() genutzt werden. Der Rückgabewert ist dabei kein Array.
  • name: Der Name ist ein Attribut einiger weniger HTML-Elemente und muss nicht immer eindeutig sein. Beispielsweise werden mehreren Radiobuttons dieselben Namen zugewiesen und dadurch gruppiert, damit innerhalb der Gruppe nur ein Feld ausgewählt werden kann. Es kann zwar auch als Sprungmarke in internen Links verwendet werden. Allerdings wird das nicht empfohlen, da hierfür die ID gedacht ist und damit wesentlich mehr Elemente als Sprungmarken verwendet werden können. Das Attribut Name wird hauptsächlich für die Übertragung von Formulardaten an Scripte verwendet, die im FORM-Tag unter action="..." angegeben werden. In JavaScript kann das Element mit getElementsByName() als Objekt genutzt werden. Der Rückgabewert ist hierbei immer ein Array. In XHTML wird für den FORM-Tag das Attribut Name zumindest gemäß den Spezifikationen nicht unterstützt, auch wenn die Browser hierbei oft tolerant sind.

Die Attribute ID und Name teilen sich denselben Namensraum. Das hat zur Folge, dass zwei verschiedenen HTML-Elementen, über die Attribute ID und Name, keine identischen Werte zugewiesen werden dürfen. Außerdem dürfen die Werte für ID und Name bei manchen Tags (A, APPLET, FORM, FRAME, IFRAME, IMG, MAP) nicht unterschiedlich sein, wenn einem Element beide Attribute zugewiesen wurden. Ansonsten können sie unterschiedlich sein. In manchen Fällen müssen sie sogar unterschiedlich sein, z.B. bei gruppierten Elementen wie den Radiobuttons. Diese werden über denselben Namen gruppiert. Somit haben mehrere Elemente denselben Namen. Da die ID eindeutig sein muss, kann man nicht allen gruppierten Elementen dieselbe ID zuweisen. Dadurch ergibt sich zwangsläufig, dass bei manchen Radiobuttons der Name und die ID unterschiedlich sind. Gemäß den Spezifikationen wird bei beiden Attributen zwischen Groß- und Kleinschreibung unterschieden. Allerdings ist das bei manchen Browsern und im Quirks-Modus anders.

Neben diesen werden auch häufig die folgenden Attribute verwendet.

enctype:

Bei der Kommunikation zwischen Browser und Webserver wird übermittelt, wie die Daten kodiert sind. So weiß die Gegenseite, in welcher Form die Daten zu erwarten sind. Bei der Übertragung von Formulardaten über den Standardeingabekanal POST sind für den enctype (Encoding Type) folgende Werte relevant:

  • application/x-www-form-urlencoded: Das ist der Standardwert bei ungültigen Angaben oder nicht gesetztem enctype. Dabei werden alle Leerzeichen in + umgewandelt und alle Sonderzeichen in den HEX-Wert des ASCII-Zeichencodes. Dieser Wert wird auch bei der Übertragungsmethode GET verwendet.
  • text/plain: Das ist der Wert für reine Texte. Leerzeichen werden bei dieser Kodierung in + umgewandelt und die Sonderzeichen so belassen, wie sie sind.
  • multipart/form-data: Der Wert ist vor allem dann notwendig, wenn man Dateien übertragen möchte. Dabei werden keine Zeichen geändert. Da der enctype nur für die Übertragungsmethode POST gilt, können Dateiuploads nicht mit GET realisiert werden, sondern nur mit POST.

target:

Wie bei den Hyperlinks kann mit dem Attribut target ein Fenster angegeben werden, in dem die Rückantwort des Servers geöffnet werden soll. Existiert z.B. ein IFRAME, kann der Name des Fensters angegeben werden. Daneben sind folgende Werte möglich:

  • _self: Das aktuelle Fenster.
  • _blank: Ein neues Fenster.
  • _parent: Das Fenster in einer Ebene höher.
  • _top: Das Fenster in der obersten Ebene.

accept-charset:

Damit kann die Zeichenkodierung für die Formulardaten angegeben werden.

Attribute für den FORM-Tag in HTML5

Mit HTML5 sind für Formulare viele Neuerungen hinzugekommen, darunter die folgenden Attribute für den FORM-Tag.

  • autocomplete: Mit den Werten on oder off kann angegeben werden, ob die Daten in den Formularfeldern erhalten bleiben bzw. automatisch vervollständigt werden sollen, wenn man nach dem Abschicken des Formulars die Webseite mit dem Formular erneut besucht, z.B. über die Zurück-Schaltfläche des Browsers.
  • novalidate: Soll das Formular nicht auf Vollständigkeit überprüft werden, kann das Attribut novalidate verwendet werden. Es kann entweder in verkürzter Form (HTML-Schreibweise) oder in Langform (XHTML-Schreibweise) mit novalidate="novalidate" geschrieben werden.

Folgendes Attribut für den FORM-Tag ist in HTML5 entfernt worden und sollte nicht mehr verwendet werden.

  • accept: Mit accept werden kommagetrennt über die MIME-Typen die Dateitypen angegeben, die bei Dateiuploads an den Server übermittelt werden dürfen. Beim Klick auf die Durchsuchen-Schaltfläche erscheinen dann zur Auswahl nur Dateien von erlaubten Typen. Das ist lediglich ein Komfort für den Benutzer, damit die Auswahl vereinfacht wird. Es lässt sich leicht umgehen und ersetzt daher nicht die serverseitige Prüfung.

Platzierung von Formularfeldern außerhalb des FORM-Tags in HTML5

Vor HTML5 mussten alle Formularfelder innerhalb des FORM-Tags platziert werden. Mit HTML5 ist es auch möglich, diese außerhalb zu platzieren. Hierfür wird den außerhalb platzierten Formularfeldern über das Attribut form die ID des Formulars zugewiesen. Ein Beispielcode, in dem der INPUT-Tag außerhalb platziert wurde, der unter anderem für einzeilige Eingabefelder verwendet werden kann.

<form action="..." method="..." id="formid">
  <!-- In diesem Bereich werden (bis HTML4) die Formularfelder eingefügt. -->
</form>
  <!-- Mit HTML5 können sie auch außerhalb platziert werden, z.B. so. -->
  <input type="text" name="input" id="input" value="" form="formid">

Platzierung der Formularfelder in Block-Elementen

Der vorherige Code enthält einen kleinen Schönheitsfehler. Der INPUT-Tag, der für die meisten Formularfelder verwendet wird, ist ein Inline-Element und sollte für die korrekte Syntax in einem Block-Element platziert werden, z.B. wie im folgenden Code in einem Absatz, der mit dem P-Tag erzeugt wird.

<form action="..." method="..." id="formid">
  <p><input type="text" name="input1" id="input1" value=""></p>

</form>
  <p><input type="text" name="input2" id="input2" value="" form="formid"></p>

Die Browser zeigen in der Regel die Formularfelder zwar an. Allerdings sollte trotzdem auf die korrekte Syntax geachtet werden.