Protokoll zu Formularen

Hier wird es etwas ausführlicher um Formulare gehen. Diese werden (Spoiler!) den Hauptteil der zweiten praktischen Prüfung darstellen. Von daher lohnt es sich, sich das Protokoll aufmerksam durchzulesen. #winkmitdemzaunpfahl

Was ist überhaupt ein Formular und wie ist es aufgebaut?
Formulare sind nichts anderes als Eingabefelder für Daten. Sie begegnen uns als Suchfelder, Kontaktformulare, bei Kommentarfunktionen, beim Buchen eines Hotelzimmers und natürlich direkt bei Google. An all diesen (und natürlich noch sehr viel mehr) Stellen im Netz werden Formulare eingesetzt.

Die Grundstruktur ist dabei recht simpel.

Mit <form> wird ein Formular eröffnet und mit </form> geschlossen. Alles, was dazwischen steht, gehört irgendwie dazu. Eingabefelder werden nach dem Schema:

<input type=“text“ id=“testtext“ name=“testtext“ placeholder=“Bitte hier den Testtext eintragen“ required>

aufgebaut. Dabei steht input dafür, dass man es hier überhaupt mit einem Eingabefeld zu tun hat. Der type sorgt dafür, dass der Browser versteht, welcher Art die Eingabe sein soll. Für type stehen eine ganze Reihe verschiedener Optionen zur Verfügung. Zum Beispiel text für normalen Text, number für Zahlen, date für die Eingabe eines Datums (je nach Browser sogar mit schickem grafischen Kalender), email für E-Mailadressen oder url für Webadressen. Und es gibt noch ein paar mehr.

Die Bestimmung des Typs ist wichtig, wenn z.B. vom Browser überprüft werden soll, ob im email-Feld auch ein @-Zeichen eingetragen wurde. Wird hier der Typ email verlangt, muss ein @ enthalten sein. Der Browser prüft indes nicht, ob die eingegebene Mailadresse an sich gültig ist. Dafür müsste man auf externe Skripte ausweichen.

Die id benötigen wir, wenn wir das spezielle Eingabefeld per CSS gestalten wollen und für das label (siehe unten). Das Namenfeld name wird später wichtig, wenn eine Mail mit den eingegebenen Formulardaten an uns geschickt wird. Dann wird nämlich hinter dem name des Feldes der Wert angezeigt, den ein Besucher z.B. ausgefüllt hat.

Der placeholder ist in der Tat ein Platzhalter. Dieses Feld legt fest, was in einem Eingabefeld steht, wenn noch nichts eingetragen wurde. Klingt paradox, begegnet und aber quasi überall. In vielen Suchfeldern steht „Suchen“, bevor man selbst etwas eingibt. Das ist der Placeholder.

Der Parameter required bestimmt, ob es bestimmtes Feld ausgefüllt werden muss. Ist required nicht gesetzt, ist es dem Browser egal, ob in dem Feld eine Eingabe gemacht wurde – er wird das Formular trotzdem absenden. Ist required aber gesetzt, wird für das Feld eine Eingabe erwartet. Sinnvoll ist das natürlich bei der E-Mailadresse oder dem eigentlichen Anfragetext.

Felder benennen
Mit dem <label>-Feld wird die Benennung eines Eingabefeldes definiert.

Die Struktur sieht hier wie folgt aus: <label for=“hier steht die id des eingabefeldes“>Hier steht der sichtbare Text</label>. Anhand des id-Feldes weiß das Label quasi, zu welchem Feld es gehört. Soll das label über dem Eingabefeld stehen, muss es das auch im HTML tun. Nur so als Tipp.

Uunnnd … Action!
Neben der Eingabe von Daten soll ein Formular ja noch eine zweite Aufgabe erfüllen – nämlich mit den eingegebenen Daten irgendwas machen. Das kann z.B. das Versenden einer E-Mail an eine spezifizierte Adresse sein oder das Schreiben der Informationen in eine Datenbank, wie es z.B. bei einem Kommentar der Fall wäre.

Eine action wird nach diesem Schema eingebunden:

<form id=“kontaktformular“ action=“kompletter Link zu einem (externen) Skript“ method=“post“>

Damit weist man das Formular an, nach Klick auf den submit-Button (weiter unten) eine bestimmte Sache zu tun – nämlich die Daten an das Skript zu übergeben. Damit das Skript zum Beispiel eine Mail versenden kann, muss man ihm evtl. noch eine weitere Information mitgeben, nämlich die Adresse. Das hängt aber vom aufgerufenen Skript ab. Bei selbst erstellen Funktionen ist das wahrscheinlich nicht nötig, weil die Mailadresse dann an anderer Stelle definiert wird. In unserem Fall sieht die Zeile aber so aus:

