Das for-Attribut des Labels sollte dem id-Attribute des referenzierten Eingabefeldes entsprechen.
+
+
+
+
textarea für größere Texteingaben
+
Mithilfe von <textarea> kann eine Eingabebox mit variabler Größe erzeugt werden
+
+
+
+
+ <textarea>
+ Hier steht ein default-value Text
+ <textarea>
+
+
+
+
+
+
+
+
+
Mithilfe der Attribute cols und rows kann die Textarea eine bestimmte Anfangs-Größe Einnehmen
+
+
+
+
+ <textarea cols="50" rows="10"><textarea>
+
+
+
+
+
+
+
Beam me up! button um Daten zu versenden
+
+
+
+
Mithilfe eines <button> kann das Formular abgeschickt werden.
+
+
+
+
+ <button type="submit">Absenden</button>
+
+
+
+
+
+
+
Der Browser verwendet die Daten aus dem Form-Tag (action + method), sowie die Eingaben aus den Formular-Feldern.
+
Der Browser versendet die Daten als key-value-Paare. Dabei wird das name-Attribut von jedem Eingabefeld als key verwendet.
+
+
\ No newline at end of file
diff --git a/src/components/slides/html-forms/beyond-text.astro b/src/components/slides/html-forms/beyond-text.astro
new file mode 100644
index 0000000..f0abcbe
--- /dev/null
+++ b/src/components/slides/html-forms/beyond-text.astro
@@ -0,0 +1,191 @@
+
+
+
Eingaben über Texte hinaus
+
+
+ Neben den bisher vorgestellten Möglichkeiten, bietet HTML mit input und weiteren Elementen zusätzliche Eingabemöglichkeiten
+
+
+
+
input type="radio"
+
+
+
+
Dieser Eingabetyp erstellt "Radioboxen", Elemente die gruppiert werden können und nur ein Element gleichzeitig ausgewählt sein darf.
Select bietet (auch heutzutage) einen großen Nachteil: Die Elemente sind schwer zu stylen.
+
Falls eine visuell ansprechendere Komponente gewünscht ist, muss eine eigene implementiert werden (inklusive Unterstüztung von Barrierefreiheits-Features)
+
Alternativ bietet sich auch die Nutzung von Komponenten-Bibliotheken an.
+
+
\ No newline at end of file
diff --git a/src/components/slides/html-forms/index.astro b/src/components/slides/html-forms/index.astro
new file mode 100644
index 0000000..d425348
--- /dev/null
+++ b/src/components/slides/html-forms/index.astro
@@ -0,0 +1,19 @@
+---
+import TitleSlide from './title.astro'
+import Introduction from './introduction.astro'
+import Basics from './basics.astro'
+import Structuring from './structuring.astro'
+import Inputs from './inputs.astro'
+import MoreInputs from './beyond-text.astro'
+import Validation from './validation.astro'
+---
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/slides/html-forms/inputs.astro b/src/components/slides/html-forms/inputs.astro
new file mode 100644
index 0000000..5b8f9a0
--- /dev/null
+++ b/src/components/slides/html-forms/inputs.astro
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
Mehr Eingabemöglichkeiten
+
+
+
Bisher haben wir nur das Standard-Textfeld zur Eingabe von Text verwendet.
+
+
+
+
Der type beim <input>
+
+
+
+
Soweit haben wir bei Inputs das Attribut type als text definiert.
+
Das Textfeld kann aber spezialisiert werden um Eingaben zu sammeln
+
+
+
+
Sichere Eingaben mittels password
+
+ <input type="password" value="geheim">
+
+
+
+
+
+
+
Zahleneingabe mittels number
+
+ <input type="number" value="5">
+
+
+
+
+
+
+
Bietet kleine Buttons an um die Zahl zu ändern
+
Ändern der Zahl mittels Pfeiltasten
+
+ Verschiedene Optionen um Eingabe zu präzisieren
+
+
max & min um Grenzen nach oben und unten zu sezten
Nachteil: Ohne Feedback und Anzeige des aktuellen Wertes, eher sinnlos
+
+
+
+
Alles was Zeiten betrifft
+
+
+
+
+
datetime-local
+
month
+
time
+
week
+
date
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Man sieht, nicht alle Werte bewirken etwas auffälliges, manche Types helfen aber auf mobilen Geräten.
+
+
+
+
+
Jetzt wirds bunt: color
+
+ <input type="color" value="#00ff00">
+
+
+
+
+
+
Dateien auswählen mit file
+
+ <input type="file">
+
+
+
+
+
+
Weitere Text-Basierte Typen
+
+
+
+
+
url für URL's
+
email für E-Mail Adressen
+
tel für Telefonnummern
+
search für Sucheingaben
+
+
+
+
+
Manche Eingabearten validieren die Eingabe, wenn ein User auf "submit" drückt.
+
Oft wird aber mittels Javascript eine komplexere Validierung implementiert (die meist schon Hinweise nach der Eingabe in einem Textfeld auf fehler hinweist)
Bisher haben wir HTML nur dazu verwendet, etwas anzuzeigen.
+
Aber natürlich hat jeder von uns schon einmal Daten in irgendeiner Form auf einer Website eingegeben
+
+
+
+
+
Registrierung / Anmeldung
+
Adresseingabe
+
Zahlungsmittel angeben
+
Eine Beschwerde / Kommentar / Lob schreiben
+
+
+
+
+
🍕
+
+
+
+
+ Wenn auch vieles heutzutage auf Apps gemacht wird, wird euch regelmäßig eine Webform innerhalb einer App über den Weg laufen.
+
+
+
+
+
+
Komplexes Szenario einer Pizzabestellung
+
Kommentare
+
Reisebuchungen
+
etc.
+
+
+
+
+ HTML bietet eine Reihe von Tags um Daten einzugeben, zu sammeln und diese final an einen Server zu schicken um dort bearbeitet zu werden.
+
+
\ No newline at end of file
diff --git a/src/components/slides/html-forms/structuring.astro b/src/components/slides/html-forms/structuring.astro
new file mode 100644
index 0000000..f926e35
--- /dev/null
+++ b/src/components/slides/html-forms/structuring.astro
@@ -0,0 +1,54 @@
+
+
+
+
+
Gruppieren von Eingabe-Elementen
+
+
+
+
+ Mithilfe der Tags fieldset und legend können Zusammenhängende Abschnitte in einem Formular zusammengefasst werden.
+
+
+ Die Tags haben keinen Einfluss darauf, wie die Daten versendet werden.
+
+
+
+
+
+
+
+
+ Alle Zusammenhängende Elemente können in ein fieldset gepackt werden und zusätzlich mit einem legend Beschrieben werden
+
+
\ No newline at end of file
diff --git a/src/components/slides/html-forms/title.astro b/src/components/slides/html-forms/title.astro
new file mode 100644
index 0000000..f7990e5
--- /dev/null
+++ b/src/components/slides/html-forms/title.astro
@@ -0,0 +1,3 @@
+
+
Daten verschicken mit Formularen
+
\ No newline at end of file
diff --git a/src/components/slides/html-forms/validation.astro b/src/components/slides/html-forms/validation.astro
new file mode 100644
index 0000000..84a32d1
--- /dev/null
+++ b/src/components/slides/html-forms/validation.astro
@@ -0,0 +1,146 @@
+
+
+
+
Ist das so richtig? Validierung von Formularen
+
+
+
+
Disclaimer Vorweg:
+
Vertraue niemals von Nutzern eingegebene Daten, selbst wenn eine (Vor)-Validierung im Frontend geschieht!
+
Es sollte sowohl auf der Frontend als auch auf der Backend-Seite validiert werden. Der Nutzer sieht was er falsch gemacht hat und auf der Server-Seite kann man von "sicheren" Daten ausgehen.
+
+
+
+
Validierung im Frontend passiert auf 2 Arten:
+
+
In der Komponente (Tag) eingebaute Attribute die eine Validierung durchführen
+
Eine dynamische Validierung mithilfe von JavaScript
+
+
+
+
+
Diese Präsentation fokusiert sich auf Attribute die den Tags mitgegeben werden können.
+
Drückt ein Nutzer auf den Absende-Button, so validiert der Browser alle Eingabefelder innerhalb des form-Elementes
+
Das Verhalten bei einer Fehlerhaften Eingabe variiert von Browser zu Browser
+
+
+
+
Eine Notwendigkeit: * (required)
+
+
+
+
Das Attribut required kann als "boolsches" Attribut ohne Wert in einer Komponente stehen.
+
Sie sorgt dafür, dass der User einen Wert eingeben haben muss, bevor das Formular durch den Browser versendet wird.
Eingabe-Länge beschränken: mit minlength & maxlength
+
+
+
+
Mithilfe der Attribute minlength & maxlength kann bei Text-Basierten Eingaben auf eine mindestlänge des Eingegebenen Textes (Zeichenlänge) erzwungen werden.
Wie vielleicht bereits beobachtet, haben Eingabefelder wie z.B. type="email" bereits eine selber eingebaute Validierung.
+
Diese Validierung "reicht" aber zumeist nicht und wird mithilfe von pattern und JavaScript erweitert um den Anforderungen gerecht zu werden.
+
+
\ No newline at end of file
diff --git a/src/pages/slides/forms.astro b/src/pages/slides/forms.astro
new file mode 100644
index 0000000..31511be
--- /dev/null
+++ b/src/pages/slides/forms.astro
@@ -0,0 +1,8 @@
+---
+import Reveal from "../../layouts/Reveal.astro";
+import Slides from '../../components/slides/html-forms/index.astro'
+---
+
+
+
+
\ No newline at end of file
+