CSS, HTML und Javascript mit {stil}

HTML Formulare: form Tag

HTML Login-Formular Formular mit Benutzername und Passwort und Login-Button

HTML form ist der Container für die Felder des Formulars und steuert die Verarbeitung der Benutzereingaben mit den Attributen action und method.

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

Die Anwendungen des Internets – Blogs, Foren, Banking, Shops, Chats und Suchmaschinen – beruhen auf Formularen. Nicht zu vergessen: das allgegenwärtige Kontaktformular.

Der Benutzer füllt die Felder des Formulars aus (z.B. eine Versandadresse, einen Benutzernamen und ein Passwort) und klickt anschließend auf den Button »Absenden« (submit). Dadurch werden die Eingaben der Formularefelder zur Weiterbearbeitung übertragen – in der Regel an ein Programm auf dem Server (z.B. an eine PHP-Anwendung – Beispiel: Zusammenwirken HTML-Formular und PHP-Anwendung).

<form action="form.php" method="post" id="formid">
               ^                ^
               |                |
               |                +------ Versand-Methode: get oder post
               |
               +------ weiterverarbeitende Anwendung
    
    <fieldset>
       <label><input type="text" value="" name="" … ></label>
       <textarea … > </textarea>
    </fieldset>
    <input type="submit" value="Senden" >
</form>

Attribute des form-Elements

Das öffnende form-Tag braucht zwei Attribute: action (die Adresse der Anwendung auf dem Server) und method (die Methode zur Übermittlung der Daten).

Das name-Attribut, das in fast allen input-Tags vorhanden ist, richtet sich an die Anwendung auf dem Server und macht im form-Tag keinen Sinn. Stattdessen soll im öffnenden form-Tag ein id-Attribut oder class-Attribut verwendet werden, um das Formular für CSS und Javascript zu identifizieren.

Felder in Formularen

Formularfelder können zwar nach außen völlig unterschiedliche Formen annehmen, aber dahinter sitzen nur wenige HTML-Tags für Formulare. Erst die Attribute für das input-Tag erzeugen die verschiedenen Funktionen der Eingabefelder.

Eingabefelder für Daten

Absenden des Formulars

Darstellung des Formulars

fieldset und legend fassen zusammengehörende Eingabefelder oder Informationen für den Benutzer zusammen und haben außer der Optik keinen Einfluß auf die Formulardaten. fieldset setzt einen Rahmen um eine Gruppe, legend fügt dem Rahmen einen Text hinzu.

In den vorangegangenen HTML-Versionen mussten alle Felder des Formulars innerhalb eines form-Tags liegen. Mit HTML5 können Felder außerhalb eines form-Tags über das Attribut form an ein Formular gebunden werden.

Ein form-Block darf keine weiteren form-Tags enthalten.

Grundschema eines HTML-Formulars

action="form.php" sendet die Eingaben an das Programm form.php auf dem Server. method="get" sendet die eingegebenen Daten als Teil der URL. Mit method="post" sind die Formulardaten nicht sichtbar.

Felder mit * sind erforderlich

<form method="post" action="form.php" id="login">
   <fieldset>
      <legend> Felder mit * sind erforderlich</legend>
        <label for="name">Name *
           <input id="name" type="text" name="name" size="30">
        </label>
        <label for="passwd">Passwort *
           <input id="passwd" type="password" name="passwd" size="30">
        </label>
        <label for="Senden">
           <input id="Senden" type="submit" name="senden" value="Senden">
        </label>
    </fieldset>
</form>

In der Zeit vor HTML5 musste die Anwendung auf dem Server (hier: form.php) prüfen, ob die erforderlichen Eingaben tatsächlich vorhanden sind. Mit HTML5 sind neue Attribute für input hinzugekommen: Das required-Attribut des input-Tags prüft, ob erforderliche Eingaben vorhanden sind. Dennoch muss das serverseitige Programm weiterhin prüfen, ob die Eingaben vorhanden sind und den Anforderungen entsprechen. Bei Formularen gilt der Grundsatz: Glaube weder dem CSS noch dem Javascript.

HTML form-Tag: Attribute

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 (Neu in HTML5)
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).
target
gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll: z.B. _blank, _self, _parent oder _top. target="_self" (im selben Fenster) ist die Voreinstellung und muss nicht deklariert werden.
Die Antwort der Anwendung auf dem Server kann aber auch in einem iframe im selben Fenster angezeigt werden.
accept (nicht mehr in HTML5)
eine durch Kommas getrennte Liste von Dateiformaten, die der Server als Inhalt akzeptiert, wenn type="file" aufgeführt wurde.

Benutzerfreundlichkeit von Formularen

Mit HTML5 sind auch Elemente für die Benutzerfreundlichkeit hinzugekommen: HTML progress und HTML meter sind visuelle Elemente, die z.B. den Fortschritt beim Ausfüllen langer Formulare zeigen.

50%
BENUTZERNAME / EMAIL PASSWORD LOG IN Passwort vergessen? oder Account registrieren? x