Ein komplettes Kontaktformular bauen

~9 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Zeit, alles aus diesem Block zusammenzubringen! In diesem Kapitel bauen wir kontakt.html zu einem vollständigen, gut strukturierten Formular aus - mit allem, was du in den letzten fünf Kapiteln gelernt hast.

Neu: fieldset und legend zum Gruppieren

Bei größeren Formularen ist es hilfreich, zusammengehörige Felder optisch und strukturell zu gruppieren. Dafür gibt es <fieldset> (umschließt eine Gruppe) und <legend> (die Überschrift dieser Gruppe, direkt als erstes Kind von <fieldset>):

<fieldset>
  <legend>Deine Kontaktdaten</legend>
  <p>...</p>
  <p>...</p>
</fieldset>

Browser zeigen <fieldset> standardmäßig mit einem dünnen Rahmen und <legend> als in den Rahmen eingelassene Überschrift an - ganz ohne CSS.

Das vollständige Formular

Ersetze den kompletten Inhalt von kontakt.html mit dieser vollständigen Version:

kontakt.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Kontakt - Finns Fußball-Webseite</title>
</head>
<body>

  <h1>Kontakt</h1>
  <p>Hast du eine Frage oder möchtest du dich vernetzen? Schreib mir gerne!</p>

  <form>
    <fieldset>
      <legend>Deine Kontaktdaten</legend>

      <p>
        <label for="vorname">Dein Vorname:</label><br>
        <input type="text" name="vorname" id="vorname" placeholder="z.B. Finn" required>
      </p>

      <p>
        <label for="email">Deine E-Mail:</label><br>
        <input type="email" name="email" id="email" placeholder="deine@email.de" required>
      </p>
    </fieldset>

    <fieldset>
      <legend>Deine Nachricht</legend>

      <p>
        <label for="betreff">Betreff:</label><br>
        <select name="betreff" id="betreff">
          <option value="frage">Eine Frage</option>
          <option value="lob">Lob</option>
          <option value="sonstiges">Sonstiges</option>
        </select>
      </p>

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

      <p>
        <input type="checkbox" name="newsletter" id="newsletter">
        <label for="newsletter">Ich möchte den Newsletter erhalten</label>
      </p>
    </fieldset>

    <button type="submit">Nachricht senden</button>
  </form>

  <p><a href="index.html">Zurück zur Startseite</a></p>

</body>
</html>

Checkliste für gute Formulare

Bevor wir zum nächsten Block übergehen, hier eine Checkliste, die du bei jedem zukünftigen Formular durchgehen kannst:

Hat jedes Eingabefeld ein name-Attribut?
Hat jedes Eingabefeld eine eindeutige id, und gibt es dazu ein passendes <label for="...">?
Ist der passende type gewählt (email für E-Mails, tel für Telefonnummern, usw.)?
Sind wirklich notwendige Felder mit required markiert?
Gibt es einen Button mit type="submit" zum Abschicken?

Tipp: Block geschafft! Formulare sind eines der komplexeren Themen in HTML, aber du hast jetzt alle wichtigen Bausteine kennengelernt. Im nächsten Block geht es um semantisches HTML - wie man eine ganze Seite sinnvoll strukturiert, nicht nur einzelne Formularfelder.

Vorheriges Kapitel Buttons und das Absenden von Formularen Nächstes Kapitel Warum <div> und <span> allein nicht reichen