# 1.5 HTML-Formulare

Formulare sind eine der Stärken von PHP, da mithilfe von PHP Formulare erstellt und ausgewertet werden können.

Formulare definieren

Formulare haben meist einen gleichen Grundaufbau: es gibt Eingabefelder, Felder für mehrzeiligen Text, Listen zum Auswählen und natürlich immer einen Button zum Absenden der Daten. Ein Formular wird generell eingeleitet mit `<form>(...)</form>`, dazwischen stehen alle HTML-Elemente, die zum Formular gehören. Allerdings sind hier auch Elemente wie Überschriften oder Textabsätze erlaubt.

    <form action="datenverarbeitung.php" method="get">
       - hier stehen die Elemente des Formulars -
    </form>

Das Attribut `action` im `<form>`-Tag gibt an, wohin die Daten nach dem Absenden übertragen werden sollen (dazu später mehr). Das zweite Attribut `method` beschreibt die Art der HTTP-Methode, mit der die Daten zwischen Client und Web-Server übertragen werden. Wird dort der Wert `get` eingesetzt, hängt der Browser die Daten als Parameter an die Zieladresse, beim Wert `post` werden die Daten im HTTP-Body verschickt.

Eingabefelder erzeugen

Das HTML-Element `<input>` definiert Eingabefelder. Hier sehen wir ein einfaches Texteingabefeld.

    <form action="datenverarbeitung.php" method="get">
      <p>
        <label for="prename">Vorname:</label>
        <input type="text" name="prename" id="prename">
      </p>
    </form>

Es gibt immer einen Text vor dem Eingabefeld. Hier lautet der Text 'Vorname:'. Dieser zum Eingabefeld dazugehörige Text wird mit dem Element `<label>` gekennzeichnet. Das `for`-Attribut von `<label>` muss mit dem `id`-Attribut von `<input>` übereinstimmen. Somit ist semantisch klar, dass `<label>` und `<input>` zusammen gehören.

Der Wert im `name`-Attribut von `<input>` wird später bei der Übertragung zum Webserver via HTTP zu einem Parameter. Wir wissen damit, dass es einen Parameter `prename` geben wird, der als Wert den vom User in das Feld eingegebenen Inhalt enthält.

Das Element `<input>` kann unterschiedliche Typen von Eingabefeldern erstellen, die auf unterschiedlichen Geräten mit unterschiedlichen Browsern teilweise sehr unterschiedlich dargestellt werden. Hier werden nur einige von vielen Möglichkeiten aufgeführt.

## Formular-Elemente

Verschiedene Typen von Eingabefeldern, die durch das Attribut `type` definiert werden, inklusive einer kurzen Beschreibung ihrer Funktion.

Basiswerte für das Attribut `type=...` | Beschreibung
--- | ---
`text` | Normales Eingabefeld für einzeiligen Text.
`radio` | Radiobuttons für die Auswahl einer Option aus mehreren Möglichkeiten.
`checkbox` | Checkbox für eine oder mehrere Optionen.
`password` | Feld für Passworteingaben; Eingaben werden als Punkte oder Sternchen dargestellt, aber nicht verschlüsselt übermittelt, sondern nur die Darstellung während der Eingabe ist "maskiert".
`email` | Feld für E-Mail-Adressen; spezielle E-Mail-Tastatur auf mobilen Geräten.
`number` | Feld für die Eingabe einer Zahl.
`date` | Feld zur Auswahl eines Datums.
`range` | Schieberegler zur Auswahl eines Wertes aus einem Bereich.
`file` | Ermöglicht das Hochladen einer Datei.
`url` | Feld für die Eingabe von URLs.
`search` | Feld für Suchanfragen.
`submit` | Ein Button zum Absenden des Formulars.
`reset` | Ein Button zum Zurücksetzen des Formulars auf den ursprünglichen Zustand.

Weitere Werte für das Attribut `type=...` | Beschreibung
--- | ---
`datalist` | Bietet eine Autovervollständigungsfunktion für das Eingabefeld an.
`time` | Feld zur Auswahl einer Uhrzeit.
`color` | Feld zur Auswahl einer Farbe.
`hidden` | Unsichtbares Eingabefeld, sollte heutzutage nicht mehr genutzt werden (also echt "verboten" und deutet auf eine sehr schlechte Programmierung hin).

