14. Formulare in HTML

Eine besondere Stärke von PHP ist die Auswertung von Benutzereingaben aus Formularen. Darum soll in diesem Kapitel auf die Erstellung von einfachen Formularen mittels HTML eingegangen werden.

Vorbereitung

Erstellen Sie in Ihrem Verzeichnis für das Fach SWE einen neuen Ordner namens Formulare_01. Legen Sie innerhalb des Ordners eine PHP-Datei namens index.php an.

Lesen Sie sich nun in Ruhe das folgende Kapitel durch und bauen Sie das Formluar Schritt für Schritt in der Datei index.php nach.

HTML-Tags für ein einfaches Formular

Die untere Abbildung zeigt Ihnen den HTML-Code eines einfachen Formulars.

Abbildung 14.1: HTML-Code für ein einfaches Formular

An dieser Stelle können wir bereits das Design des Formulars erstellen. Laden Sie hierfür die CSS-Vorlage aus Moodle herunter und binden Sie die CSS-Datei in Ihre PHP-Datei ein.

Das Design sollte wie folgt aussehen:

Abbildung 14.2: Formular mit der CSS-Vorlage

Wichtige Attribute für Eingabefelder Teil 1

Wir ergänzen die Eingabefelder um die Attribute placeholder, maxlength, required und value.

Abbildung 14.3: Eingabefelder mit Attributen

Erklärung der Attribute

• placeholder: Ein Platzhalter für das Eingabefeld (s. untere Abbildung).
• maxlength: Legt die Anzahl der eingebbaren Zeichen fest.
• required: Sorgt dafür, dass das Eingabefeld einen Inhalt besitzen muss, bevor die Daten verschickt werden. Die Überprüfung erfolgt durch den Browser selbst. Bei einem Fehler erfolgt eine Meldung (s. untere Abbildung).
• value: Legt die Bezeichnung (Wert) des Submit-Buttons fest.

Abbildung 14.4: Eingabefelder mit Attributen

Wichtige Attribute für Eingabefelder Teil 2

Wir ergänzen die Eingabefelder noch um die Attribute for und id.

Abbildung 14.5: Eingabefelder mit id- und for-Attributen

Erklärung der Attribute

• id: Spezifiziert ein Element eindeutig.
• for: Verweist auf ein anderes Element, welches eine ID mit demselben Namen hat.

Wenn also der Benutzer auf das Label-Element klickt, springt der Cursor direkt in das Eingabefeld mit der entsprechenden ID. Das macht die Nutzung eines Formulars anwendungsfreundlicher.