HTML Formulare aufbauen

Kontaktformulare, Anmeldungen, Newsletter-Signups – ohne HTML Formulare wären Websites nur statische Seiten! Das <form>-Element ist dein Einstieg in interaktive Webseiten. In diesem Tutorial lernst du die Grundstruktur.

Einführung in das HTML Formular Tutorial

Was sind HTML Formulare

Formulare sammeln Benutzereingaben und senden sie an einen Server. Die Grundbausteine:

• <form> – der Container für alle Eingabefelder
• action – wohin die Daten gesendet werden
• method – wie die Daten übertragen werden (GET oder POST)

Du nutzt Formulare täglich: beim Einloggen, beim Online-Shopping, beim Suchen auf Google.

Warum Formulare wichtig sind

Ohne Formulare könnten Websites nicht mit Nutzern interagieren. Kein Login, keine Bestellung, kein Feedback. Sie sind die Brücke zwischen deiner Webseite und den Menschen, die sie nutzen.

Was du in diesem Tutorial lernst

Nach diesem Tutorial verstehst du:

• Wie das form-Element funktioniert
• Was action und method bedeuten
• Wie du Formulare richtig strukturierst

Voraussetzungen

Benötigte HTML Grundkenntnisse

Du solltest HTML-Tags und Attribute verstehen. Falls nicht, hol das kurz nach!

Entwicklungsumgebung einrichten

Texteditor und Browser – mehr brauchst du nicht. Erstelle einen Ordner für deine Übungen.

[bildapi id="001" prompt="Ein minimalistischer Code-Editor mit einem einfachen HTML-Formular auf dem Bildschirm, umgeben von Programmierwerkzeugen" name="html-formular-entwicklungsumgebung" alt="HTML Formular Entwicklungsumgebung mit Code Editor"]

Schritt-für-Schritt-Anleitung

Das form-Element verstehen

Das <form>-Element ist ein Container. Alles dazwischen gehört zum Formular:

<form>
  <!-- Hier kommen die Eingabefelder hinein -->
</form>

Wichtig: Formulare dürfen NICHT verschachtelt werden! Ein form innerhalb eines anderen form → funktioniert nicht.

Grundstruktur eines Formulars

Zwischen den form-Tags können alle möglichen Elemente stehen:

<form>
  <h2>Kontakt aufnehmen</h2>
  <p>Bitte füllen Sie alle Felder aus:</p>
  <!-- Eingabefelder folgen hier -->
</form>

Action und Method Attribute

Die zwei wichtigsten Attribute:

• action="..." – Die URL, die die Daten verarbeitet
• method="..." – GET (Daten in URL) oder POST (Daten versteckt)

<form action="verarbeitung.php" method="post">
  <h2>Newsletter Anmeldung</h2>
  <!-- Eingabefelder kommen hier -->
</form>

Faustregel: POST für sensible Daten (Passwörter, persönliche Infos), GET für Suchen.

Code-Beispiele zu HTML

Kontaktformular-Struktur

<form action="kontakt.php" method="post">
  <h2>Kontaktieren Sie uns</h2>
  
  <h3>Ihre Daten</h3>
  <p>Name: <!-- Eingabefeld folgt --></p>
  <p>E-Mail: <!-- Eingabefeld folgt --></p>
  
  <h3>Ihre Nachricht</h3>
  <p>Nachricht: <!-- Textbereich folgt --></p>
  
  <p><!-- Absenden-Button folgt --></p>
</form>

Anmeldeformular-Struktur

<form action="anmeldung.php" method="post">
  <h2>Bei uns anmelden</h2>
  
  <div>
    <h3>Benutzerkonto erstellen</h3>
    <p>Benutzername: <!-- Eingabefeld --></p>
    <p>Passwort: <!-- Eingabefeld --></p>
    <p>E-Mail: <!-- Eingabefeld --></p>
  </div>
  
  <p><!-- Anmelde-Button --></p>
</form>

Die eigentlichen Eingabefelder (input, textarea, button) lernst du in den nächsten Tutorials!

Häufige Fehler & Troubleshooting

Fehler 1: Verschachtelte Formulare

<!-- FALSCH: -->
<form>
  <h2>Äußeres Formular</h2>
  <form>
    <h3>Inneres Formular - DAS GEHT NICHT!</h3>
  </form>
</form>

<!-- RICHTIG: -->
<form>
  <h2>Erstes Formular</h2>
</form>

<form>
  <h2>Zweites Formular</h2>
</form>

Fehler 2: Falsche Attribute

• method muss "get" oder "post" sein
• action muss eine gültige URL sein

Fehler 3: Schließenden Tag vergessen

FALSCH: <form>Inhalt
RICHTIG: <form>Inhalt</form>

HTML: Best Practices & Tipps

Semantisch korrektes Markup

Strukturiere deine Formulare logisch:

<form action="newsletter.php" method="post">
  <header>
    <h2>Newsletter abonnieren</h2>
    <p>Bleiben Sie über unsere neuesten Artikel informiert.</p>
  </header>
  
  <section>
    <h3>Persönliche Daten</h3>
    <!-- Eingabefelder -->
  </section>
  
  <section>
    <h3>Newsletter-Einstellungen</h3>
    <!-- Auswahlmöglichkeiten -->
  </section>
</form>

Barrierefreiheit

Klare Überschriften und logische Struktur helfen Screenreader-Nutzern bei der Navigation. Das gilt für Formulare ganz besonders!

Performance

Halte Formulare schlank. Weniger Verschachtelungen = schnelleres Rendering.

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die Grundstruktur von HTML Formularen:

• <form> als Container
• action für das Ziel
• method für die Übertragungsart

Das ist die Basis – im nächsten Tutorial lernst du die Eingabefelder kennen!

Bereit für mehr? Lerne als Nächstes alle HTML Input Typen kennen – von Text bis Passwort!