CSS, HTML UND JAVASCRIPT MIT {STIL}

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.

Eingabefeldern für Daten	Absenden des Formulars	Darstellung des Formulars
input	input	fieldset
select / option	button	label
textarea		legend
		optgroup

Beispiel

Felder mit * sind erforderlich

Vor- und Nachname *
Emailadresse *

<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

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

Globale Attribute und Events für form-Elemente

Attribute	Events
class, dir, id, lang, style, title	onclick, ondblclick onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup