Was ist ein Formular? Die form- und input-Grundlagen
Was ist ein Formular? Die form- und input-Grundlagen
~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Jedes Mal, wenn du dich irgendwo im Internet anmeldest, etwas suchst, oder eine Nachricht schreibst, benutzt du ein Formular. In diesem Block lernst du, wie man solche Eingabefelder baut - zum Beispiel für ein Kontaktformular auf Finns Webseite.
Das <form>-Element
<form> umschließt alle Eingabefelder, die zusammengehören. Innerhalb davon kommen die eigentlichen Eingabeelemente:
<form>
<!-- Eingabefelder kommen hier hinein -->
</form>Das <input>-Element
<input> ist das wichtigste Formular-Element - es ist, genau wie <img>, selbstschließend (kein </input> nötig). Was für eine Art von Eingabefeld es zeigt, steuert das type-Attribut:
<form>
<input type="text">
</form>Speichere das in deiner Datei und schau es dir im Browser an: Du siehst ein einzelnes einzeiliges Textfeld, in das man klicken und tippen kann. Wir lernen im nächsten Kapitel noch viele weitere type-Werte kennen.
Das name-Attribut: wichtig, auch wenn es nicht sichtbar ist
Damit ein Formular später weiß, welcher eingegebene Wert zu welchem Feld gehört, braucht jedes <input> ein name-Attribut:
<input type="text" name="vorname">name ist für den Besucher nicht sichtbar, aber unverzichtbar: Wenn ein Formular abgeschickt wird, weiß der Empfänger dank name, dass der eingegebene Wert zum Feld "vorname" gehört (und nicht zu irgendeinem anderen Feld).
Achtung: In diesem Tutorial bauen wir Formulare rein strukturell, das heißt: Wenn du auf "Absenden" klickst, passiert (noch) nichts Sichtbares, weil dafür Server-Programmierung nötig wäre, die nicht Teil dieses HTML-Tutorials ist. Es geht uns hier ausschließlich darum, das Formular selbst richtig mit HTML aufzubauen.
Dein erstes eigenes Formular
Erstelle eine neue Datei kontakt.html mit dem üblichen Grundgerüst und einem ersten Formularfeld:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kontakt - Finns Fußball-Webseite</title>
</head>
<body>
<h1>Kontakt</h1>
<form>
<input type="text" name="vorname">
</form>
</body>
</html>Dein Projektordner hat jetzt drei Seiten:
meine-webseite/ index.html spieler.html kontakt.html bilder/
Tipp: Vergiss nicht, auch kontakt.html von deiner Startseite aus zu verlinken - du weißt aus Kapitel 14 schon, wie das geht!