Formulare & Eingabe

In dieser Lektion lernen Sie, wie Benutzerinteraktion mit Formularen in HTML umgesetzt wird, inklusive Eingabefelder, Buttons und Auswahlmöglichkeiten.

1. Das Formular-Element

Ein <form> fasst Eingabeelemente zusammen und definiert, wie Daten gesendet werden.

Attribute: action (Ziel der Daten), method (GET oder POST)

<form action="/submit" method="post">
  ...
</form>

2. Eingabefelder

Das <input>-Element wird für einzeilige Benutzereingaben genutzt.

Attribute: type, name, value, placeholder, required
Typen: text, password, email, number, checkbox, radio, etc.

<input type="text" name="vorname" placeholder="Vorname" required>
<input type="password" name="passwort">
<input type="email" name="email">

3. Textbereiche

Das <textarea> ermöglicht mehrzeilige Texteingabe.

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

4. Auswahlfelder

Mit <select> und <option> können Benutzer aus vorgegebenen Optionen wählen.

<select name="land">
  <option value="de">Deutschland</option>
  <option value="at">Österreich</option>
  <option value="ch">Schweiz</option>
</select>

5. Buttons und Absenden

Formulare werden mit <button> oder <input type="submit"> abgeschickt.

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

6. Formular-Gruppierung

Mit <fieldset> können zusammengehörige Eingaben optisch gruppiert werden. <legend> definiert eine Beschriftung.

<fieldset>
  <legend>Persönliche Daten</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

7. Best Practices

Alle Felder mit name versehen, sonst werden Daten nicht übertragen
Barrierefreiheit: <label> verwenden
Formulare validieren (HTML5 Attribute oder JavaScript)
Responsive Design beachten

8. Zusammenfassung

<form> fasst Eingaben zusammen
<input> für einzeilige Eingaben
<textarea> für mehrzeilige Eingaben
<select> für Auswahlfelder
<button> oder <input type="submit"> zum Absenden
<fieldset> + <legend> für Gruppierung