Formulare: input, label, select, textarea, button

Baue vollständige, barrierefreie und produktionsreife Formulare.

10 Min. · 3 Fragen

Ein Formular ist das Tor zu fast jeder Interaktion im Web: Anmeldungen, Suche, Kasse, Kontakt. Du weißt bereits, wie eine Seite aufgebaut ist; jetzt wird es praktisch. Präge dir zuerst die goldene Regel ein: Jedes Feld hat ein name-Attribut, denn das wird an den Server gesendet, nicht die id.

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Sign up</button>
</form>

Schau dir das Paar label / input an: Das for-Attribut des Labels zeigt auf die id des Feldes. Diese Verbindung ist für Screenreader unerlässlich. Beachte auch das type="email": Der Browser prüft das Format gratis und zeigt auf dem Handy die passende Tastatur an. Andere Typen sind täglich nützlich: number, date, password, checkbox, radio.

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">-- Choose a country --</option>
  <option value="fr">France</option>
  <option value="ca">Canada</option>
</select>

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>

Der letzte Mitspieler: button. Er kennt drei Typen: submit (sendet das Formular), reset (leert die Felder) und button (tut von allein nichts - verdrahte ihn mit JavaScript). Denkaufgabe: In einem Formular für einen Blog-Beitrag fügst du einen „Vorschau“-Button hinzu, der die Daten nicht senden darf. Welchen Typ gibst du ihm? Antwort: type="button".

<form action="/contact" method="post">
  <label for="topic">Subject</label>
  <select id="topic" name="topic">
    <option value="support">Technical support</option>
    <option value="billing">Billing</option>
  </select>

  <button type="submit">Send</button>
  <button type="button" id="preview-btn">
    Preview
  </button>
</form>

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welches Attribut verbindet ein label mit seinem Formularfeld?
   • Das for-Attribut des Labels, das auf die id des Feldes zeigt
   • Das name-Attribut, identisch bei Label und Feld
   • Das value-Attribut des Labels
   • Das placeholder-Attribut des Feldes
2. Was ist innerhalb eines Formulars der Standardtyp eines button ohne type-Attribut?
   • submit
   • button
   • reset
3. Welches Element nutzt du, um langen, mehrzeiligen Text einzugeben?
   • input mit type="text"
   • textarea
   • select
   • output