Formulare

Formulare sind ein zentrales Element, um Interaktion zwischen dem Benutzer und einer Website zu ermöglichen.
Mit ihnen kann man Daten eingeben, auswählen oder hochladen, die anschließend weiterverarbeitet werden können – zum Beispiel bei einer Anmeldung, einer Suche oder einem Kontaktformular.

Bevor man ein Formular erstellt, sollte man überlegen, welche Informationen benötigt werden und wie das Formular aufgebaut sein soll, damit es übersichtlich und benutzerfreundlich bleibt.
Es ist oft hilfreich, den Aufbau zunächst auf Papier zu skizzieren, um alle erforderlichen Felder festzulegen.

form-Element

Das <form>-Element ist der Container für alle Formularfelder.
Zwischen dem öffnenden und schließenden Tag werden alle Eingabeelemente platziert.

<form>
  <!-- Formularinhalte -->
</form>

Wichtig

Ein Formular besteht immer nur aus einem <form>-Element. Alle Felder, die gemeinsam gesendet werden sollen, müssen innerhalb desselben <form> stehen.

form Attribute

action

Mit dem Attribut action wird festgelegt, an welche Adresse (URL) die eingegebenen Daten gesendet werden sollen.
Dies kann eine Datei auf dem eigenen Server oder eine externe Adresse sein.

<!-- eigener Server -->
<form action="/daten.php"></form>

<!-- externer Server -->
<form action="https://externer-server.de/daten.php"></form>

method

Mit dem Attribut method legt man fest, wie die Daten übertragen werden.
Es gibt zwei mögliche Werte:

  • get – die Daten werden in der URL angezeigt

  • post – die Daten werden unsichtbar übertragen

<form action="/daten.php" method="get"></form>

<form action="/daten.php" method="post"></form>

Hinweis

Für vertrauliche Daten (z. B. Passwörter oder persönliche Angaben) sollte man immer POST verwenden.

label-Element

Das <label>-Element beschreibt, welches Eingabefeld gemeint ist.
Mit dem Attribut for wird es mit einem bestimmten Eingabefeld (id) verknüpft.

<form>
  <label for="nachname">Nachname:</label>
</form>

Hinweis

Klickt man auf den Text im <label>, wird automatisch das zugehörige Eingabefeld aktiviert. Das verbessert die Benutzerfreundlichkeit und Barrierefreiheit.

input-Element

<input> ist eines der wichtigsten und vielseitigsten Elemente in einem Formular.
Es kann Textfelder, Auswahlfelder, Schaltflächen und vieles mehr darstellen.
Das Verhalten wird über das Attribut type festgelegt.

Ein <input>-Element ist selbstschließend (es hat kein schließendes Tag).

<input type="text" name="vorname" id="vorname" />

Input-Typen

Textfeld

<label for="vorname">Vorname:</label>
<input type="text" id="vorname" name="vorname" placeholder="Max" required />

Zahlenfeld

<label for="anzahl">Anzahl:</label>
<input type="number" id="anzahl" name="anzahl" min="1" max="10" />

Passwortfeld

<label for="passwort">Passwort:</label>
<input type="password" id="passwort" name="passwort" required />

Hinweis:
Das Passwort wird nur im Browser verdeckt angezeigt – nicht verschlüsselt übertragen.

E-Mail-Feld

<label for="email">E-Mail-Adresse:</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="name@example.com"
  required
/>

Der Browser überprüft automatisch, ob eine gültige E-Mail-Adresse eingegeben wurde.

Radio-Buttons

Nur eine Auswahl ist möglich. Alle Radio-Buttons einer Gruppe müssen den gleichen Wert für das name-Attribut haben.

Bemerkung

Das value-Attribut gibt den Wert an, der versendet wird. Es muss angegeben werden

<p>Lieblingsheld:</p>

<input type="radio" id="ironman" name="held" value="Ironman" />
<label for="ironman">Ironman</label>

<input type="radio" id="thor" name="held" value="Thor" />
<label for="thor">Thor</label>

<input type="radio" id="hulk" name="held" value="Hulk" />
<label for="hulk">Hulk</label>

Lieblingsheld:

Checkboxen

