CSS, HTML und Javascript mit {stil}

HTML-Tag form • Behälter Formularfelder

Formulare bieten einen Dialog mit dem Besucher einer HTML-Seite. Dahinter steht das form-Tag mit Eingabefeldern, Abfragen und Textfeldern.

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

Viele Anwendungen, die nicht aus dem Internet wegzudenken sind, beruhen auf Formularen: Blogs, Foren, Gästebücher, Chats und Suchmaschinen.

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 HTML form-Block darf keine weiteren form-Tags enthalten.

Eingabefelder für DatenAbsenden des FormularsDarstellung des Formulars
inputinputfieldset
select / optionbuttonlabel
textarealegend
optgroup

Beispiel

Felder mit * sind erforderlich

<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>

HTML form-Tag: Attribute

accept (nicht untertützt in HTML5)
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.
autocomplete
on / off; gibt an, ob autocomplete für das Formular verwendet werden soll oder nicht
formnovalidate (Neu in HTML5)
gibt an, dass die Formulardaten nicht validiert werden
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 HTTP-Methode für die Übertragung des Formulars-Inhalts verwendet werden soll.
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).