Formulare

Einführung

HTML-Formulare brauchen immer eine „Gegenstelle“ auf dem Server, der sie die eingegebenen Daten übergeben können. Zwar kann man die Formulardaten auch mit JavaScript weiterverarbeiten, doch irgendwann müssen sie gespeichert werden. Deshalb benötigen wir zum Testen des folgenden Beispiels einen lokalen oder entfernten Webserver (s.Anhang XAMPP).

Referenz: Formulare in SelfHTML.

Neue Tags

Folgende Tags existieren für Formulare:

Die einzelnen Tags haben recht vielfältige Attribute:

form

GET und POST sind Verfahren um die Werte von Formularen an eine Auswerteseite zu übergeben. GET versendet die Werte in der URI (name.html?variable=wert) und kann so etwa bis zu 200 Zeichen übergeben. GET ist schneller als POST.

POST versendet die Werte über die Standardeingabe (also direkt). Die Werte erscheinen so nicht in der URI und werden damit nicht in den Log-Dateien des Servers gespeichert. Außerdem sind Passwörter nicht zu sehen.

Get und Post in SelfPHP

label

<label for="FeldID"> bezeichnet ein Eingabefeld. Dies kann zwar auch mittels normalen HTML erfolgen, aber <label> ist barrierefrei und besser mit CSS zu händeln.

input type="…"

Beispiel

Dateien: kontakt.html, antwort.php formular.css

Beachten sie, dass dieses Beispiel nur auf einem Webserver funktioniert! Sie sehen schon an der Dateiendung ".php", das es sich bei der Antwortdatei (antwort.php) um ein Serverskript handelt.

Ähnlich wie bei Javascript können sie viele freie PHP-Skripte im Netz finden und benutzen. Selbst die meisten großen Webanwendungen wie Conten Management Systeme und Shops sind im Endeffekt PHP-Skripte.

Neben PHP existieren noch andere Sprachen für Server. Klären sie mit ihrem Provider, welche ihr Hostingangebot unterstützt. (s. Webserver)

Kontaktseite

form span input { display:none }

Blendet das <input>-Tag, welches von einen <span> umgeben ist, aus. Dieses erste Feld sollte leer bleiben und ist eine Falle für Spammer, welche über das Formular automatisch Werbung verschicken wollen.

label { display: inline-block; width: 12em;

Wandelt das <label>-Tag in ein gemischtes "inline-block"-Element um, um ihn eine Breite (width) zuordnen zu können. So müssen die einzelnen Eingabefelder nicht in einer formatierenden Tabelle angeordnet werden.

.ak { border-bottom: 0.1em solid blue; }

Formatierung um Tastenkürzel (analog zu Windows) per Unterstreichung hervorzuheben. Firefox ruft die Tastenkürzel mit Shift + Alt + Tastenkürzel auf.

function checkFields ()

Diese JS-Funktion prüft die Eingabefelder Name, Email und Nachricht auf Eingaben und verweigert sonst das Abschicken des Formulars (return false;).

<form name="Contact" action="kform.php" method="post" onsubmit="return checkFields();">

Das Formular ruft beim Abschicken die Datei "kform.php" auf. Vorher prüft die JS-Funktion "checkFields()" die Eingabefelder.

<span><input …>

Markierung für das ausgeblendete Spamfeld (s.o.).

… <span class="ak">N</span>ame … <input accesskey="n"

Hervorheben des Tastenkürzel (s.o.)

maxlength="70" size="47"

Es dürfen höchstens 70 Zeichen eingegeben werden und das Eingabefeld ist 47 Zeichen breit.

<input type="radio" name="rbtn" checked="checked" …>

<input type="radio" name="rbtn"
<input type="radio" name="rbtn" ))
Diese Umschalteauswahl (Radiobutton) mit drei Schaltern erlaubt nur jeweils eine Auswahl. Die Zusammengehörigkeit der Felder erfolgt über den gleichen Namen. Das Attribut checked="checked" belegt diesen Schalter vor.

<input name="cbx[…]" type="checkbox" …>

Diese Mehrfachauswahl (Checkbox cbx[1]-cbx[5]) mit fünf Schaltern erlaubt eine beliebige Auswahl. Die Zusammengehörigkeit der Felder erfolgt über den gleichen Namen. (Anmerkung: Die eckigen Klammern definieren ein Array für PHP).

<select> <option>

Definition einer Auswahlliste.

<textarea cols="56" rows="13">

Definition eines Eingabebereichs mit der Größe 56*13.

<input type="reset" …>

Schalter zum Leeren (reset) und Abschicken (submit) des Formulars.

Antwortseite

PHP-Dateien werden auf dem Server interpretiert. Dieser liefert dann die interpretierte Datei als reine HTML-Datei aus. PHP-Code ist deshalb auf dem Client niemals zu sehen.

Ich gehe hier kurz auf den PHP-Code ein, damit sie eine Vorstellung bekommen, wie dieser Aussieht. Beachten sie das PHP und Javascript zwei völlig verschiedene Sprachen sind, auch wenn hier zur Unterscheidung von HTML die selbe Farbe eingesetzt wird!

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>

Die Kennung "<?php *..* ?>" leitet einen PHP-Skriptteil innerhalb einer HTML-Datei ein. Allerdings muss die Datei dazu vom Webserver als PHP-Datei erkannt werden (Endung: PHP). Da "<?xml … ?>" auch mit "<?" anfängt, wird es hier per echo in die HTML-Datei ausgegeben.

<a href="javascript:history.back();">

Entspricht der Funktionalität des Browser-Schalters "Zurück".

$mymail='buch@example.com';

Hier muss ihre Email-Adresse stehen.

$pname= $_POST['name'];

Variablen beginnen in PHP immer mit "$". Die Funktion $_POST[] übergibt per POST übertragene Werte. Bei der Checkbox wird ein komplettes Array übergeben ($pcheck['1'] - $pcheck['5']).

die('Meldung');

Beendet (die - stirb) das PHP-Skript an dieser Stelle.

$msgbr=nl2br($pmsg);

Die Funktion nl2br() wandelt Zeilenumbrüche in <br /> um.

$mx=<<<cb
…
cb;

Der Operator "<<<" liest die nächsten Zeilen in eine Variable ein, bis er die Endekennung (hier "cb") findet. Die Endekennung muss immer in der ersten Zeile stehen!

mail()

Die Funktion mail() verschickt eine Mail über einen Mailserver (MTA). Wenn ein solcher nicht installiert ist, kommt es zu einem Fehler.

Anpassung

Wenn sie das Mailformular auf ihrer Seite verwenden wollen, benötigen sie sicherlich nicht alle Formularfelder. Wenn sie nun Felder in der HTML-Datei löschen, müssen sie diese auch in der PHP-Datei entfernen.

Suchen sie dazu unter dem Kommentar //Hole alle Inhalte der Formularfelder das entsprechende Feld über das Attribut name="". Merken sie sich die zugehörige Variable. Mit dieser finden sie die entsprechenden Zeilen unter dem Kommentar //Prüfen der Felder und //Zusammenfügen der Mail. Diese Zeilen unter den Kommentaren können sie dann löschen.

Zusammenfassung

• Formulare brauchen praktisch immer ein Serverskript als Gegenstelle.
• Mit nur ein wenig Aufwand werden Formulare barrierefrei.