Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# form ♦ <form> ... </form> ♦ IE4+ M1 N4+ O5+ ♦ HTML 2.0, 3.2, 4.0

Das <form>-Tag kennzeichnet den Anfang und das Ende eines Formulars und dient als Container für die Steuerelemente des Formulars. "Steuerelement" ist ein technischer Ausdruck und bezieht sich auf die verschiedenen Elemente innerhalb eines Formulars, die die Informationen sammeln. Die gesammelten Informationen werden als Inhalt oder Parameter des Formulars bezeichnet und bilden Name/Wert-Paare.

Die vier Tags, mit denen ein Formular aufgebaut werden kann, sind:

button input select textarea

Das Konzept sieht vor, dass der Benutzer die Felder des Formulars als Antwort auf eine Anfrage nach Informationen ausfüllt (z.B. eine Versandadresse). Anschließend klickt der Benutzer die Schaltfläche "Abschicken" (submit). Dadurch werden die Daten zur Weiterbearbeitung übertragen – in der Regel an eine andere Seite der Website. Die Daten können auch an die gleiche Seite, an ein Fenster oder einen Frame übertragen werden.

Die Möglichkeit, Informationen einzuspielen und zu sammeln, eine Antwort vom Benutzer via Formular zu erhalten und dynamisch auf die Eingabe des Benutzers zu reagieren, ist das Herz der E-Commerce-Industrie. Aber nicht nur das klassische Formular, sondern viele Anwendungen, die nicht mehr aus dem Internet wegzudenken sind, beruhen auf der Formulartechnik: Foren, Gästebücher, Chats und Suchmaschinen.

Zwei Attribute sind zwingend erforderlich:

- Das Attribut action gibt an, wohin die Daten übertragen werden.
- Das Attribut method gibt an, wie die Daten übertragen werden.

Es ist nicht empfehlenswert, mehr als ein Formular pro Seite einzusetzen. Lange Formulare sollen vorzugsweise auf zwei oder mehr Seiten verteilt werden.

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

Das schließende Tag ist erforderlich.

Kernattribute | class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title
accept | Das Attribut accept ist eine durch Kommas getrennte Liste von Dateiformaten, die der Server als Inhalt akzeptiert, wenn `type="file"` aufgeführt wurde.
accept-charset | Das Attribut accept-charset ist eine durch Kommas oder Leerzeichen getrennte Liste von Zeichen, die der Server verarbeiten kann, wenn der Inhalt eines Formulars übertragen wurde.
action | Das Attribut action setzt die URL der Seite, an die der Inhalt des Formulars zur Weiterverarbeitung übertragen wird.
enctype | Das Attribut enctype spezifiziert den MIME-Typ, der das Formular codiert. Die 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 | Das Attribut method gibt an, welche der zwei möglichen HTTP-Methoden benutzt wird, um den Inhalt des Formulars zu übertragen. Die am häufigsten benutzte Methode post überträgt den Inhalt des Formulars in zwei Schritten. Zuerst wird die vom action-Attribut spezifizierte URL kontaktiert. Danach – wenn der Schritt erfolgreich war – wird der Inhalt an die URL übertragen. Die get-Methode hängt den Inhalt an das Ende der URL an, die im action-Attribut angegeben wurde (ein Fragezeichen trennt das Ende der URL vom Anfang des Inhalts).
name | Das Attribut name ist eine Zeichenfolge, die ein Steuerfeld mit einem Namen belegt. Der Name muss im Dokument eindeutig sein und kann nicht noch einmal benutzt werden.
onreset | Das attribut onreset ist ein Ereignis, das die Ausführung eines JavaScripts initiiert, wenn der Benutzer das Formular löscht (clear).
onsubmit | Das Attribut onsubmit ist ein Ereignis, das die Ausführung eines JavaScripts initiiert, 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).
target | Das Attribut target überträgt den Inhalt des Formulars an ein spezifiziertes Fenster oder an einen Frame.

#### Beispiel

