Formulare

Formulare sind das Herzstück interaktiver Webseiten.
Immer wenn du dich anmeldest, eine Nachricht absendest oder nach etwas suchst, arbeitest du mit einem HTML-Formular.

In dieser Lektion lernst du:

wie Formulare aufgebaut sind,
welche Eingabefelder es gibt,
wie Daten an den Server übermittelt werden,
und wie du einfache Formulare selbst erstellst und testest.

1. Aufbau eines Formulars

Ein Formular wird mit dem <form>-Tag erstellt.

Grundstruktur:

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

Attribut	Bedeutung
`action`	Ziel-Datei, an die die Formulardaten gesendet werden
`method`	Übertragungsart (`get` oder `post`)
`name`	Schlüsselname des Felds – wichtig für Serververarbeitung

Hinweis:
Wenn du keinen Server nutzt, kannst du action="#" schreiben – dann passiert nichts beim Absenden.

2. Eingabefelder im Überblick

Typ	Code	Beschreibung
Textfeld	`<input type="text">`	einfache Texteingabe
Passwort	`<input type="password">`	Eingabe verdeckt
Zahl	`<input type="number">`	nur Zahlen erlaubt
E-Mail	`<input type="email">`	prüft Format einer E-Mail-Adresse
Datum	`<input type="date">`	Datumsauswahl über Kalender
Checkbox	`<input type="checkbox">`	Haken setzen
Radiobutton	`<input type="radio">`	Auswahl einer Option
Button	`<input type="submit">`	Formular absenden

Beispiel:

<form>
  <p><label>Benutzername: <input type="text"></label></p>
  <p><label>Passwort: <input type="password"></label></p>
  <p><input type="submit" value="Login"></p>
</form>

3. Beschriftungen mit `<label>`

Ein <label> beschreibt ein Eingabefeld und verknüpft sich über for="id" mit diesem.

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

Klickt man auf den Text des Labels, wird das zugehörige Feld automatisch aktiviert.
Das erhöht die Benutzerfreundlichkeit und Barrierefreiheit.

4. Textbereiche und Auswahlfelder

Mehrzeilige Texteingabe (`<textarea>`)

<textarea name="nachricht" rows="4" cols="40"></textarea>

Auswahlmenü (`<select>` mit `<option>`)

<select name="abteilung">
  <option>IT</option>
  <option>Vertrieb</option>
  <option>Marketing</option>
</select>

Mehrfachauswahl (`multiple`)

<select name="skills" multiple>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

5. Checkboxen und Radiobuttons

Checkbox: mehrere Haken möglich

<label><input type="checkbox" name="newsletter"> Newsletter abonnieren</label>

Radiobutton: nur eine Option auswählbar, wenn name gleich ist

<p>Lieblingssprache:</p>
<label><input type="radio" name="sprache" value="html"> HTML</label>
<label><input type="radio" name="sprache" value="css"> CSS</label>
<label><input type="radio" name="sprache" value="js"> JavaScript</label>

6. Buttons

<input type="submit" value="Absenden">
<input type="reset" value="Zurücksetzen">
<button type="button" onclick="alert('Hallo!')">Klick mich</button>

submit sendet das Formular,
reset löscht alle Eingaben,
button kann für eigene Funktionen (z. B. JS) verwendet werden.

7. Beispiel: Kontaktformular

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Kontaktformular</title>
  </head>
  <body>
    <h1>Kontaktformular</h1>
    <form action="#" method="post">
      <p><label for="name">Name:</label><br>
         <input type="text" id="name" name="name" required></p>

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

      <p><label for="nachricht">Nachricht:</label><br>
         <textarea id="nachricht" name="nachricht" rows="4" cols="40"></textarea></p>

      <p><input type="submit" value="Absenden"></p>
    </form>
  </body>
</html>

8. Erweiterung: HTML-Validierung

HTML kann Eingaben automatisch prüfen, bevor das Formular abgeschickt wird.

Beispiele:

<input type="email" required>
<input type="number" min="1" max="10">
<input type="text" pattern="[A-Za-z\s]+" title="Nur Buchstaben erlaubt">

So kannst du einfache Validierungen direkt im Browser realisieren –
ohne JavaScript oder Server-Code.

9. Häufige Fehler

Fehler	Ursache	Lösung
Formular sendet nichts	`action="#"` nur Platzhalter	Echte Server-Datei oder PHP-Handler nötig
Eingabefelder ohne `name`	Daten werden nicht übertragen	Immer `name="..."` setzen
Keine Labels	schlechte Usability	`<label>` verwenden
Kein `method` angegeben	Standard = GET	bewusst `post` wählen, wenn Daten vertraulich sind

10. Fazit

Formulare bestehen aus <form> und Eingabefeldern (<input>, <textarea>, <select>).
action bestimmt das Ziel, method die Übertragungsart.
<label> verbindet Text mit einem Eingabefeld.
Mit required, type und pattern kannst du Validierungen einbauen.
Formulare sind Grundlage für jede interaktive Anwendung – von Login bis Bestellformular.

Formulare

1. Aufbau eines Formulars

2. Eingabefelder im Überblick

3. Beschriftungen mit <label>

4. Textbereiche und Auswahlfelder

Mehrzeilige Texteingabe (<textarea>)

Auswahlmenü (<select> mit <option>)

Mehrfachauswahl (multiple)