19. Das Kontaktformular
Möge unser Netzwerk wachsen und uns verbinden.
Mentor Hiram Abif
Hiram legt den Stift beiseite und betrachtet dich mit ruhiger Erwartung. „Wir brauchen ein Kontaktformular. Nicht irgendein wackelig
zusammengebautes Ding, sondern eins, das funktioniert. Klare Struktur, einfache Bedienung.“
Deine Aufgaben
Beginne mit dem magischen Ritual: dem
-Element.
- Es braucht zwei Attribute: action=“#“ – Das Ziel, wohin die Daten gesendet werden sollen (Nutze: „#“ – Morrigan baut dann den Rest ein)
- method=“POST“ – Damit deine Nachricht geheim bleibt
Um den Inhalt optisch und logisch zusammenzufassen, verwendest du <fieldset>.
Dazu gehört ein sprechender Titel mit <legend>, wie: Werde eine Flamme
Jedes Feld gehört in einen eigenen <div>, damit du es später mit CSS gut stylen kannst. Denk daran: Ein <label> gehört immer zu einem <input>, <select> oder <textarea>.
Und ganz wichtig: Das for-Attribut im <label> muss dem id des Eingabefeldes entsprechen.
Ein klassisches Textfeld, das mit required zur Pflicht wird. Das placeholder ist wie eine
flüsternde Stimme, die dem Benutzer sagt, was er eingeben soll.
Du lässt die Rebellen selbst entscheiden, wer sie sein wollen: Neuling, Code-Meister oder Lichtbringer.
Ein weiteres <select>-Feld mit kleinen Illustrationen – kleine Icons helfen bei der Wahl der Identität. Nutze, die Icons in deinem HTML-Dokument.
Ein <input type=“color“>, damit sich jeder ein Farbsymbol geben kann – praktisch und persönlich.
Ein <input type=“date“>, damit das System weiß, wer wie alt ist (und Seraphina nicht alle einzeln fragen muss).
Hier kommt das <textarea> zum Einsatz – du entscheidest, wie viele Zeilen sichtbar sind (in diesem Fall 4).
Am Ende steht das große Finale:
Ein Button mit der Klasse btn, damit er im
passenden Look erscheint. Pack ihn in
ein eigenes <div class=“submit“>, damit er
optisch hervorsticht.
Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]
<section id="contact" class="container flex contact-container">
<div class="my-large contact-form">
<h2 class="center"><span class="secondary bold">Kontaktiere</span> uns</h2>
<p class="center fw-bold">Sei dabei und verwandle gemeinsam mit uns Aetheron in ein Paradies für alle!</p>
<!-- Fülle hier die fehlenden Tags aus -->
<form action="#" method="POST">
<fieldset>
<legend class="fw-bold capitalize">Werde eine Flamme</legend>
<div>
<label for="name">Dein Name*</label>
<input type="text" id="name" name="name" required placeholder="Dein Name">
</div>
<div>
<label for="membership">Welche Mitgliedschaft?</label>
<select id="membership" name="membership">
<option value="rebellen-novize">Neuling</option>
<option value="code-meister">Code-Meister</option>
<option value="lichtbringer">Lichtbringer</option>
</select>
</div>
<div>
<label for="symbol">Wähle dein Zeichen</label>
<select id="symbol" name="symbol">
<option value="target">Zielscheibe 🎯</option>
<option value="bolt"> Blitz ⚡</option>
<option value="shield"> Schild 🛡️</option>
<option value="star"> Stern ⭐</option>
<option value="pets">Katzenpfote 🐾</option>
</select>
</div>
<div>
<label for="color">Wähle deine Farbe</label>
<input type="color" id="color" name="color">
</div>
<div>
<label for="birthdate">Dein Geburtsdatum</label>
<input type="date" id="birthdate" name="birthdate">
</div>
<div>
<label for="message">Deine Nachricht</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<div class="submit">
<button type="submit" class="btn">Auf zur Rebellion!</button>
</div>
</fieldset>
</form>
</div>
<div class="hero">
<img src="img/heroes/rebel-female.jpg" alt="" class="img-fluid multiply">
</div>
</section>