Die Kunst der Formulare
Ein Wegweiser durch die Welt der Eingabefelder
Formulare, mein lieber Schüler, sind die Werkzeuge der modernen Magie – Brücken zwischen Welten, die Wissen sammeln und Zaubersprüche, ähm, Informationen, übermitteln. Doch fürchte dich nicht vor der Vielfalt ihrer Elemente. Neben den klassischen Form-Elementen spielen auch Input-Types und Input-Attribute eine wichtige Rolle: Sie bestimmen, welche Art von Magie du mit deinen Feldern wirken kannst, sei es ein Datum, eine Zahl oder eine Farbe.
Die Kunst der Formulare mag anfangs wie ein komplizierter Zauber wirken, doch wie jeder gute Magier weiß: Übung macht den Meister. Bald wirst du Eingabefelder so mühelos beherrschen wie das Rühren in einem Heiltrank. Atme tief ein, mein Lehrling, und lass uns beginnen. Unser Lexikon führt dich durch Form-Elemente, Input-Types und Input-Attribute, damit du jedes Werkzeug zur richtigen Zeit einsetzen kannst.
Form Elemente
Eingaben, Auswahl, Buttons – so kommunizieren Nutzer mit deiner Webseite!
Ein Formular ist kein magisches Artefakt, aber es kommt dem schon verdammt nahe. Es sammelt Eingaben, stellt Fragen und wartet geduldig auf Antworten – ganz egal, ob es um Namen, geheime Botschaften oder das Kreuzchen an der richtigen Stelle geht. Dropdown-Menüs lassen Nutzer zwischen Möglichkeiten wählen, Checkboxen entscheiden, ob sie wirklich zustimmen wollen, und Textbereiche geben Raum für epische Romane (oder wütende Beschwerden). Am Ende braucht es nur noch einen Button, um alles in Bewegung zu setzen – und das Schicksal nimmt seinen Lauf.
Button
Der Schlüssel zur Aktion
Ein <button> ist wie ein magischer Schlüssel: Du drückst ihn, und eine Aktion wird ausgelöst. Egal, ob es darum geht, ein Formular abzusenden oder einen Zauber zu aktivieren – der <button> wartet nur darauf, gedrückt zu werden, um seine Magie zu entfalten. Ein einfacher Druck, und schon passiert das, was du dir gewünscht hast – mit der Leichtigkeit eines echten Zaubers!
<button type="submit">Zauber abschicken</button>
Input
Das Tor zur Magie
Das <input>-Element ist wie ein unscheinbares Portal: Du gibst etwas ein, vielleicht nur einen Namen, vielleicht aber auch den geheimen Code zum Zugang zur magischen Bibliothek – und im Hintergrund setzt sich das Universum in Bewegung, bereit, deine Wünsche zu erfüllen. Einfach, nicht wahr? Aber Vorsicht! Selbst kleine Eingaben könnten eine magische Kettenreaktion auslösen.
<input type="text" name="name" placeholder="Schreib was">
Label
Das Etikett für deine Eingabefelder
Das <label> funktioniert wie ein Zauberetikett. Es weist Eingabefelder klar aus und gibt ihnen einen Namen. Klickst du auf das label, weiß das verbundene Feld, dass es jetzt im Fokus steht – als hättest du das Etikett direkt auf das Feld geklebt.
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Textarea
der Bereich für die langen Nachrichten
Der Textbereich ist wie eine endlose Pergamentrolle, die nur darauf wartet, mit deinen Gedanken, Träumen und meisterhaften Plänen gefüllt zu werden. Hier hast du den Raum, um dich richtig auszubreiten, egal ob epische Nachrichten oder die nächsten Schritte deines Abenteuers.
<textarea id="message"></textarea>
Select
Der magische Auswahltrank
Das <select>-Element ist wie ein Auswahltrank in deiner Hand: Du hast verschiedene Zutaten zur Wahl, und nur ein Klick auf das Menü öffnet die verborgene Liste. Ob du nun einen Heiltrank oder einen Feuerschutz suchst – das <select> gibt dir die Macht, genau das auszuwählen, was du brauchst.
<label for="potion">Wähle deinen Trank:</label>
<select id="potion" name="potion">
<option value="healing">Heiltrank</option>
<option value="mana">Mana-Trank</option>
<option value="fire_protection">Feuerschutz</option>
</select>
Fieldset und Legend
Die schützenden Wappen des Formulars
Im magischen Reich des HTML sind <fieldset> und <legend> wie schützende Barrieren und mächtige Schilder für deine Formulare. Das <fieldset> umrahmt und gruppiert verwandte Elemente, während das <legend> als Titel über allem thront, den Inhalt erklärt und die Bedeutung hervorhebt.
<fieldset>
<legend>Heldeninformationen</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="class">Klasse:</label>
<select id="class" name="class">
<option value="krieger">Krieger</option>
<option value="magier">Magier</option>
<option value="schurke">Schurke</option>
</select>
</fieldset>
Wie das <optgroup>-Tag das Dropdown-Chaos bändigt
und für Sortier-Spaß sorgt!
Das <optgroup>-Tag in HTML hilft dir, verwandte Optionen innerhalb eines Dropdown-Menüs (<select>) in logische Gruppen zu unterteilen. So bleibt das Dropdown übersichtlich und benutzerfreundlich. Jede Gruppe erhält einen Titel, der durch das label-Attribut des <optgroup>-Tags definiert wird. Zum Beispiel kannst du „Zitrusfrüchte“, „Beeren“ und „Tropische Früchte“ als Gruppen anlegen, damit die Auswahl kinderleicht wird. So kannst du zahlreiche Optionen sinnvoll gruppieren und das Dropdown-Chaos in geordnete Bahnen lenken!
<label for="fruits">Obst:</label>
<select id="fruits" name="fruits">
<optgroup label="Zitrusfrüchte">
<option value="orange">Orange</option>
<option value="lemon">Zitrone</option>
</optgroup>
<optgroup label="Beeren">
<option value="strawberry">Erdbeere</option>
<option value="blueberry">Heidelbeere</option>
</optgroup>
</select>
Datenlisten, Optionen & Gruppierungen
Wie das <datalist>-Element deine Tastatur magisch beim Tippen unterstützt!
Das <datalist>-Element definiert eine Liste von vordefinierten Optionen für ein Eingabefeld (<input>). Sobald der Benutzer mit der Eingabe beginnt, zeigt der Browser eine Liste passender Vorschläge an. Diese Funktion ist besonders nützlich, um den Benutzer durch die Eingabe zu führen, ohne dass er eine Dropdown-Liste manuell öffnen muss – eine kleine Erleichterung im Alltag des Web-Abenteuers!
<label for="browser">Wähle deinen Lieblingsbrowser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
Input-Typen im HTML
Von Textfeldern bis Zahlenrätseln – Eingaben in jeder Form und Farbe.
Nicht alle Eingabefelder sind gleich. Manche wollen Text, andere bestehen auf Zahlen, und wieder andere haben einen eingebauten Kalender, um sicherzustellen, dass du nie wieder einen Termin vergisst. Es gibt Felder für Passwörter, E-Mails, Farben und sogar versteckte Werte, die niemand sehen soll – außer dem Code. Kurz gesagt: Was du eingeben kannst, bestimmt der Input-Typ – also wähle weise.
Button
Der stille Auslöser
Der input type=“button“ ist wie ein stiller Zauber, der auf dein Kommando wartet. Anders als sein normaler button-Kollege, führt er keine Aktion von allein aus, denn er wartet auf einen extra Funken, meist in Form einer kryptischen Programmiersprache, um wirklich magisch zu wirken. Ein Klick, und mit dem richtigen Zauber dahinter entfaltet er seine Kraft – aber nur, wenn du ihm sagst, was er tun soll!
<input type="button" value="Zauber starten"
onclick="alert('Zauber gewirkt!')">
checkbox
Einfach oder Mehrfachauswahl – weil du alles haben kannst
Checkboxen sind wie kleine Siegel, die du setzen kannst, um deine Wahl zu besiegeln. Und das Beste daran? Du kannst mehrere gleichzeitig aktivieren! Warum dich für eines entscheiden, wenn du so viele Optionen wie du willst wählen kannst? Die Macht liegt in deiner Hand.
<p>Wähle deine magischen Fähigkeiten:</p>
<input type="checkbox" id="flight" name="powers" value="flight">
<label for="flight">Flug</label><br>
<input type="checkbox" id="strength" name="powers" value="strength">
<label for="strength">Übermenschliche Stärke</label>
color
Der Zauberstab der Farben
Der input type=“color“ ist wie ein kleiner, magischer Farbzauberstab. Mit einem Klick öffnest du ein geheimnisvolles Farbspektrum, und du kannst die perfekte Farbe für deine nächste Kreation auswählen. Kein Mischen von Tränken nötig, nur ein Klick – und schon hast du die Farbe in der Hand.
<label for="color">Wähle eine Farbe:</label>
<input type="color" id="color" name="color" value="#ffcc00">
date
Der Hüter der Zeit
Mit input type=“date“ kannst du wie ein Chronomant ein bestimmtes Datum wählen. Ob vergangene Zeiten oder zukünftige Abenteuer – dieses Feld kennt die Geheimnisse des Kalenders.
<label for="date">Wähle ein Datum:</label>
<input type="date" id="date" name="date">
datetime-local
Der Zeitnavigator
Das input type=“datetime-local“ verbindet die Kräfte von Zeit und Raum. Du gibst Datum und Uhrzeit an, als würdest du den genauen Moment für ein magisches Ereignis festlegen.
<label for="appointment">Wähle Datum und Uhrzeit:</label>
<input type="datetime-local" id="appointment" name="appointment">
Der Botschafter
Mit input type=“email“ übermittelst du magische Botschaften. Es prüft, ob deine Nachricht eine gültige Form hat, bevor sie in die digitale Weite entsendet wird.
<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">
file
Der Archivmeister
Das input type=“file ist wie eine Schatztruhe. Du lädst wertvolle Dateien hoch, die dann für das nächste Abenteuer bereitstehen, sei es ein Zauberbuch oder eine geheimnisvolle Karte.
<label for="file">Lade eine Datei hoch:</label>
<input type="file" id="file" name="file">
hidden
Der Unsichtbare
input type=“hidden arbeitet im Verborgenen. Es trägt geheime Informationen, die du zwar nicht siehst, die aber dennoch einen wichtigen Beitrag leisten, um den Zauber zu wirken.
<input type="hidden" name="geheimnis" value="42">
image
Der magische Spiegel
Das input type=“image ist wie ein Abbild-Zauber. Du klickst auf das Bild, und schon wird der Zauber aktiviert – ohne dass du einen herkömmlichen Button brauchst.
<input type="image" src="image.png" alt="Zauber aktivieren">
number
Der Zahlenschlüssel
input type=“number ist der Schlüssel zu präzisen Eingaben. Du bestimmst genau, wie viele Tränke du brauchst oder wie viel Gold du einfordern möchtest.
<label for="amount">Anzahl:</label>
<input type="number" id="amount" name="amount" min="1" max="10">
password
Das geheime Wort
Mit input type=“password gibst du ein geheimes Wort ein, das unsichtbar bleibt. Nur du und der Zauberer, der es verarbeitet, kennt den Inhalt.
<label for="password">Passwort:</label>
<input type="password" id="password" name="password">
radio
Die Auswahlkugel
input type=“radio erlaubt dir, eine von vielen Optionen zu wählen, wie eine Zauberkugel, die nur eine Antwort enthüllt.
<input type="radio" id="option1" name="option" value="1">
<label for="option1">Feenstaub</label>
range
Der magische Schieberegler
Mit input type=“range bestimmst du die Stärke des Zaubers. Ein einfacher Schieberegler, der das volle Potenzial deiner Magie entfaltet.
<label for="power">Magiekraft:</label>
<input type="range" id="power" name="power" min="1" max="10">
reset
Der Rückgängig-Zauber
input type=“reset ist wie ein Zauberspruch, der alles auf Anfang setzt. Einmal geklickt, und alle Veränderungen sind ungeschehen.
<input type="reset" value="Zurücksetzen">
search
Der Suchzauber
Mit input type=“search zauberst du durch Texte, als hättest du ein magisches Wörterbuch zur Hand. Es sucht genau das, was du brauchst.
<label for="search">Suche:</label>
<input type="search" id="search" name="search">
submit
Der magische Ruf
input type=“submit ist der endgültige Spruch. Mit einem Klick wird alles abgeschickt, als würdest du den letzten Zauberstabschwung vollführen.
<input type="submit" value="Abschicken">
tel
Der magische Ruf
input type=“tel erlaubt es dir, magische Verbindungen aufzubauen. Telefon-nummern werden genau geprüft, bevor der Ruf erschallt.
<label for="tel">Telefonnummer:</label>
<input type="tel" id="tel" name="tel">
text
Der Vielseitige
input type=“text ist das Schweizer Taschenmesser der Magier. Ob Namen, Orte oder Botschaften, er erfasst alles, was du eingibst.
<input type="text" name="name">
time
Der Zeitzauber
Mit input type=“time kannst du präzise den Moment festlegen. Du gibst eine Zeit an, als würdest du eine Verabredung im Zauberwald machen.
<label for="time">Wähle eine Zeit:</label>
<input type="time" id="time" name="time">
URL
Das magische Tor
Mit input type=“url öffnest du das Tor zu fremden Welten. Du gibst eine Webadresse ein, und schon führt der Weg ins Unbekannte.
<label for="url">Webseite:</label>
<input type="url" id="url" name="url"
placeholder="https://example.com">
week
Der Wochenweiser
Mit input type=“week schaust du nicht auf Tage, sondern auf ganze Wochen. Du planst einen Abschnitt deiner Reise, Woche für Woche.
<label for="week">Wähle eine Woche:</label>
<input type="week" id="week" name="week">
Input-Attribute im HTML
Mehr als nur ein leeres Feld – steuere, begrenze und erleichtere Eingaben!
Ein einfaches Eingabefeld reicht nicht? Kein Problem! Pflichtfelder, Platzhalter, Maximallängen oder automatische Vorschläge – all das regelst du mit den richtigen Attributen. Required sorgt dafür, dass niemand das Feld leer lässt, maxlength verhindert Romane in einer Zeile, und placeholder gibt einen dezenten Hinweis, was erwartet wird. Kurz gesagt: Mit Input-Attributen machst du Formulare klüger – und Nutzer glücklicher.
autocomplete
Die Autovervollständigung
Das autocomplete-Attribut ist wie eine schnelle Erinnerungshilfe für deine Magie. Es schlägt dir bereits getätigte Eingaben vor, damit du sie nicht jedes Mal neu tippen musst.
<input type="text" autocomplete="on">autofocus
Der sofortige Zauberblick
Mit dem autofocus-Attribut weiß das Feld sofort, dass es an der Reihe ist. Der Fokus ist da, als hättest du dem Zauber eine direkte Anweisung gegeben und das Eingabefeld in den Fokus gerückt.
<input type="text" autofocus>disabled
Der gebannte Zauber
Das disabled-Attribut deaktiviert ein Feld komplett. Es ist wie ein eingeschlafener Zauber, den du nicht aktivieren kannst – zumindest nicht ohne das richtige Gegenmittel.
<input type="text" disabled>height & width
Der Größenzauber
Mit den Attributen height und width gibst du einem Bild oder Element seine genaue Größe, damit der Zauber seine Form behält und nicht aus den Fugen gerät.
<input type="image" width="100">list
Die versteckte Liste
Das list-Attribut erlaubt es, auf eine verborgene Liste von Optionen zuzugreifen. Es ist, als würdest du ein geheimes Verzeichnis öffnen, das dir sofort die richtigen Antworten anbietet.
<input type="text" list="browsers">maxlength
Der Zeichenwächter
Das maxlength-Attribut wirkt wie ein Wächter, der sicherstellt, dass niemand zu viele Zeichen in ein Feld einträgt. Der Zauber kann nicht überschritten werden.
<input type="text" maxlength="10">min & max
Grenzen der Magie
Mit den Attributen min und max setzt du klare Grenzen für Zahlen oder Daten. Wie die Regeln der Magie, die festlegen, wie stark ein Zauber sein darf oder wann er gewirkt werden kann.
<input type="number" min="1" max="100">multiple
Der Mehrfachzauber
Das multiple-Attribut gibt dir die Fähigkeit, mehrere Optionen auf einmal zu wählen, wie das gleichzeitige Aktivieren mehrerer Schriftrollen, die du zum Alchemiemeister schicken möchtest.
<input type="file" multiple>pattern
Der Musterzauber
Das pattern-Attribut legt fest, welches Format Eingaben haben müssen, und überprüft die Eingaben. Es wirkt wie ein Geheimcode, der nur korrekte Muster akzeptiert und so Fehler verhindert.
<input type="text" pattern="[A-Za-z]{5}>placeholder
Der Platzhalter für Zauber
Das placeholder-Attribut ist wie ein flüchtiger Hinweis in einem alten Zauberbuch. Es zeigt dir, was in das Feld gehört, aber verschwindet, sobald du beginnst, deine eigenen Worte einzutragen.
<input type="text" placeholder="Name">readonly
Der unantastbare Zauber
Mit dem readonly-Attribut wird ein Eingabefeld wie ein versiegeltes Schriftstück. Du kannst es sehen, aber nicht ändern, so einfach ist das!
<input type="text" readonly>required
Die zwingende Zauberformel
Mit dem required-Attribut machst du ein Feld obligatorisch. Es ist wie eine magische Regel: Ohne die Eingabe kann der Zauber nicht gewirkt werden.
<input type="email" required>size
Die Weite des Zaubers
Mit dem size-Attribut bestimmst du die Breite eines Eingabefeldes. Hier passt du die Größe an, damit der Zauber genügend Platz zum Wirken hat.
<input type="text" size="40">step
Der kontrollierte Schritt
Das step-Attribut sorgt dafür, dass Zahlen oder Zeitangaben in festen Schritten erfolgen. Wie das genaue Abmessen von Zutaten für einen Trank – immer präzise und ohne Abweichung.
<input type="number" step="5">value
Der Wert im Herzen
Das value-Attribut ist wie die innere Essenz eines Zaubers. Es legt fest, welcher Text oder welche Zahl im Feld erscheinen soll, sobald es beschworen wird.
<input type="text" value="Name">In dieser Lektion hast du gelernt…
- Wie du Form-Elemente nutzt, um Nutzereingaben zu sammeln und mit dem Server zu kommunizieren.
- Warum Formulare eine zentrale Rolle spielen, weil sie Interaktion ermöglichen und Daten strukturiert erfassen.
- Wie du verschiedene Input-Typen einsetzt, um spezifische Eingaben wie Text, E-Mail, Passwörter oder Zahlen gezielt abzufragen.
- Weshalb Input-Attribute wichtig sind, um Eingaben zu steuern, zu validieren und benutzerfreundlicher zu gestalten
- Wozu du Input-Felder mit Attributen wie
required,maxlengthoderpatternanpassen kannst, um die Eingaben gezielt zu begrenzen. - Weshalb Buttons und Absende-Mechanismen entscheidend sind, um die erfassten Daten korrekt zu übermitteln.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Der Zutatenkatalog der Wunder
In einem verwunschenen Alchemieladen, wo die Gläser mit schimmernden Pulvern flüstern und die Kräuter in den Regalen sich geheimnisvoll wiegen, gibt es einen Katalog, der niemals fertig zu sein scheint. Deine Aufgabe: Erstelle ein Formular, das die magischen Zutaten samt Mengen und kleinen, frechen Anmerkungen erfasst. Mit HTML bereitest du Eingabefelder vor, die nicht nur praktisch, sondern auch so elegant sind, dass selbst der grantige Kräuterkundler Nestor anerkennend nicken würde. Und wer weiß – vielleicht trägst du ja auch einen Hauch von Chaos in die Ordnung ein, wie es sich für echte Magie gehört!
Deine Aufgabe: Die Erstellung eines Formulars
Erstelle ein Formular wie auf der Abbildung.
- Verwende das <form>-Element mit action und method, um die Formularübermittlung zu konfigurieren. Wähle die Methode POST für eine sichere Übermittlung.
- Füge Textfelder, Zahlenfelder und Auswahlfelder hinzu. Verwende label-Tags, um sicherzustellen, dass die Felder korrekt beschriftet und benutzerfreundlich sind.
- Verwende Checkboxen und Radio-Buttons, um den Zustand der Zutaten und deren Seltenheit festzulegen.
- Teile das Formular in Abschnitte mit fieldset-Elementen und nutze legend, um die Abschnitte zu beschreiben.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
<h1>Erfasse die Zutaten</h1>
<form action="submit.html" method="POST">
<fieldset>
<legend>Grundinformationen</legend>
<label for="name">Name der Zutat:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="type">Typ der Zutat:</label>
<select id="type" name="type">
<optgroup label="Kräuter">
<option value="mondkraut">Mondkraut</option>
<option value="bärenklau">Bärenklau</option>
</optgroup>
<optgroup label="Beeren">
<option value="leuchtbeere">Leuchtbeere</option>
<option value="nachtschatten">Nachtschatten</option>
</optgroup>
</select><br><br>
<label for="quantity">Menge:</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" required><br><br>
<label for="unit">Einheit:</label>
<datalist id="units">
<option value="Gramm">
<option value="Milliliter">
<option value="Stück">
</datalist>
<input type="text" list="units" name="unit" required><br><br>
</fieldset>
<fieldset>
<legend>Zustand der Zutat</legend>
<label><input type="checkbox" name="zustand" value="frisch"> Frisch</label><br>
<label><input type="checkbox" name="zustand" value="getrocknet"> Getrocknet</label><br>
<label><input type="checkbox" name="zustand" value="pulverisiert"> Pulverisiert</label><br>
</fieldset>
<fieldset>
<legend>Zusätzliche Informationen</legend>
<label>Ist die Zutat selten?</label><br>
<label><input type="radio" name="selten" value="ja"> Ja</label>
<label><input type="radio" name="selten" value="nein"> Nein</label><br><br>
</fieldset>
<button type="submit">Zutat hinzufügen</button>
</form>