Autocomplete-Funktion im Browser beim Ausfüllen eines Formulars
Sie können an einer gewünschten Stelle innerhalb des HTML-Dokumentkörpers ein Formular definieren. Dabei notieren Sie auch gleich einige wichtige Angaben, etwa zur HTTP-Übertragungsmethode der Formulardaten, zur Zeichenkodierung der Formularfeldinhalte usw.
<form action="http://www.example.org/login.php" method="post" name="login"> <!-- hier folgen die Formularelemente --> </form>
Mit <form>…</form> markieren Sie ein Formular (form = Formular). Alles, was dazwischen steht, gehört automatisch zum Formular. Das sind einerseits Formularelemente wie Eingabefelder, Auswahllisten oder Buttons. Aber auch Beschriftungstexte, Hilfetexte inklusive Grafiken und Multimedia-Elemente sind als Elementinhalt möglich, sowie Script-Bereiche. Bei umfangreichen Formularen ist es außerdem sinnvoll, den Formularinhalt in Formularbereiche zu unterteilen (siehe Fieldsets zur Strukturierung von Formularen).
Im einleitenden <form>-Tag geben Sie mit dem Attribut action die URL-Adresse an, die beim Absenden des Formulars aufgerufen werden soll. An diese Adresse werden außerdem die vom Anwender eingegebenen Formulardaten übertragen. Es handelt sich in den meisten Fällen um ein serverseitiges Script, das in der Lage ist, die Formulardaten zu verarbeiten. Außerdem muss sich das Script darum kümmern, einen geeigneten HTML-Inhalt an den Browser zu senden. Denn der Script-Aufruf ist zugleich ein normaler Seitenaufruf.
Im obigen Beispiel ist ein PHP-Script als Ziel angegeben. Beim action-Attribut gelten alle Möglichkeiten und Regeln der Referenzierung.
Wenn Formulardaten via HTTP an ein serverseitiges Verarbeitungsscript gesendet werden, muss eine HTTP-Request-Methode verwendet werden. In Formularen können Sie diese mit dem Attribut method festlegen. Der Normalfall für HTTP-Requests ist die GET-Methode. Wenn Sie kein method-Attribut angeben, ist das gleichbedeutend mit der Angabe method="get".
Wenn Sie method="get" wählen, hängt der Browser die Formulardaten als Parameter an die bei action angegebene URL-Adresse an. Die Anfrage, die beim Server eintrifft, sieht dann, um beim obigen Beispiel zu bleiben, so aus:
http://www.example.org/sentform.php?name=Stefan+M%FCnz&mail=beispiel@example.org&text=Das+ist+ein+kleiner+Text
Die URL-Adresse erscheint nach Absenden des Formulars auch in dieser Form in der Adresszeile des Browsers des Formularanwenders.
Das verarbeitende Script kann die GET-Parameter auslesen.
Die GET-Methode ist nur für geringe zu übertragende Datenmengen geeignet. Typische Anwendungsfälle sind Suchformulare. Diese enthalten meist nur ein Eingabefeld für den Suchausdruck. Bei Suchanfragen ist es meistens auch praktisch, wenn diese sich als URL-Adresse mit GET-Parametern abbilden lassen, wie zum Beispiel http://www.example.org/suche.php?q=Stefan+M%FCnz. Solche Parameter-Adressen lassen sich nämlich wie jede URL-Adresse bookmarken, direkt verlinken und vieles mehr.
Für umfangreichere Datenmengen oder Fälle, in denen Sie nicht wollen, dass die Formulardaten als GET-Parameter in der Versand-URL-Adresse erscheinen, steht die HTTP-POST-Methode zur Verfügung. Notieren Sie dazu im einleiten <form>-Tag method="post". Das datenverarbeitende Script auf dem Server erhält die Daten dann nicht als HTTP-GET-Parameter, sondern über den sogenannten Standardeingabekanal, den das Betriebssystem allen Prozessen zur Verfügung stellt.
Mit dem name-Attribut können Sie einen Namen für das Formular vergeben. Wenn Sie mehrere Formulare in einem einzigen HTML-Dokument notieren, dürfen keine zwei Formulare den gleichen Namen haben. Das name-Attribut hat nur den Zweck, rückwärtskompatibel zu älteren JavaScripts zu sein, die noch das alte Netscape-DOM benutzen, um auf Formularelemente zuzugreifen. In allen anderen Fällen benötigen Sie kein name-Attribut.
Falls Sie noch Verständnisprobleme haben, was die Formularverarbeitung betrifft: der Handbuchabschnitt Formularverarbeitung wird auf diese Thematik noch genauer eingehen und auch ein praktisches Beispiel vorstellen.
Neben den HTTP-Methoden GET und POST können Sie bei method auch die unbekannteren HTTP-Methoden PUT und DELETE wählen (method="put" bzw. method="delete").
Bei PUT wird die bei action angegebene Adresse nicht als datenverarbeitendes Script interpretiert, sondern als eine Datei, in der die Formulardaten direkt gespeichert werden. Das bedeutet: wenn die Adresse auf dem Server nicht existiert, wird die entsprechende Datei einfach angelegt, und die Formulardaten werden darin gespeichert. Die PUT-Methode war die von Web-Gründervater Tim Berners-Lee ursprünglich vorgesehene Methode, um unkompliziert neue HTML-Dateien mittels eines HTML-Formulars direkt zum Webserver zu übertragen.
DELETE ist der umgekehrte Fall. Die bei action angegebene Ressource wird vom Server gelöscht. Diese Methode war von Berners-Lee dazu gedacht, um über ein Formular, das sonst keine Daten enthält, einen Löschbefehl für eine bestimmte Datei auf dem Server zu erzwingen.
In der heutigen Praxis werden PUT und DELETE nur extrem selten angewendet. Die meisten Webserver unterstützen sie auch nur in Verbindung mit Sicherheiten wie authentifizierten Anwendern.
Es ist möglich, als Wert für das Attribut action eine E-Mail-Adresse anzugeben, z.B. action="mailto:fritz.eierschale@example.org" zusammen mit den Attributen method="post" enctype="text/plain". Das erwünschte Ziel davon ist, dass der Web-Browser die Formulardaten an die angegebene E-Mail-Adresse versendet. Dabei besteht jedoch keine Garantie auf Erfolg. Es hängt vom Browser und anderen Einstellungen auf dem Rechner des Anwenders ab, ob der Formularversand an eine Mailadresse klappt.
Die Attribute action und method sind in HTML5 nicht zwingend erforderlich. Ein schlichtes <form> als Start-Tag eines Formulars ist ebenfalls erlaubt. Sinnvoll ist das, wenn Sie gar nicht vorhaben, Formulardaten an eine andere Adresse zu versenden, sondern die Formulardaten direkt auf der aktuellen Webseite mit Hilfe von JavaScript verarbeiten. Das ist entweder bei Fällen so, in denen gar keine Daten dauerhaft gespeichert werden sollen. Beispielsweise, wenn Sie Besuchern einen einfachen Zinsrechner anbieten möchten. Aber auch in Fällen, in denen Daten ausschließlich im Hintergrund mit Ajax zum Server übertragen werden, kann das action-Attribut entfallen.
Neben den beiden Attributen action und method gibt es weitere spezielle Attribute für das einleitende <form>-Tag. Diese werden nachfolgend beschrieben.
Formulardaten werden, wenn Sie nichts anderes angeben, mit einem spezielllen MimeType namens application/x-www-form-urlencoded übertragen. Dahinter verbirgt sich eine Datenkodierung, deren Ziel ist, Zeichenkonflikte in URL-Adressen zu vermeiden. Alle Zeichen, die in URL-Adressen besondere Bedeutung haben, werden dabei maskiert. Ebenso alle Zeichen mit Zeichenwerten jenseits des ASCII-Zeichensatzes. Die Zeichen werden dabei mit einem Prozentzeichen (%), gefolgt vom hexadezimalen Zeichenwert, kodiert, also beispielsweise %23 für das Zeichen #. Die Methode wird deswegen auch als Prozentkodierung bezeichnet. Serverseitige Programmiersprachen wie PHP dekodieren die so übertragenen Daten automatisch oder durch einen einfachen Funktionsaufruf.
Mit dem enctype-Attribut können Sie einen anderen MimeType für die Übertragung erzwingen (enctype = encoding type = Kodierungstyp). Folgende andere Angaben als enctype="application/x-www-form-urlencoded" sind möglich:
Mit dem Attribut accept-charset können Sie Zeichenkodierungen angeben. Damit geben Sie an, mit welcher Zeichenkodierung der Browser die eingegebenen Formulardaten an den Web-Server senden soll. Sie können eine oder mehrere Kodierungen angeben, aus denen der Browser eine unterstützte auswählen kann. Die Reihenfolge wird dabei beachtet.
Mit einer Angabe wie accept-charset="utf-8" erzwingen Sie UTF-8 als Zeichenkodierung. Mit accept-charset="iso-8859-15 iso-8859-1" bestimmen Sie die entsprechenden beiden Zeichensätze in der angegebenen Prioritätenreihenfolge. Weitere Details zu diesem Thema finden Sie im Buchabschnitt Zeichenkodierung.
Wenn mit dem action-Attribut eine andere Webseite aufgerufen werden soll, können Sie ebenso wie bei Hyperlinks eine Angabe zum Zielfenster (Browsing-Kontext) notieren. Dazu notieren Sie im einleitenden <form>-Tag ein target-Attribut. Mit target="_blank" erreichen Sie beispielsweise, dass die bei action angebebene Adresse, die nach dem Absenden des Formulars aufgerufen wird, in einem neuen Browser-Fenster geöffnet wird.
Neben dem Wert "_blank" sind auch die festen Werte "_self" (aktuelles Fenster), "_parent" (Elternfenster), "_top" (oberste Fensterebene) sowie Namen von Fenstern erlaubt, die z.B. mit JavaScript geöffnet wurden.
Moderne Browser unterstützen den Anwender von sich aus bei der Formulareingabe, indem sie Auto-Vervollständigung anbieten.
Mit der Angabe autocomplete="off" im einleitenden <form>-Tag können Sie diese Browser-Funktionalität per Default für alle Eingabefelder im Formular ausschalten. Die andere mögliche Angabe, autocomplete="on" (Autocomplete einschalten), ist die Voreinstellung.
Wenn Sie autocomplete="off" im einleitenden <form>-Tag verwenden, können Sie die Funktion in einzelnen Eingabefeldern des Formulars dennoch wieder mit autocomplete="on" einschalten. Umgekehrt können Sie autocomplete="off" auch nur in den Eingabefeldern notieren, in denen Sie die Auto-Vervollständigung nicht wünschen.
HTML5 bietet eine ganze Reihe neuer Eingabefeldtypen an, die bestimmte Werte erwarten. Beispielsweise Datumsangaben oder nummerische Werte. Ein HTML5-fähiger Browser wird bei nicht plausiblen oder unerlaubten Eingaben in solchen Feldern das Versenden des Formulars verhindern. Wenn Sie jedoch besondere Gründe haben, die Fehleingaben trotzdem zu übertragen, können Sie im einleitenden <form>-Tag das Standalone-Attribut novalidate notieren.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.