Formulare sind für eine Internetseite äußert nützlich und teilweise sogar notwendig. Eine Suche, ein Kontaktformular, eine Anmeldung bzw. ein Login oder einfach nur eine Umfrage. Ohne Formulare wäre diese Dynamik unmöglich. HTML bietet diesbezüglich viele nützliche Funktionen, dennoch gibt es ein Problem. Mit HTML lassen sich Formulare nicht auswerten. Es bietet eine große Vielfalt an Eingabefeldern und zusammen mit CSS eine große Gestaltungsmöglichkeit, aber das Auswerten erfolgt über JavaScript, PHP oder andere diverse Skriptsprachen. Ich werde hier nicht in die Auswertung eingehen. Ich werde lediglich erklären, wie Formulare aufgebaut werden sollten, die Auswertung dennoch berücksichtigend. Die Auswertung wird in naher Zukunft auf einfachPHP.de besprochen.
Navigation
1. Grundlagen
Es gibt für das Öffnen eines Formulars gewisse Vorgaben bzw. einige Dinge müssen für die spätere Auswertung ( des Formulars ) mit angegeben werden. Eingeleitet wird ein Formular mit <form>…</form>. Dafür gibt es gewisse Attribute, die angegeben werden müssen oder sollten. Als erstes method=”", für dieses Attribut gibt es zwei Parameter, GET und POST. Standardmäßig ist GET gesetzt, dennoch sollte man dieses Attribut immer angeben. Der Unterschied zwischen GET und POST liegt in der Übertragung der Daten zur Auswertung. Bei GET werden die Angaben in dem URL übergeben und sind meist auf ca. 2000 Zeichen beschränkt. Bei POST werden die Variablen im Hintergrund übertragen. Im Normalfall empfehle ich immer POST zu verwenden. GET-Parameter müssen meist extra abgesichert werden und sind nur nützlich, falls ein Formular über mehrere Seiten geht oder nur zu Dynamik einer Seite beitragen, z.B. falls eine Suche auf mehreren Seiten angezeigt werden soll oder ein Artikel auf mehrere Seiten aufgeteilt werden soll. Meist steht dann oben in dem URL so etwas wie: ?p=2. POST-Variablen werden über den Server verarbeitet und weitergeleitet. Ein weiterer Parameter sollte auch noch angegeben werden accept-charset=”". Mit diesem lässt sich festsetzten, wie die Zeichen codiert sind. Da es bei Umlauten öfters zu Problemen kommen kann, sollte man am besten UTF-8 nehmen, da dieses alle gängigen Zeichen unterstützt. Zudem sollte man noch einen Namen setzen, falls mehrere Formulare auf einer Seite sind oder mehrere über ein Skript ausgewertet werden. Ein Beispiel sähe so aus:
<form method="POST" action="contact.php" name="Kontaktformular" accept-charset="UTF-8"> .... </form>
2. Der Eingabebereich
Um in einem Formular etwas einzugeben oder anzugeben, braucht man verschiedene Bereiche. Dafür gibt es drei verschiedene Elemente, das Input-Feld, die Select-Auswahl und einen Textbereich.
2.1 Input
Die meisten Eingabefelder lassen sich über einen Befehl aufrufen: <input />. Dieser wiederum benötigt auch einige Attribute. Durch diese legt man unter anderem fest, was für ein Eingabetyp es sein soll. Das Attribut dazu heißt type=”". Die Parameter dazu wären: text, password, checkbox, radio, submit, reset, file, hidden, button. Jedes Input-Feld sollte einen eineindeutigen Namen haben, da diese später für die Auswertung benutzt werden.
2.1.1 Text:
Textfelder werden für viele verschiedene Eingaben benutzt, beispielsweise Login-Name, Name, E-Mail, Adresse. Textfelder werden für alle normalen Eingaben benutzt. Mit dem Attribut size=”" wird die Größe des Textfeldes festgesetzt und mit maxlength=”[Zahl]” wird die maximale Anzahl zulässiger Zeichen festgelegt, außerdem lässt sich mit dem Attribut value=”" ein Text vorlegen.
2.1.2 Passwort:
Passwortfelder maskieren zudem den Text, sodass dieser nicht sichtbar ist. Zudem kann aus Passwortfeldern nichts kopiert werden. Auch bei diesem Element kann man mit size, maxlength und value gearbeitet werden, wobei maxlength in diesem Fall Unsinn wäre und value auch keinen großen Nutzen hätte.
» Zurück nach oben
2.1.3 Checkbox:
Checkboxen kann man gut für Multiple-Choice Abfragen benutzen. Damit dies später gut ausgelesen werden kann, können mehrere Checkboxen den gleichen Namen haben, müssen aber verschiedene Values gesetzt bekommen. Das Attribut checked wählt eine Box im Vorfeld aus. Dieses Attribut steht alleine und ohne Definition.
<input type="checkbox" name="agb" value="AGB" checked />Haben Sie die AGB gelesen ?
2.1.4 Radio:
Die Radio-Auswahl hat den Sinn, dass man nur ein Feld auswählen kann. Um dies zu ermöglichen muss man hier auch jedem zusammenhängenden Radio derselbe Name gegeben werden. Zudem sollte man auch hier einen Value setzen und das Attribut checked kann man hier auch auswählen, wobei dieses natürlich auf ein Input beschränkt sein sollte.
» Zurück nach oben
2.1.5 Submit:
Mit dem Submit-Button lässt man die Eingabe bestätigen. Dieser springt dann zu dem jeweiligen Skript, was als action in <form> angegeben ist und führt dieses aus. Der Submit-Button lässt sich auch einen Value setzen, in diesem Fall wäre das “Formular absenden”.
» Zurück nach oben
2.1.6 Reset:
Mit Reset lassen sich alle Angaben zurücksetzen und die Formular-Felder leeren. Mit Value lässt sich hier auch eine Anzeige festlegen
2.1.7 File:
Mit dem File-Feld lassen sich Dateien mit dem Formular senden. Als erstes ist dafür zu beachten, dass man in <form> noch eine Ergänzung vornehmen muss: enctype=”multipart/form-data”. Ansonsten wird nur der Dateiname übermittelt und nicht die Datei selber.
Die gängigsten Haupt MIME-Typen wären:
Dateityp
Text
Grafiken
Video
Audio
div. Dateien
mehrteilige Dateien
MIME-Typ
text
image
video
audio
application
multipart
Um die Dateien zu begrenzen, gibt es das Attribut accept=”". In diesem Attribut wird ein MIME-Typ festgelegt, mit diesem lässt sich die Möglichkeit etwas hochzuladen, einschränken. Wenn man zum Beispiel alle Grafik-Typen zulassen will muss man angeben accept=”image/*”. Das elbe auch bei den anderen Typen. Für alle Dateitypen muss immer /* angehängt werden oder es muss spezifiziert werden. Beispiel: accept=”application/zip” lässt nur .zip-Archive zu. Weitere MIME-Typen lassen sich im Netz finden.
2.1.8 Button:
Ein Button an sich hat keine Funktion, diese kann ihm aber mit einem Link oder einer JavaScript Funktion zugewiesen werden. Einem Button sollte man auch mit Value einen gewissen Wert setzen.
2.1.9 Hidden:
Das Hidden-Input-Feld ist etwas anders, als die anderen Input-Felder, denn es ist, wie der Name schon sagt, nicht sichtbar. In einem versteckten Feld kann man Daten über den User hinzufügen. Beispielsweise via PHP die IP-Adresse auslesen und via Hidden-Input übergeben, zusammen mit der Uhrzeit vielleicht, sodass man im Endeffekt abfragen könnte, wann hat diese IP das letzte Mal dieses Formular benutzt und man könnte dies auf drei Anfragen in einer halben Stunde beschränken. Das ist nur eines von vielen Beispielen, mit dem Hidden-Feld ist recht viel möglich.
2.2 Select
Mit Select kann man verschiedene Auswahllisten erstellen, diese können als Dropdown-Liste angezeigt werden oder als scrollbares Auswahlfeld. Zudem kann man noch festlegen, wie viele Reihen angezeigt werden sollen oder ob man mehrere oder nur eine Zeile auswählen kann. Die Optionen zur Auswahl lassen sich auch gruppieren.
Geöffnet wird eine Auswahlliste mit <select> und Optionen werden so deklariert: <option>..</option>. In der Option selbst muss kein Attribut verwendet werden; es nützt lediglich das alleinstehende Attribut selected, um eine bestimmte Vorauswahl zu wählen. In <select> sollte man, wie immer, zuerst einen eineindeutigen Namen setzen. Das Attribut, was die Menge der Zeilen regelt, ist size=”[Zahl]“. Sofern dieses Attribut nicht gesetzt oder mit einer Eins belegt ist, ist es eine Dropdown-Liste. Um eine Mehrfachauswahl zuzulassen, nutzt man das alleinstehende Attribut multipe.
Hier ein paar Beispiele:
2.2.1 Beispiel 1
Code:
<form
<select name="Städte">
<option>Köln</option>
<option>Dortmund</option>
<option>Aachen</option>
<option>Berlin</option>
</select>
</form>
2.2.2 Beispiel 2
Code:
<form>
<select name="Städte" size="3">
<option>Köln</option>
<option>Dortmundd</option>
<option>Aachen</option>
<option>Berlin</option>
<option selected>München</option>
<option>Hamburg</option>
<option>Heidelberg</option>
</select>
</form>
2.2.3 Beispiel Gruppierung
Die Optionen lassen sich zudem mit <optgroup> gruppieren. Mit dem Attribut label=”" setzt man einen Anzeigenamen.
Code:
<form>
<select>
<optgroup label="Städte in NRW">
<option>Köln</option>
<option>Bonn</option>
<option>Aachen</option>
<option>Duisburg</option>
</optgroup>
<optgroup label="Städte in Bayern">
<option>München</option>
<option>Nürnberg</option>
<option>Würzburg</option>
<option>Regensburg</option>
</optgroup>
<optgroup label="Städte in Sachsen">
<option>Dresden</option>
<option>Leipzig</option>
<option>Görlitz</option>
<option>Chemnitz</option>
</optgroup>
</select>
</form>
2.3 Textarea
Mehrzeilige Textfelder sind für Kommentare oder Nachrichten geeignet. Sie können nicht über input definiert werden, dafür gibt es ein eigenes Element <textarea>. Da in diesem Element Text vorgegeben werden kann, wird dieses mit </textarea> geschlossen. Auch diesem Element sollte ein eineindeutiger Name zugewiesen werden. Textfelder haben zwei Pflichtattribute cols=”" und rows=”". Mit cols werden die Spalten einer Zeile festgelegt und mit rows die Anzahl der Zeilen selbst. Dem Textfeld kann auch ein vordefinierter Text eingefügt werden.
Code:
<textarea name="textfeld" rows="10" cols="70">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</textarea>