Hier können mehrere Optionen gewählt werden. Alle Check-Buttons einer Gruppe müssen den gleichen Wert für das name-Attribut haben.

Bemerkung

Das value-Attribut gibt den Wert an, der versendet wird. Es muss angegeben werden

<p>Lieblingshelden:</p>

<input type="checkbox" id="ironman" name="helden" value="Ironman" />
<label for="ironman">Ironman</label>

<input type="checkbox" id="hulk" name="helden" value="Hulk" />
<label for="hulk">Hulk</label>

<input type="checkbox" id="thor" name="helden" value="Thor" />
<label for="thor">Thor</label>

Lieblingshelden:

Submit-Button

Der Submit-Button versendet das Formular an die im method-Attribut angegebene Website.

Bemerkung

Der Wert für value erzeugt die Beschriftung des Buttons.

<input type="submit" value="Senden" />

Reset-Button

Der Reset-Button löscht alle Eingaben im Formluar.

Bemerkung

Der Wert für value erzeugt die Beschriftung des Buttons.

<input type="reset" value="Zurücksetzen" />

Hier ist eine kurze und verständliche Erklärung des <button>-Elements:

Button

Das <button>-Element ist ein interaktives HTML-Element, das es Benutzer ermöglicht, Aktionen auszulösen, z. B. ein Formular absenden oder ein Skript starten.

  • Unterstützt Attribute wie:

    • type="button" → normales Klick-Element

    • type="submit" → sendet ein Formular ab

    • type="reset" → setzt ein Formular zurück

<button type="button">Klick mich</button>
<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>

<!-- Button, der durch JS aktiviert wird -->
<button>öffnen</button>

Datumsfeld

<label for="geburtstag">Geburtsdatum:</label>
<input type="date" id="geburtstag" name="geburtstag" />

Zeitfeld

<label for="uhrzeit">Uhrzeit:</label>
<input type="time" id="uhrzeit" name="uhrzeit" />

Farbwähler

<label for="farbe">Lieblingsfarbe:</label>
<input type="color" id="farbe" name="farbe" />

Bereich (Range)

<label for="bewertung">Bewertung (1–10):</label>
<input
  type="range"
  id="bewertung"
  name="bewertung"
  min="1"
  max="10"
  value="5"
/>

Datei-Upload

<label for="datei">Datei auswählen:</label>
<input type="file" id="datei" name="datei" />

select-Element

Mit <select> kann man aus einer Liste vordefinierter Optionen auswählen.

<label for="marvel">Lieblingsheld:</label>
<select id="marvel" name="marvel">
  <option value="ironman">Ironman</option>
  <option value="thor">Thor</option>
  <option value="hulk">Hulk</option>
</select>

Mit dem Attribut size kann man festlegen, wie viele Einträge sichtbar sind.

Mehrfachauswahl

Durch multiple können mehrere Einträge gewählt werden. Dazu muss die Strg-Taste gedrückt werden.

<label for="marvel">Lieblingshelden:</label>
<select id="marvel" name="marvel" multiple size="3">
  <option value="ironman">Ironman</option>
  <option value="thor">Thor</option>
  <option value="hulk">Hulk</option>
  <option value="black-widow">Black Widow</option>
</select>

textarea-Element

Das <textarea>-Element wird für mehrzeilige Texteingaben verwendet – z. B. bei Kommentaren oder Nachrichten.

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

Die Größe lässt sich mit cols (Spaltenbreite) und rows (Zeilenhöhe) anpassen.

Gruppierung mit fieldset und legend

Mehrere Felder kann man mit <fieldset> zu einer logischen Gruppe zusammenfassen.
<legend> fügt eine Überschrift für die Gruppe hinzu.

<fieldset>
  <legend>Persönliche Daten</legend>

  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname" />

  <label for="nachname">Nachname:</label>
  <input type="text" id="nachname" name="nachname" />
</fieldset>
Persönliche Daten

Wichtige Attribute

Formularelemente besitzen verschiedene Attribute, mit denen man ihr Verhalten steuern und ihr Aussehen beeinflussen kann.
Im Folgenden werden die wichtigsten Attribute erklärt.

name

Das Attribut name legt den Namen des Eingabefelds fest.
Es dient dazu, die eingegebenen Daten beim Absenden des Formulars zu identifizieren.

Funktionsweise:
Wenn ein Formular an einen Server gesendet wird, überträgt der Browser die Daten als Schlüssel-Wert-Paare.
Der Schlüssel ist der Wert des name-Attributs, der Wert ist der Inhalt des Eingabefelds.

<input type="text" name="vorname" />

Wenn man „Lena“ eingibt, wird beim Absenden gesendet:

vorname=Lena

Wichtig

Jedes Eingabefeld, das Daten übermitteln soll, muss ein name-Attribut besitzen. Ohne name wird der Inhalt nicht übertragen.

id

Das Attribut id vergibt eine eindeutige Kennung innerhalb der Seite.

Funktionsweise:
Eine id darf nur einmal pro Seite vorkommen.
Sie wird benötigt, um das Element eindeutig ansprechen zu können – z. B. durch CSS, JavaScript oder ein zugehöriges <label>.

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

value

Das Attribut value legt einen voreingestellten Wert fest, der im Eingabefeld bereits angezeigt wird.

Funktionsweise:

  • Bei Textfeldern erscheint der Wert als Text im Feld.

  • Bei Kontrollfeldern (checkbox, radio, submit) bestimmt value, welcher Wert beim Absenden übermittelt wird.

<input type="text" name="stadt" value="Flensburg" />
<input type="radio" name="geschlecht" value="m" />
<input type="radio" name="geschlecht" value="w" />

placeholder

Das Attribut placeholder zeigt einen grau dargestellten Beispieltext im Eingabefeld an, solange das Feld leer ist. Man verwendet placeholder, um Hinweise oder Beispieleingaben zu zeigen – z. B. das erwartete Format oder den Zweck des Feldes.

Funktionsweise:
Der Text verschwindet automatisch, sobald man in das Feld klickt oder etwas eingibt.

<input type="text" name="vorname" placeholder="Bitte Vornamen eingeben" />

required

Das Attribut required kennzeichnet ein Feld als Pflichtfeld.

Funktionsweise:
Der Browser überprüft beim Absenden automatisch, ob das Feld ausgefüllt wurde.
Wenn nicht, erscheint eine Fehlermeldung, und das Formular wird nicht gesendet.

<input type="email" name="email" required />

disabled

Das Attribut disabled macht ein Eingabefeld unveränderbar und ausgegraut.

Funktionsweise:
Ein disabled-Feld kann weder angeklickt noch bearbeitet werden.
Sein Wert wird nicht mit dem Formular übertragen.

<input type="text" name="status" value="Nur-Lesen" disabled />

readonly

Das Attribut readonly macht ein Feld schreibgeschützt, aber nicht deaktiviert.

Funktionsweise:
Man kann den Wert sehen und markieren (z. B. kopieren), aber nicht verändern.
Im Gegensatz zu disabled wird der Wert beim Absenden mitgesendet.

Beispiel:

<input type="text" name="kundennr" value="12345" readonly />

min, max, step

Diese Attribute legen den zulässigen Wertebereich und die Schrittweite fest.
Sie gelten für Felder mit numerischen oder zeitbezogenen Eingaben, z. B. number, date, range.

Funktionsweise:

  • min – kleinster erlaubter Wert

  • max – größter erlaubter Wert

  • step – Schrittweite zwischen zwei Werten

Beispiel:

<input type="number" name="alter" min="0" max="120" step="1" />
<input type="date" name="geburtstag" min="1900-01-01" max="2025-12-31" />
<input type="range" name="alter" min="0" max="120" step="10" />

Beispiel: Kontaktformular

<form action="/kontakt.php" method="post">
  <fieldset>
    <legend>Kontaktformular</legend>

    <label for="name">Name:</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Max Mustermann"
      required
    />

    <label for="email">E-Mail:</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="name@example.com"
      required
    />

    <label for="nachricht">Nachricht:</label>
    <textarea
      id="nachricht"
      name="nachricht"
      cols="40"
      rows="5"
      required
    ></textarea>

    <input type="submit" value="Absenden" />
    <input type="reset" value="Zurücksetzen" />
  </fieldset>
</form>
Kontaktformular