Im folgenden Beispiel wird das Formular "clientseitig" verifiziert.

    <body onLoad="document.formname.fullname.focus()">
    <h2>Das Beispielformular</h2>
    <p>Lassen Sie bitte eines oder beide der erforderlichen
      Felder frei und klicken Sie die Schaltfl&auml;che &quot;Absenden&quot;.</p>
    <hr>
    <p>Wenn Sie &uuml;ber Updates und Erweiterungen der CD zu diesem Buch
    und unserer Seiten im Internet informiert werden sollen,
    f&uuml;llen Sie bitte das folgende Formular aus. </p>
    <form method="post" name=" " onSubmit="return checksubmit()">
      Vor- und Nachname (erforderlich)
      <input type="text" name="fullname" size="30"><br>
      E-Mail-Adresse (erfoderlich)
      <input type="text" name="emailadresse" size="30"><br>
      Telefonnummer (optional)
      <input type="text" name="telefonnummer" size="15"><br>
      <input type="submit" name="absenden" value="Absenden">
      <input type="reset" value="L&ouml;schen" name="zur&uuml;ckstellen">
    </form>
    </body>
    </html>

↑

HTML-4.01-Kernattribute Die interessantesten Attribute der Neuzeit

Index Tabellarischer Überblick über alle Tags

!DOCTYPE Document Type Definition (DTD)

a anchor (Anker); ein Link

abbr Abkürzung

acronym Gleichwertige Bezeichnung

address Hervorhebung von Adressen

applet Java-Applet

area Clientseitige Image Map

b Fetter Schriftstil

base Basis-URI des Dokuments

basefont Basis-Schriftgröße

bdo Laufrichtung der Schrift

big Großer Schriftstil

blockquote Langes Zitat

body Body des Dokuments

br Erzwungener Zeilenumbruch

button button; Schaltfläche

caption Tabellenüberschrift

center Zentrierte Darstellung von Inhalten

cite Zitat

code Darstellung von Computercode

col Tabellenspalten

colgroup Tabellenspaltengruppe

dd Beschreibungsteil einer Definition

del Gelöschter Text

dfn Definition in einer Definitionsliste

dir Auflistung eines Verzeichnisses

div Generischer Behälter für Inhalte

dl Definitionsliste

dt Definitionselement

em Betonung

fieldset Formulargruppe

font Lokale Änderung der Schrift

form Interaktives Formular

frame Fenster innerhalb des Browserfensters

frameset Unterteilung des Browserfensters

h1, h2, h3, h4, h5, h6 Überschriften

head Header des Dokuments

hr Horizontale Linie

html Wurzelelement des Dokuments

i Kursiver Schriftstil

iframe Inlinefenster

img Eingebettetes Bild

input Steuerfeld eines Formulars

ins Eingefügter Text

isindex Ausgabefeld in einer Zeile

kbd Text, der vom Benutzer einzugeben ist

label Überschrift zu einem Formularfeld

legend Beschreibung einer Formularfeldgruppe

li Listenelement

link Medienunabhängiger Link

map Clientseitige Image Map

menu Menüliste

meta Generische Metainformation

noframes Alternativer Inhalt für Browser ohne Unterstützung von Frames

noscript Alternativer Inhalt für Browser ohne Skriptunterstützung

object Generisches eingebettetes Element

ol Nummerierte Aufzählung

optgroup Optionsgruppe

option Wählbares Element

P paragraph; Absatz

param Parameterwert

pre Vorformatierter Text

q Kurzes Inlinezitat

s Durchgestrichener Schriftstil

sample Programmcode-Beispiel

script Skriptanweisungen

select Optionsselektor

small Kleiner Schriftstil

span Generischer Behälter für Inhalte

strike Durchgestrichener Stil

strong Starke Betonung

style Stilinformationen

sub Tiefgesetzt

sup Hochgesetzt

tableTabelle

tbody Tabellenkörper

td Tabellenzelle

textarea Textfeld mit mehreren Zeilen

tfoot Tabellenfuß

th Tabellenkopfzelle

thead Tabellenkopf

titleTitel des Dokuments

tr Tabellenzeile

tt Nichtproportionaler Schriftstil

u Unterstrichener Schriftstil

ul Ungeordnete Liste

var Instanz einer Variablen

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen