Formulare und Eingabefelder

In dieser Lektion lernen Sie, wie HTML-Formulare aufgebaut werden, um Benutzereingaben zu erfassen.

1. Das <form>-Element

• Attribute: action – Ziel-URL
• Attribute: method – HTTP-Methode (GET oder POST)

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

2. Eingabefelder (<input>)

• type="text" – einzeiliger Text
• type="password" – Passwort
• type="email" – E-Mail-Adresse
• type="number" – Zahlen
• type="checkbox" – Auswahlfeld
• type="radio" – Optionsfelder
• type="submit" – Senden-Button

<form action="/submit" method="post">
  Name: <input type="text" name="name"><br>
  Passwort: <input type="password" name="pass"><br>
  <input type="submit" value="Absenden">
</form>

3. Textbereiche (<textarea>)

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

4. Auswahlfelder (<select>)

<label for="farbe">Farbe:</label>
<select id="farbe" name="farbe">
  <option value="rot">Rot</option>
  <option value="grün">Grün</option>
  <option value="blau">Blau</option>
</select>

5. Formulare strukturieren

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

6. Buttons

• <input type="submit"> – Formular senden
• <input type="reset"> – Formular zurücksetzen
• <button> – flexibler Button, kann Text oder HTML enthalten

7. Best Practices

• Formulare logisch gruppieren (<fieldset> und <legend>)
• Benutzerfreundliche Labels und Platzhalter verwenden
• Validierung auf Client- und Serverseite durchführen
• Responsive Gestaltung mit CSS

8. Zusammenfassung

• <form> – Container für Eingaben
• <input>, <textarea>, <select> – Eingabeelemente
• <label> – Zugänglichkeit verbessern
• Buttons: Senden, Zurücksetzen, eigene Aktionen