Diese Elemente ermöglichen eine Vielzahl von Interaktionen und Dateneingaben in Webformularen.

## Attribute für das input-Element

- `name="..."` ist ein notwendiges Attribut und muss einen eindeutigen Namen haben. Der Wert im `name`-Attribut wird bei der Übertragung zum Webserver via HTTP zu einem Parameter. Dieser Parameter kann in PHP ausgelesen werden und enthält als Wert die Nutzereingabe in das Formularfeld.

- `value="..."` schreibt in das Formularfeld etwas hinein. In der PHP-Programmierung kann das `value`-Attribut dynamisch Inhalte aus der Datenbank erhalten, was ein Formular von der Datenbank vorausgefüllt erscheinen lässt, z.B. wenn sich die Nutzer:innen eingeloggt hat und seine Daten ändern möchte.

- `readonly` sorgt dafür, dass der Text im Formularfeld nicht überschrieben werden kann. Dies ist nur in Kombination mit `value` sinnvoll und kann nützlich sein, damit man wichtige Eingaben nicht so einfach überschreibt. Eine Änderung der Daten wäre dann über eine JavaScript-Funktion durchführbar.

- `size="..."` gibt die Länge des Feldes an. Dies kann genutzt werden, um das Layout des Formulars besser zu kontrollieren.

- `maxlength="..."` gibt die maximale Anzahl der einzugebenden Zeichen an. Dies hilft, die Eingabe auf die erforderliche Länge zu beschränken und verhindert, dass Benutzer:innen ungewollt zu viel Text eingeben.

Neuere Attribute in HTML5

HTML5 führt weitere nützliche Attribute für `<input>`-Elemente ein, die die Bedienbarkeit und Validierung von Formularen verbessern:

- `placeholder="..."` zeigt einen Hinweistext im Eingabefeld an, bis die Benutzer:innen beginnt, etwas einzugeben.

- `required` kennzeichnet ein Feld als obligatorisch, sodass das Formular nicht abgesendet werden kann, ohne dass dieses Feld ausgefüllt wurde.

- `pattern="..."` erlaubt die Angabe eines regulären Ausdrucks, gegen den der Eingabewert validiert wird. Für ein Postleitzahl-Feld kann dieser Ausdruck verwendet werden: pattern="^[0-9]{5}$"

- `autocomplete="on|off"` ermöglicht oder verhindert die Autovervollständigung des Eingabefelds.

- `autofocus` legt fest, dass ein spezifisches Eingabefeld automatisch den Fokus erhält, sobald die Seite geladen wird.

- `min="..."` und `max="..."` definieren den minimalen bzw. maximalen Wert für Eingaben vom Typ `number`, `range`, `date` etc.

- `step="..."` definiert die Schritte, in denen ein Wert bei Typen wie `number` oder `range` verändert werden kann.

## Aufgaben zum Abschnitt Formulare

Aufgabe 1

Erstellen Sie ein einfaches HTML-Formular für eine Kontaktseite mit den Feldern Name und E-Mail, Betreff und Nachricht. Das Formular soll die Daten mittels der `POST`-Methode an `submit_contact.php` senden.

Lösung zu Aufgabe 1

    <form action="submit_contact.php" method="post">
      <label for="name">Name:</label>
      <input type="text" name="name" id="name">

      <label for="email">E-Mail:</label>
      <input type="email" name="email" id="email">

      <button type="submit">Senden</button>
    </form>

Aufgabe 2

Erweitern Sie das Formular aus Aufgabe 1 um ein Eingabefeld für eine fünfstellige Postleitzahl (PLZ). Nutzen Sie das `pattern`-Attribut, um sicherzustellen, dass nur Zahlen eingegeben werden können und das Feld exakt 5 Ziffern enthält.

Lösung zu Aufgabe 2

Ergänzen Sie das Formular aus Aufgabe 1 um das folgende Feld:

    <label for="plz">Postleitzahl:</label>
    <input type="text" id="plz" name="plz" pattern="^[0-9]{5}$" title="Geben Sie eine 5-stellige PLZ ein.">