Kapitel 10: HTML-Formular-Tags

📝 Lernziel: Formulare erstellen - die Schnittstelle für Benutzerinteraktion!

10.1 Formular-Grundstruktur: form-Tag

Das <form>-Tag ist der Container für alle Formularelemente.

Grundlegende Syntax:

<form action="verarbeitung.php" method="POST">
  <!-- Formularelemente hier -->
</form>

Wichtige Attribute:

Attribut	Bedeutung	Beispiel
action	Ziel-URL für Datenübermittlung	action="login.php"
method	HTTP-Methode	method="GET" oder method="POST"
enctype	Codierung (für Datei-Upload)	enctype="multipart/form-data"

Unterschied zwischen GET und POST:

Methode	Verwendung	Sichtbarkeit
GET	Datenabfrage	Daten in URL sichtbar
POST	Datenübermittlung	Daten im Hintergrund

Beispiel:

<!-- Login-Formular -->
<form action="login.php" method="POST">
  <label for="benutzer">Benutzername:</label>
  <input type="text" id="benutzer" name="benutzer">
  
  <label for="passwort">Passwort:</label>
  <input type="password" id="passwort" name="passwort">
  
  <button type="submit">Einloggen</button>
</form>

---

10.2 Input-Tag: Häufige Typen

Das <input>-Tag ist das vielseitigste Formularelement.

Grundlegende Syntax:

<input type="typ">

Wichtige input-Typen:

Typ	Funktion	Beispiel
text	Einzeiliges Textfeld	<input type="text">
password	Passwortfeld (verdeckt)	<input type="password">
radio	Radio-Button (Auswahl eine)	<input type="radio">
checkbox	Checkbox (mehrfache Auswahl)	<input type="checkbox">
submit	Absenden-Button	<input type="submit">
reset	Zurücksetzen-Button	<input type="reset">
file	Datei-Upload	<input type="file">
hidden	Verstecktes Feld	<input type="hidden">

Beispiele:

<!-- Textfeld -->
<input type="text" placeholder="Benutzername">

<!-- Passwortfeld -->
<input type="password" placeholder="Passwort">

<!-- Radio-Buttons -->
<input type="radio" name="geschlecht" id="m" value="m">
<label for="m">Männlich</label>
<input type="radio" name="geschlecht" id="w" value="w">
<label for="w">Weiblich</label>

<!-- Checkboxen -->
<input type="checkbox" id="agb" name="agb">
<label for="agb">AGB akzeptieren</label>

---

10.3 Weitere Formularelemente

textarea (Textbereich)

<textarea rows="5" cols="30" placeholder="Deine Nachricht..."></textarea>

select + option (Dropdown)

<select name="stadt">
  <option value="berlin">Berlin</option>
  <option value="muenchen">München</option>
  <option value="hamburg">Hamburg</option>
</select>

button (Schaltfläche)

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

Vollständiges Beispiel:

<form>
  <textarea placeholder="Deine Nachricht..." rows="4" cols="50"></textarea>
  
  <select name="land">
    <option value="">Bitte wählen...</option>
    <option value="de">Deutschland</option>
    <option value="at">Österreich</option>
    <option value="ch">Schweiz</option>
  </select>
  
  <button type="submit">Absenden</button>
</form>

---

10.4 Formular-Attribute

Wichtige Attribute für Formularelemente:

Attribut	Funktion	Beispiel
placeholder	Platzhaltertext	placeholder="E-Mail eingeben"
required	Pflichtfeld	<input required>
disabled	Deaktiviert	<input disabled>
readonly	Nur lesbar	<input readonly>
value	Vordefinierter Wert	value="Vorname"
name	Name für Datenübermittlung	name="email"
id	Eindeutige ID (für label)	id="email"

Beispiele:

<!-- Pflichtfeld -->
<input type="email" required placeholder="E-Mail (Pflichtfeld)">

<!-- Deaktiviert -->
<input type="text" value="Nicht änderbar" disabled>

<!-- Vordefinierter Wert -->
<input type="text" name="vorname" value="Max">

---

10.5 Formular-Optimierung: label-Tag

Das <label>-Tag verbessert Benutzererfahrung und SEO!

Warum label wichtig ist:

1. Klick auf das Label fokussiert das Eingabefeld
2. Bessere Barrierefreiheit (Screenreader)
3. Größere Klickfläche für Mobile

Syntax (zwei Methoden):

Methode 1: for + id (empfohlen)

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

Methode 2: Verschachtelung

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

⚠️ Wichtig: Jedes Eingabefeld sollte ein <label> haben!

Beispiel - Korrektes Formular:

<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <button type="submit">Absenden</button>
</form>

---

10.6 Praxis: Login- und Registrierungsformular

Login-Formular

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>
  <h2>Login</h2>
  <form action="login.php" method="POST">
    <div>
      <label for="benutzer">Benutzername oder E-Mail:</label>
      <input type="text" id="benutzer" name="benutzer" required>
    </div>
    
    <div>
      <label for="passwort">Passwort:</label>
      <input type="password" id="passwort" name="passwort" required>
    </div>
    
    <div>
      <input type="checkbox" id="merken" name="merken">
      <label for="merken">Angemeldet bleiben</label>
    </div>
    
    <button type="submit">Einloggen</button>
  </form>
</body>
</html>

Registrierungsformular

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Registrierung</title>
</head>
<body>
  <h2>Registrierung</h2>
  <form action="register.php" method="POST">
    <div>
      <label for="name">Vollständiger Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
    
    <div>
      <label for="email">E-Mail:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div>
      <label for="passwort">Passwort:</label>
      <input type="password" id="passwort" name="passwort" required>
    </div>
    
    <div>
      <label for="geburtstag">Geburtstag:</label>
      <input type="date" id="geburtstag" name="geburtstag">
    </div>
    
    <div>
      <input type="checkbox" id="agb" name="agb" required>
      <label for="agb">Ich akzeptiere die AGB</label>
    </div>
    
    <button type="submit">Registrieren</button>
  </form>
</body>
</html>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Formular-Grundstruktur (<form>, action, method)
• ✅ Input-Typen (text, password, radio, checkbox)
• ✅ Weitere Elemente (<textarea>, <select>, <button>)
• ✅ Formular-Attribute (placeholder, required, disabled)
• ✅ <label>-Tag für Barrierefreiheit und SEO
• ✅ Login- und Registrierungsformulare zu erstellen

🎯 Nächster Schritt: In Kapitel 11 lernst du HTML5-Neuerungen!

---

← Zurück zu Kapitel 9: Bereichs-TagsWeiter zu Kapitel 11: HTML5-Neuerungen →