Stil mit {stil}

Aug 2009

HTML-Tag <form> ... </form>
Behälter für die Elemente eines Formulars

Formulare bieten einen Dialog mit dem Besucher einer HTML-Seite. Dahinter steht das form-Tag mit Eingabefeldern, Abfragen und Textfeldern. Viele Anwendungen, die nicht aus dem Internet wegzudenken sind, beruhen auf Formularen: Blogs, Foren, Gästebücher, Chats und Suchmaschinen.

Das HTML-form-Tag bildet den Rahmen für die Eingabefelder des Formulars und enthält die Steuerinformationen für die Weiterverarbeitung.

Der Benutzer füllt die Felder des Formulars aus (z.B. eine Versandadresse, einen Benutzernamen und ein Passwort) und klickt anschließend auf die Schaltfläche »Absenden« (submit). Dadurch werden die Formulardaten zur Weiterbearbeitung übertragen – in der Regel an ein Programm (z.B. an eine PHP-Anwendung) auf dem Server.

Zwei Attribute des <form>-Tags sind zwingend erforderlich: action (die Adresse der weiterverarbeitenden Anwendung auf dem Server) und method (die Methode zur Übermittlung der Daten).

<form action="form.php" method="post"> 
               ^                ^
               |                |
               |                +------ Versand-Methode: get oder post
               |
               +------ weiterverarbeitende Anwendung

Das "name"-Attribut darf mit der DTD "strict" im <form>-Tag nicht mehr verwendet werden. Stattdessen soll das "id"-Attribut verwendet werden, um das Formular in einer Anwendung zu identifizieren.

Ein form-Element darf keine weiteren <form>-Tags enthalten.

Beispiel

<form method="post" action="form.php">
  <fieldset>
    <legend> Felder mit * sind erforderlich </legend>
    <label for="name">Vor- und Nachname * </label>
    <input id="name" type="text" name="name" size="30" /><br />
    <label for="email">Emailadresse * </label>
    <input id="email" type="text" name="email" size="30" /><br />
    <label for="Senden"> </label>
    <input id="Senden" type="submit" name="senden" value="Senden" />
  </fieldset>
</form>

Attribute für form

accept

eine durch Kommas getrennte Liste von Dateiformaten, die der Server als Inhalt akzeptiert, wenn type="file" aufgeführt wurde.

accept-charset

eine durch Kommas oder Leerzeichen getrennte Liste von Zeichen, die der Server verarbeiten kann, wenn der Inhalt eines Formulars übertragen wurde.

action

URL – Namen und Pfad zur verarbeitenden Anwendung –; kann auch auch eine Emailadresse in der Form mailto:info@mydomain.de sein.

enctype

MIME-Typ, der das Formular codiert. Vorgabe ist application/x-www-form-urlencoded. Wenn type="file" für den Inhalt angegeben wurde, muss das Attribut auf multipart/form-data gesetzt werden.

method

gibt an, welche der zwei möglichen HTTP-Methoden benutzt wird, um den Inhalt des Formulars zu übertragen.
method="post" überträgt die Formulardaten in zwei Schritten an die URL: Zuerst kontaktiert der Browser die URL (i.d.R. das Programm auf dem Server). Wenn dieser Schritt erfolgreich war, werden die Formulardaten an das verarbeitende Programm übertragen.
method="get" hängt den Inhalt an das Ende der URL an, die im action-Attribut angegeben wurde (kann man gut im Adressfeld des Browsers sehen – ein Fragezeichen trennt das Ende der URL vom Anfang der get-Zeichenkette).
Eigentlich ist es egal, ob get oder post benutzt wird. Bei der Übertragung großer Datenmengen und beim Upload von Dateien auf den Server sollte besser post eingesetzt werden. post schickt die Daten nicht als Teil der URL und verkraftet wesentlich größere Datenmengen als get.

onreset

ein Ereignis, das die Ausführung eines JavaScripts auslöst, wenn der Benutzer das Formular löscht (clear).

onsubmit

ist ein Ereignis, das die Ausführung eines JavaScripts auslöst, wenn der Benutzer das Formular abschickt (submit). An dieser Stelle kann z.B. ein JavaScript auf der Client-Seite den Inhalt des Formulars verifizieren (d.h. prüfen, ob alle Felder korrekt ausgefüllt wurden).

Kernattribute und Ereignisse für form-Elemente

Zum Seitenanfang