<input type=“hidden“ name=“empfaenger“ value=“meine E-Mailadresse, an die das Kontaktformular geschickt werden soll“>

Hier wird dem Formular quasi ein bereits ausgefülltes Feld mitgegeben (im value steht ja bereits was drin), welches aber mittels hidden nicht auf der Seite angezeigt wird. Denn wir möchten ja nicht, dass der Ausfüller die Mailadresse für den Versand ändern kann.

Im Allgemeinen werden bei einer Action php-Dateien oder *.cgi-Dateien aufgerufen, die mit den eingegebenen Daten irgendwas anstellen.

Eingabefelder konfigurieren mit pattern
Um eine bestimmte Logik der Eingabe in ein Feld zu erzwingen, kann mit dem pattern-Befehl festgelegt werden, dass die Eingabe zum Beispiel so aussehen muss: fünf Zahlen, dann ein / und dann sechs Großbuchstaben. Warum? Weil es manchmal nötig ist, dass derjenige, der ein Formular ausfüllt, sich an ein bestimmtes Muster hält. Zum Beispiel, wenn mit den Eingaben in einer Datenbank gesucht werden soll.

pattern wird dabei einfach in die Zeile des Eingabefeldes geschrieben. Ein Beispiel:

<label for=“plz“>PLZ:</label>
<input type=“text“ id=“plz“ pattern=“[0-9]{5}“ name=“plz“ placeholder=“ PLZ“>

Im Beispiel erzwingt das pattern eine Eingabe von fünf Zahlen, nicht mehr, nicht weniger und auch wirklich nur Zahlen. Die eckigen Klammern bestimmen, was eingegeben werden darf (0-9 heißt alle Zahlen von 0 bis 9, A-Z hieße alle Großbuchstaben, a-z hieße alle Kleinbuchstaben), die geschwungene Klammer dahinter definiert die erlaubte Zeichenanzahl. Mit der Eingabe von [/] ist es z.B. auch möglich, die Eingabe eines / an einer bestimmten Stelle zu erzwingen. Sinnvoll ist es dann, im Label des Eingabefeldes darauf hinzuweisen, wie die Eingabe erfolgen soll. Woher soll der Besucher das sonst wissen?

Radiobuttons und Checkboxen
Neben den Eingabefeldern für Text, Zahlen, Daten, Mailadressen etc. werden in Formularen auch sehr oft Radiobuttons (das sind die runden) und Checkboxen (das sind die eckigen) eingesetzt. Unterschied: Bei Radiobuttons wird von Haus aus nur eine Einfachauswahl unterstützt (es lässt sich in einer Liste von Radiobuttons also genau einer anklicken), während Checkboxen eine Mehrfachauswahl erlauben (hier geht also von „nichts wird ausgewählt“ bis „alles wird ausgewählt“ alles).

So sieht das HTML-technisch aus:

<p>Welche Farbe wünschen Sie?<br>
<input type=“radio“ name=“eingabe“ value=“rot“ checked> Rot<br>
<input type=“radio“ name=“eingabe“ value=“grün“> Grün<br>
<input type=“radio“ name=“eingabe“ value=“gelb“> Geld<br>
<input type=“radio“ name=“eingabe“ value=“blau“> Blau<br>
<input type=“radio“ name=“eingabe“ value=“schwarz“> Schwarz<br>
<input type=“radio“ name=“eingabe“ value=“weiß“> Weiß
</p>

Der type=radio legt fest, dass wir es mit Radiobuttons zu tun haben. Die <br>-Tags sind dafür da, dass jeder Button eine eigene Zeile aufmacht.

Analog bei Checkboxen:

<p>Welche Sonderfunktionen wünschen Sie?<br>
<input type=“checkbox“ name=“opt“ value=“vierfarb“> Vierfarbdruck<br>
<input type=“checkbox“ name=“opt“ value=“abnahme“> Voransicht zur Abnahme<br>
<input type=“checkbox“ name=“opt“ value=“oekodruck“> Ökodruck<br>
<input type=“checkbox“ name=“opt“ value=“hochglanz“> Hochglanz<br>
</p>

Der Senden-Knopf
So, das Eingeben von Daten haben wir uns angeschaut. Wie werden denn nun die Daten tatsächlich gesendet? Dafür nutzen wir eine „submit“-Funktion:

<input type=“submit“ value=“Absenden“>

Ja, das war’s eigentlich schon. Stylen kann man den Button, wenn man ihn z.B. in ein div packt. Der Browser erstellt aus der Basisversion erst mal eine klickbare Schaltfläche, die die Daten absendet. Wie der Button genau aussieht, legt der Browser fest.

So, das soll erst mal reichen. Gegebenenfalls ergänze ich noch.