HTML form – Formulare | mediaevent.de

Ablauf von Formularen

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 Senden (submit). Dadurch werden die Eingaben der Formularefelder zur Weiterbearbeitung der Formulardaten übertragen – in der Regel an ein Programm auf dem Server (z.B. an eine PHP-Anwendung – Beispiel: Zusammenwirken HTML-Formular und PHP-Anwendung).

  Versand-Methode: get oder post ───┐
                                    │
                                    ▼
<form action="form.php" method="post" id="formid">
                ▲
                │
                └───── 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.

Formular: method

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) des action-Attributs. Wenn dieser Schritt erfolgreich war, werden die Formulardaten an das verarbeitende Programm übertragen.
method="get" hängt den Inhalt sichtbar 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.

Eigentlich ist es also doch nicht egal, ob das Formular get oder post als Methode einsetzt: Sensible Daten offen durch das Web zu schicken widerspricht der Sicherheit.

Felder in Formularen

Formularfelder können zwar nach außen völlig unterschiedliche Formen annehmen, aber dahinter sitzen nur wenige HTML-Elemente für Formulare. Erst die Attribute des input-Tags 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-Elements liegen. Heute können Felder außerhalb eines form-Elements über das Attribut form an ein Formular gebunden werden.

Ein form-Block darf keine weiteren form-Elemente 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.

<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">
           <button id="Senden" type="submit">Senden</button>
        </label>
    </fieldset>
</form>

Mit HTML5 sind neue Attribute für input hinzugekommen: Das required-Attribut des input-Elements 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 HTML oder 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: on / off; gibt an, ob autocomplete für das Formular verwendet werden soll oder nicht
formnovalidate: 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.
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 (veraltet): eine durch Kommas getrennte Liste von Dateiformaten, die der Server als Inhalt akzeptiert, wenn type="file" aufgeführt wurde.

Benutzerfreundlichkeit von Formularen

HTML progress und HTML meter sind visuelle Elemente, die z.B. den Fortschritt beim Ausfüllen langer Formulare zeigen.