Formular
Das Tor zur Kommunikation
Hörst du den verführerischen Ruf der Formulare? Sie sind diese sagenhaften Konstruktionen, die als Brücke zwischen dir und deinen Besuchern dienen. Formulare sind weit mehr als bloße Eingabefelder. Sie sind das Tor, durch das Helden und Heldinnen wertvolle Informationen sammeln und übermitteln können.
Ob es darum geht, eine geheime Nachricht zu versenden, sich für ein episches Turnier anzumelden oder einfach nur ein bisschen Feedback zu geben – Formulare machen’s möglich! Mit einem gut gestalteten Formular öffnest du den Weg zu einer interaktiven Verbindung, bei der jeder Klick wie ein magischer Zauber wirkt, der die Kommunikation zum Leben erweckt. Also, sei kein Feigling, lass deine Besucher das Tor aufstoßen und sieh zu, welche Abenteuer sich entfalten!
Grundlegendes über Formulare
Damit deine Post nicht im Nirgendwo verschwindet
<form>-Element
Lass deine Besucher mit dir in Kontakt treten
Das Formular ist dein treuer Begleiter, ein Werkzeug, das auf den magischen Befehl <form> hört. Mit ihm kannst du ein Portal erschaffen, das direkt mit den Mächten der Server kommuniziert. Dieses Portal hat viele Schlüssel, die als input-Felder bekannt sind, und jedes hat seine eigene geheime Bestimmung.
<form></form>
action & method
So lenkst du deine Formular-Daten
Das action-Attribut zeigt, wohin die gesammelten Daten geschickt werden, während das method-Attribut bestimmt, ob die Informationen diskret wie eine Postkutsche (POST) oder offen wie ein Stadtportal (GET) übermittelt werden. Mit der GET-Methode erscheinen die Daten sichtbar in der URL, was perfekt für einfache Anfragen wie das Abrufen von Suchergebnissen ist. Die POST-Methode hingegen sendet Daten unsichtbar im Nachrichtentext, ideal für vertrauliche Informationen wie Passwörter oder umfangreiche Eingaben.
<form action="/action_page.php" method="get">
ein einfaches Kontaktformular
Dein Draht zur Magie – Sende eine Nachricht
<form action="/action_page.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Dein Name" required> <br><br>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" placeholder="Deine E-Mail" required>
<br><br>
<label for="message">Deine Nachricht:</label><br>
<textarea id="message" name="message" placeholder="Deine Nachricht" required>
</textarea><br><br>
<button type="submit">Nachricht senden</button>
</form>Die Geheimnisse der Zauberformel
Tags und Attribute entschlüsselt
<form>
Der magische Umschlag, der all deine Botschaften umhüllt. Das action-Attribut bestimmt, wohin deine Nachricht fliegt, während das method-Attribut festlegt, wie sie übermittelt wird – hier als geheime Botschaft.
<label>
Diese Beschriftungen sind wie Wegweiser, die deine Besucher sicher durch das Formular führen.
<input type=“text“>
Ein einfaches Eingabefeld, das den Namen des Besuchers aufnimmt. Es ist wie eine leere Schriftrolle, bereit, den Namen zu empfangen. Das placeholder-Attribut gibt einen Hinweis, was ins Feld gehört, und required sorgt dafür, dass der Name nicht in der Dunkelheit verloren geht.
id-Attribut
Die id ist wie ein einzigartiger Ausweis für jedes Feld – nur einmal auf der Seite zu finden. Sie hilft oft, das Feld mit einem <label> zu verbinden oder es in CSS und JavaScript gezielt anzusprechen. In unserem Formular hat das Namensfeld die id=“name“, sodass das Label genau weiß, welches Feld es benennen soll.
name-Attribut
Name ist wie der wahre Name des Feldes, den der Server beim Empfang der Nachricht erkennt. Wenn das Formular abgeschickt wird, werden die gesammelten Informationen mit diesem Namen weitergegeben. Beispielsweise trägt das E-Mail-Feld den Namen name=“email“, sodass der Server genau weiß, dass die E-Mail-Adresse hier wohnt.
<input type=“email“>
Dieses Feld sammelt die E-Mail-Adresse des Besuchers und stellt sicher, dass eine gültige Adresse eingegeben wird, damit die Nachricht ihren Weg zurückfindet.
<textarea>
Hier darf der Besucher seine Nachricht schreiben. Es ist wie ein großes Pergament für lange Botschaften. Auch hier gibt placeholder einen Hinweis auf den Verwendungszweck, und required sorgt dafür, dass das Feld nicht leer bleibt.
<button type=“submit“>
Der Befehlsknopf, der die Nachricht auf die Reise schickt. Ein Klick, und die Botschaft wird versiegelt und macht sich auf den Weg!