Formulare werden gebraucht, um Abfragen oder Eingaben zu ermöglichen. Es gibt Emailformulare, Formulare in Warenkorb und Shopanwendungen. Formulare, um Beiträge und Posts in Foren oder Blogs zu ermöglichen, Suchmöglichkeiten und vieles mehr.
Die ausgwählten oder eingebenen Daten kann man unmittelbar mit Javascript auswerten oder serverseitig verarbeiten. Das klassische Beispiel ist, die Formulardaten werden an den Server geschickt und dort verarbeitet. So könnte beispielsweise ein PHP-Script die Daten empfangen und per email-Funktion verschicken, oder mittels mySQL in eine Datenbank eintragen.
Formular Generatoren im Netz
Inhalt diese Seite
<form action="send.php" method="GET" enctype="application/x-www-form-urlencoded"></form>
Ein Formular wird von einem form-Tag umschlossen. Zwischen die Formtags kommen sämtliche Elemente des Formulars (input Felder, Auswahllisten, Checkboxen, Buttons etc.), das können aber auch weitere Elemente sein, wie beschreibende Texte, Bilder oder Multimedia Elemente oder Script Bereiche.
so siehts aus Einfaches Formular
Im einleitenden Formtag können einige wichtige Attribute notiert werden.
Das Attribut action bekommt eine URL-Adresse zugewiesen, an welche die Formulardaten geschickt werden. Das ist im Normalfall ein serverseitiges Script, welches die Formulardaten verarbeitet. Außerdem schickt das Script einen HTML-Inhalt an den Browser. Der Scriptaufruf, der durch das Absenden des Formulars erfolgt, ist auch ein Seitenaufruf, daher sind hier die Regeln der Referenzierung gültig.
action="warenkorb.php"
Es ist möglich dem action- Attribut eine Emailadresse zuzuweisen, um das Formular als Email zu verschicken. Der Erfolg ist hierbei nicht garantiert, denn das hängt von Browser- und Emaileinstellungen auf dem Userrechner ab. Hier wird außerdem noch ein weiteres Attribut für die Zeichenkodierung benötigt: enctype="text/plain"
<form action="mailto:tritra@trulla.la" enctype="text/plain" method="post">
Wenn ein serverseitiges Script verwendet wird, muss eine HTTP Request Methode verwendet werden. Diese wird mit dem Attribut method definiert. Es sind hier 2 Wertzuweisungen möglich. Die Methode GET und POST.
method="POST"
method="GET"
Wenn man die Methode GET verwendet, werden die Daten an die URL-Adresse angehängt. Diese Werte sieht man in der Adresszeile des Browsers. Das könnte beispielsweise so aussehen
...warenkorb.php?artikel=shirt0132&color=red&size=xxl
In diesem Beispiel werden 3 Variablen mit Wertzuweisung an eine Seite warenkorb.php geschickt. artikel=shirt0132, color=red, size=xxl. Die Datenmenge ist bei der GET Methode begrenzt. Bei Suchanfragen kann das jedoch sehr praktisch sein, da man so eine Adresse auch verlinken kann.
Bei größeren Datenmengen sollte man die POST- Methode verwenden. Außerdem sind diese Daten nicht in der Adresszeile einsehbar.
PHP Beispiel mit iframe und Menü
Mit dem name-Attribut hat man die Möglichkeit, dem Formular einen eindeutigen Namen zuzuweisen. Das ist vor allen Dingen dann sinnvoll, wenn man mehrere Formulare auf einer Seite hat. 2 Formulare dürfen nicht den gleichen Namen haben und können somit eindeutig zugwiesen werden. Das name Attribut ist rückwärtskompatibel zu älteren Javascripts. Hat man nur ein Formular wird kein name Attribut gebraucht.
siehe Wikipedia URL-Encoding / Prozentcodierung
Die Daten, die ein User in ein Formular eingibt oder auswählt, können auf verschiedene Weise verschickt oder verarbeitet werden. So werden beispielsweise mit der Methode GET die Daten an eine URL angehängt. In einer Webadresse sind jedoch nicht alle Zeichen erlaubt. Deshalb müssen diese Zeichen encodiert werden, das heißt mit bestimmten Kürzeln umschrieben werden. Nach dem Empfang der Daten werden diese dann decodiert.
Mittels des Attributes enctype können die Daten auf verschiedene Arten encodiert werden.
enctype="application/x-www-form-urlencoded"Die Formulardaten werden standardmäßig mit einem MIME-Type namens application/x-www-form-urlencoded verschickt, damit es keine Probleme in URL-Adressen gibt. Das geschieht, indem alle Zeichen jenseits des ASCII-Codes und alle Zeichen, die in URL-Adressen eine spezielle Bedeutung haben, maskiert werden. Diese sogenannte Prozentcodierung setzt für die Maskierung ein % Zeichen gefolgt von einem Hex-Wert ein, zB. %21 für $
enctype="multipart/form-data"Ein Formular welches aus mehreren Ressourcen besteht, beispielsweise bei Dateiuploads, wird hiermit ausgezeichnet.
enctype="text/plain"Hiermit werden die Formulardaten ohne jede Kodierung übertragen. Man benötigt es in der Regel für die Email- Übertragung. action="mailto:xxx@xxxx.xx"
Die meisten Browser bieten dem User eine Autovervollständigung an. Man kann als Webentwickler mittels des Attributs autocomplete="off" diese Autovervollständigung deaktivieren. Im einleitenden form-Tag hat diese Einstellung Auswirkung auf alle im Formular enthaltenen Elemente. Möchte man für ein einzelnes Element die Autovervollständigung wieder aktivieren, kann man das innerhalb des Elements folgendermaßennotieren: autocomplete="on"
novalidate hat die Bedeutung das auch Fehleingaben übertragen werden. In vielen HTML5 Eingabefeldtypen sind nur bestimmte Wertzuweisungen erlaubt. Bei falschen Angaben verhindern HTML5 fähige Browser den Versand, es sei denn man notiert das Standalone- Attribut novalidate im einleitenden Formtag.
Das folgenden Beispiel können Sie sich herunterladen. Sie müssen beide Dateien auf den Server laden. Die HTML Seite mit Formular verschickt die Daten an die PHP Seite, die PHP Seite verschickt eine Email und zeigt einen Bestätigungstext an, den Sie nach Belieben ändern können.
Sie können das Beispiel erweiteren lesen Sie dazu die Kommentare in der PHP Datei.
Beispiel
Ein größeres Formular kann aus mehreren Teilen oder Gruppen bestehen. Beispielsweise eine Gruppe für die Eingabe der persönlichen Daten, wie Name, Adresse, Telefon, Email etc. eine Gruppe für eine Bestellung, eine Gruppe für das Absenden mit AGB-Zustimmung etc. Für eine derartige Aufteilung stellt HTML das Element fieldset zur Verfügung. Zum fieldset lässt sich noch das legend Element hinzufügen, welches als Überschrift oder Titel dient. Diese Elemente lassen sich mittels CSS formatieren.
<form>
<fieldset>
<legend>Persönliche Daten</legend>
<input...>
<input...>
<input...>
</fieldset>
</form>
Um input-Felder zu strukturieren, kann man diesen ein label- Element zuweisen, welches als Beschriftung dient. Hier gibt es 2 Möglichkeiten das label- Element dem dazugehörigen input- Element zuzuweisen.
<label for="feld_id">Beschriftung</label>
<input id="feld_id" .....><label>Beschriftung
<input...>
</label>In der expliziten Fassung wird mittels des for Attributs ein Bezug, zum id Attribut des input Elements hergestellt. Die implizite Variante basiert auf einer Verschachtelung des input Elements innerhalb des label Elements. Moderne Browser fokussieren beim Klick auf ein Label- Element das dazugehörige Input Element. Mittels CSS kann man die Ausrichtung des label Elements bestimmen.
Beispiel
Beispiel: Strukturiertes Formular mit Fieldset und Label Elementen
Es gibt in HTML eine Reihe von Dialogelementen, wie Eingabefelder, mehrzeilige Eingabefelder, Checkboxen, Radiobuttons, Auswahllisten, Menüs und Buttons. Diese Elemente werden vom Browser zur Verfügung gestellt. Bei einigen kann man das Aussehen mittels CSS sehr stark beeinflussen, bei anderen ist das nicht so gut möglich (z.B. bei Radiobuttons, Checkboxen).
Das Standalone Element input deckt eine Reihe von Einsatzmöglichkeiten ab. Das hängt von dem zugewiesenen Feldtyp ab, den man dem Attribut type zuweist. Das input Element ist kein Blockelement und erzeugt somit auch keine neue Zeile im Textfluss. Es gibt viele Feldtypen, die die Funktionsweise eines input-Feldes bestimmen. type="submit", type="tel" type="date" type="email" type="password" type= "radio" Siehe dazu diese Seite HTML5 type für input Felder
Mit der Wertzuweisung type="text" wird ein einzeiliges Textfeld erzeugt.
| Attribut | Bedeutung |
|---|---|
| type | Mit dem Standardwert type="text" wird ein einfaches einzeiliges Textfeld erzeugt. |
| name | Das Attribut name sollte nicht fehlen, denn wenn das Formular verschickt wird, werden die Daten nach dem Schema name=Wert versand. Wenn beispielsweise im folgenden Formularelement der Name "Horst" eingegeben wurde, erhält das Script folgende Daten vorname=Horst<input name="vorname" type="text> |
| size | Mit dem size-Attribut kann man die angezeigte Feldlänge eines einzeiligen Textfeldes bestimmen. Dabei entspricht die ganzzahlige Wertzuweisung der Anzahl der Buchstaben, die angezeigt werden ohne zu scrollen.
|
| maxlength | Das Attribut maxlength erwartet auch einen ganzahligen Wert. Dieser entspricht der maximalen Anzahl der Buchstaben, die eingegeben werden können. Man sollte sich in Script jedoch nicht auf diese Grenze verlassen.
|
| minlength | Mittels eines ganzzahlingen Wertes gibt minlength die Mindestanzahl der Zeichen an, die der User eingeben muss. |
| placeholder | Mit dem Attribut
|
| value | Mit dem Attribut value kann man die Eingabe vorbelegen. Der dort vergebene Wert erscheint als vordefinierte Eingabe.
|
| required | Das Standalone Attribut required macht das Eingabefeld erforderlich / Pflichtfeld. Beim Abschicken markiert der Browser diese Felder, wenn keine Eingabe gemacht wurde. |
| pattern | Mit dem pattern Attribut, kann man reguläre Ausdrücke definieren, um die Eingabe darauf zu überprüfen.
Ein regulärerer Ausdruck ist eine Sprache, die auch in Programmiersprachen oder Suchfeldern zum Einsatz kommt. Das pattern Attribut kann man nutzen in input-Feldern mit type: text, search, url, tel, email, und password. |
Mittels textarea erstellt man ein mehrzeiliges Eingabefeld. Hier kann man reinen Text eingeben. Es ist nicht möglich formatierten Text zu bearbeiten. Es ist kein Standalone-Element. Man kann innerhalb des Gültigkeitsbereich vorbelegten Texteinfügen.
<textarea>Bitte ausfüllen</textarea>
Folgende Attribute sind möglich
| Attribut | Bedeutung |
|---|---|
| name | selbstvergebenen Bezeichnername eingeben |
| rows | Ganzahl Anzahl der angezeigten Reihen, Höhe, besser ist hier CSS |
| cols | Ganzzahl Anzahl der Zeichen oder Spalten, Breite, besser ist hier CSS |
| maxlength | Anzahl der maximal zulässigen Zeichen |
| value | Im Gegensatz zum einzeiligen input Feld, wird der Text innerhalb des Gültigkeitsbereichs des Textarea Feldes vergeben. <textarea>vorbelegter Text</textarea> |
input type="radio"
Radiobuttons stellen eine zusammenhängede Gruppen von Knöpfen dar, von denen jeweils nur eine aktivierbar ist. So kann man beispielsweise aus einer Liste von Farben, die gewünschte Farbe eines Produktes auswählen.
Eine zusammenhängede Gruppe wird durch das Attribut name bestimmt. Alle Radiobuttons, die dort die gleiche Wertzuweisung haben gehören zu einer Gruppe. name="farbe"
<form> <input type="radio" name="farbe" value="rot"> rot <br> <input type="radio" name="farbe" value="blau"> blau <br> <input type="radio" name="farbe" value="gelb"> gelb <br> </form>
input type="checkbox"
Checkboxen funktionieren ähnlich wie Radiobuttons, man kann sie aktivieren oder deaktivieren. Im Gegensatz zu Radiobuttons hat man hier die Wahl, entweder eine Gruppe von checkboxen zu bilden, oder jeder checkbox einen eigenen Namen zuzuweisen. Bildet man eine Gruppe von Checkboxen so lassen sich hier auch mehrere Checkboxen aktvieren.
Im folgendem Beispiel wird unter einem Namen alles übertragen, was ausgewählt wurde. Hier sollte man hinter dem Namen [] eckige Klammern schreiben, um den Empfang der Daten mittes einer Programmierung zu vereinfachen.
<form> <input type="checkbox" name="zimmer[]" value="raucher"> Raucher <br> <input type="checkbox" name="zimmer[]" value="bar"> Minibar<br> <input type="checkbox" name="zimmer[]" value="doppel"> Doppelzimmer <br> <input type="checkbox" name="zimmer[]" value="tv"> Fernseher </form>
Im folgendem Beispiel wird jeweils ein anderer name Wert verwendet und auf das value Attribut verzichtet. Nur die ausgewählten Elemente werden übertragen.
<form> <input type="checkbox" name="gruen"> grün <br> <input type="checkbox" name="rot"> rot<br> <input type="checkbox" name="blau"> blau <br> </form>
<label><select><option></option></select></label>
Mit select-Elementen (Auswahllisten, DropDown-Felder) hat der User die Möglichkeit eine oder mehrere Optionen aus einer vordefinierten Liste auszuwählen. Die ausgwählten Werte werden nach Absenden des Formulars übertragen. Auf Smartphones wird so eine Auswahlliste sie oft anders dargestellt als im Browser, ähnlich wie eine Liste mit Radio Buttons.
<label for="promi">Promi</label>
<br>
<select name="favoriteStar[]" id="promi">
<option value=" ">--bitte auswählen--</option>
<option value="che">Che Guevara</option>
<option value="pius">Papst Pius</option>
<option value="hase">Osterhase</option>
<option value="alice">Alice Cooper</option>
<option value="peter">Peter Alexander</option>
</select>
Durch das select- Element wird eine Liste definiert.
<select></select>
Ein label Element sollte man einem select Element zuweisen. Es ist ein semantisches Element, welches auch für Screenreader sehr wichtig ist. Am label erkennt man, um was für eine Auswahlliste es sich handelt.
<label>Weine<select>.....</select></label>
Hier ein Beispiel mit Mehrfachauswahl durch das Attribut multiple. Außerdem werden 4 Elemente auf einmal angezeigt durch das Attribut size="4"
<select name="weine[]" multiple size="4">....</select>
Ein Eintrag innerhalb einer Liste wird durch option- Elemente definiert. Das option Element benötigt ein value Attribut mit einer Wertzuweisung, welche bei Auswahl übertragen wird.
<option value="burgund">Burgunder</option> <option value="ries">Riesling</option> <option value="rohne">Rohne</option>Eine Vorselektierung kann man durch das standalone Attribut
selected erreichen.
<option selected value="3">
Wenn in einer select- Auswahlliste nur ein Element beim Aufruf angezeigt wird (kein size Attribut oder size="1") und der Nutzer nichts auswählt, wird das erste Element übermittelt. Dadurch entsteht ein Problem, wenn das erste Element übermittelt wurde, weiß man nicht, ob der Nutzer es ausgewählt hat oder ob es übermittelt wurde, weil der Nutzer nichts ausgewählt hat. Daher kann man das erste Element folgendermaßen erstellen.
<option value=" ">--Bitte auswählen--</option>
So wird nur ein Leerzeichen übermittelt wenn der Nutzer nichts ausgewählt hat. Oder mit anderen Worten, wenn das erste Element übermittelt wurde, wurde nichts ausgewählt.
Wenn man innerhalb einer Auswahlliste mehrere Gruppen von Einträgen definieren will, so schießt man die option Elemente in das Element optgroup ein. Die Überschrift der Gruppe wird dem label Attribut von optgroup zugewiesen. Nicht zu verwechseln mit dem label Element, siehe oben.
<optgroup label="Deutsche Weine"> <option value="Mosel">Mosel</option> <option value="Riesling">Riesling</option> <option value="Rheinwein">Reihnwein</option> </optgroup> <optgroup label="Französiche Weine"> <option value="burgund">Burgunder</option> <option value="Sourbonne">Sourbonne</option> <option value="rohne">Rohne</option> </optgroup>
Comboboxen oder Kombinationsfelder sind Hybrid-Elemente zwischen Auswahllisten und Eingabefeldern. Diese Möglichkeit besteht seit langem, aber erst seit HTML5 gehört sie zum Standard. Durch Doppelklick in so ein Feld erscheinen die vorgegebenen Werte.
<form >
<input type="text" name="bundesliga" list="liga">
<datalist id="liga">
<option value="bvb">
<option value="hsv">
<option value="Schalke 04">
</datalist>
</form>
Folgendermaßen wird eine Combobox erzeugt. Man erzeugt ein einzeiliges Textfeld und weist diesem das Attribut list zu. Dem list Element wird der gleiche Wert zugewiesen, dem das folgende datatlist Element als id bekommt. So wird der Bezug zur datalist hergestellt. Die Werte werden den value Attributen der option Elemente zugewiesen, die hier als Standalone Elemente innerhalb der datalist eingefügt werden.
Mit <input type="file"> wird dem User die Möglichkeit gegeben eine Datei aus seinem Dateisystem auszuwählen. Die Datei kann dann beispielsweise mit eine Script gespeichert werden.
Um einen Dateiupload zu ermöglichen folgende Wertzuweisungen bei den Attributen method und enctype erforderlich.
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="bild" accept="image/*"> <input
| Attribut | Bedeutung |
|---|---|
| name | Auch Datei-Upload- Felder benötigen einen Bezeichnernamen, der bei einer Mehrfachauswahl mit eckigen Klammern schließen sollte name="bilder[]" |
| multiple | Durch das standalone Attribut multiple kann man mehrere Dateien auswählen. |
| accept | Wenn man nur bestimmte Dateitypen zulassen will, kann man dem Attribut accept einen Mime-Type zuweisen. Mit dem Mime Type wird ein Dateityp bestimmt nach dem Schema: typ/subtyp. Auf der Website des zuständigen Vereins IANA findet man eine Liste aller Mime Types. Man kann im Wert des Accept Attributes auch ein Wildcardzeichen * bei Subtypen nutzen |
input type="hidden"
In Formularen kann es vorkommen, das bestimmte Daten verschickt werden sollen, die von einem Script generiert werden und für den User nicht sichtbar sind. Das kann beispielsweise die id einer Datenbankzelle sein, um die Daten eindeutig zuweisen zu können.
Man verwendet hier das Attribut type="hidden". Wie üblich wird name und value Wert in der Kombination name=value versendet.
<input type="hidden" name="user" value="herbert">
so sieht's aus
Buttons oder Schaltflächen werden zum Abschicken oder Zurücksetzen des Formulars benötigt. Desweiteren gibt es noch Scripting Buttons die eine beliebige Javascript Aktion auslösen können.
Die Buttons werden über das Attribut type eines input- Feldes definiert. Die Beschriftung auf dem Button wird dem value Attribut zugewiesen
<input type="submit" value="Senden">
<input type="reset" value="Abbrechen">
<input type="button" value="Senden">
Es gibt noch eine weitere Möglichkeit Submit- Buttons als Grafik- Buttons zu definieren und zwar durch die Wertzuweisung type="image". Der Button funktioniert genauso wie der submit-Button und verschickt das Formular. Auch ein alt Attribut ist möglich, welches wie beim image Element einen Fallback Text enthalten sollte, sofern die Grafik nicht erkannt wird.
<input type="image" src="send.gif" alt="Versenden">
Anstatt das input Element für einen Button zu verwenden kann man auch das button-Element verwenden. Es ist jedoch kein Standalone Element. Im Gültigkeitsbereich zwischen den Button-Tags kann man Text und auch Bilder einfügen. Das value Attribut bestimmt hier den Absendewert. Wie beim input Element definiert man mit dem Attribut type die Art des Buttons.
type="submit", type="reset", type="button"
<button type="submit">Senden</button>
Man kann Formularen mehrere Submit Buttons zuweisen. Das Script beispielsweise ein Php-Script kann dann auswerten, welcher Button angeklickt wurde. Denkbar wäre so eine Anwendung bei einem Newsletter.
Dort gibt man seinen Namen ein und wählt dann entweder den Button aus, um sich für den Newsletter anzumelden oder den Newsletter abzubestellen.
Das Script wertet den Button über den Wert des value Attributs aus. Eine weitere Möglichkeit besteht darin, jedem Button ein anderes Script zuzuweisen.
<input type="submit" value="Abmelden" formaction="news_abmelden.php" formmethod="post">
<input type="submit" value="Anmelden" formaction="news_anmelden.php" formmethod="post">
In diesem Beispiel enthält das form Element keine Attribute action und method. Auch die übrigen Attribute, welche man form Elementen zuweist lassen sich durch entsprechende Attribute in submit Buttons ersetzten
| input Button | form |
|---|---|
| formaction | action |
| formmethod | method |
| formenctype | enctype |
| formtarget | target |
| formnovalidate | novalidate |
Mit HTML5 ist es möglich auch Felder außerhalb des umschließenden Form- Tags zu notieren, die sich auf das Formular beziehen. Dazu muss innerhalb des einleitenden form-Tags das Attribut id mit einem dokumentweit eindeutigen Namen vergeben werden. Das input-Element welches dem Formular zugewiesen werden soll, bekommt das Attribut form mit dem Wert der id des form- Elements.
<form id="emailform" .....> weitere Felder ... </form> Ein Feld irgendwo auf der Seite außerhalb des Formulars <input form="emailform" type="text" name="vorname">
Hier zeige ich euch ein Beispiel für ein dynamisches Formular. Das bedeutet, dass bestimmte Fomularelemente nur angezeigt werden, wenn in einem anderen Auswahlfeld eine Vorauswahl getroffen wurde.