mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-06 11:48:49 +00:00
Code Activity

feat(slides): add forms in html

Browse source
This commit is contained in:
Denis Ergin 2024-10-07 21:49:32 +02:00
parent 6aa0128a13
commit 62854c484c
10 changed files with 757 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/month-picker.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 532 KiB

153
src/components/slides/html-forms/basics.astro Normal file
View file

@ -0,0 +1,153 @@
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form -->
<section>
<section>
<h2>Basics eines Formulars</h2>
</section>
<section>
<p>Alle abzufragenden Inhalte werden in ein spezielles <code>form</code>-Tag platziert</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form action="https://example.com/" method="get"&gt;
&lt;!-- Hier kommen die Eingabe-Felder hinein --&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<p>Das <code>action</code>-Attribut definiert wohin die Daten gesendet werden, wenn der User auf "absenden" klickt.</p>
<p>Das <code>method</code>-Attribut definiert wie die Daten versendet werden (HTTP-Methode)</p>
</section>
<section>
<h3>Label & Eingabefeld</h3>
</section>
<section>
<p>Es empfiehlt sich, jedes Eingabefeld mit einem <code>label</code>-Tag zu versehen.</p>
<p>Der Nutzer versteht einfacher, was er eingeben muss und zusätzlich erhält der Screenreader mehr Informationen zum vorlesen.</p>
</section>
<section>
<p>Das erste Tag, um Daten einzugeben, ist <code>input</code>.</p>
<p>Mithilfe von Input können alle Text-Relevanten Informationen eingegeben werden.</p>
<p>Das Tag bietet Attribute um die gewünschte Eingabe zu verfeinern.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form action="https://example.com/" method="get"&gt;
&lt;p&gt;
&lt;label for="name"&gt;Dein Name:&lt;/label&gt;
&lt;input type="text" id="name" name="username"&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form action="" method="get">
<p>
<label for="name">Dein Name</label><input type="text" id="name" name="username">
</p>
</form>
</section>
<section>
<p>Wir können auch ein Textfeld im Voraus ausfüllen, nutze dafür das <code>value</code> Attribut!</p>
<pre class="html"><code data-trim data-line-numbers="8">
&lt;form action="https://example.com/" method="get"&gt;
&lt;p&gt;
&lt;label for="name"&gt;Dein Name:&lt;/label&gt;
&lt;input
type="text"
id="name"
name="username"
value="Hier könnte deine Werbung stehen!"
&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form action="" method="get">
<p>
<label for="name">Dein Name</label><input type="text" id="name" name="username" value="Hier könnte deine Werbung stehen!" style="width: 300px;">
</p>
</form>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers="3,6">
&lt;form action="https://example.com/" method="get"&gt;
&lt;p&gt;
&lt;label for="name"&gt;Dein Name:&lt;/label&gt;
&lt;input
type="text"
id="name"
name="username"
value="Hier könnte deine Werbung stehen!"
&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<p>Das <code>for</code>-Attribut des Labels sollte dem <code>id</code>-Attribute des referenzierten Eingabefeldes entsprechen.</p>
</section>
<section>
<h3><code>textarea</code> für größere Texteingaben</h3>
<p>Mithilfe von <code>&lt;textarea&gt;</code> kann eine Eingabebox mit variabler Größe erzeugt werden</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;textarea&gt;
Hier steht ein default-value Text
&lt;textarea&gt;
</code></pre>
</section>
<section>
<textarea>Hier steht ein default-value Text</textarea>
</section>
<section>
<p>Mithilfe der Attribute <code>cols</code> und <code>rows</code> kann die Textarea eine bestimmte Anfangs-Größe Einnehmen</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;textarea cols="50" rows="10"&gt;&lt;textarea&gt;
</code></pre>
</section>
<section><textarea cols="50" rows="10"></textarea></section>
<section>
<h3>Beam me up! <code>button</code> um Daten zu versenden</h3>
</section>
<section>
<p>Mithilfe eines <code>&lt;button&gt;</code> kann das Formular abgeschickt werden.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;button type="submit"&gt;Absenden&lt;/button&gt;
</code></pre>
</section>
<section><button type="submit">Absenden</button></section>
<section>
<p>Der Browser verwendet die Daten aus dem Form-Tag (action + method), sowie die Eingaben aus den Formular-Feldern.</p>
<p>Der Browser versendet die Daten als key-value-Paare. Dabei wird das <code>name</code>-Attribut von jedem Eingabefeld als <strong>key</strong> verwendet.</p>
</section>
</section>

191
src/components/slides/html-forms/beyond-text.astro Normal file
View file

@ -0,0 +1,191 @@
<section>
<section>
<h2>Eingaben über Texte hinaus</h2>
</section>
<section>
Neben den bisher vorgestellten Möglichkeiten, bietet HTML mit <code>input</code> und weiteren Elementen zusätzliche Eingabemöglichkeiten
</section>
<section>
<h3><code>input type="radio"</code></h3>
</section>
<section>
<p>Dieser Eingabetyp erstellt "Radioboxen", Elemente die gruppiert werden können und nur ein Element gleichzeitig ausgewählt sein darf.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;input type="radio" name="frucht" id="apfel" value="Apfel"&gt;
&lt;input type="radio" name="frucht" id="birne" value="Birne"&gt;
&lt;input type="radio" name="frucht" id="banane" value="Banane"&gt;
</code></pre>
</section>
<section>
<p>Hinweis: Alle Inputs wurden mit einem Label versehen</p>
<p>
<label for="apfel">Apfel</label>
<input type="radio" name="frucht" id="apfel" value="Apfel">
</p>
<p>
<label for="birne">Birne</label>
<input type="radio" name="frucht" id="birne" value="Birne">
</p>
<p>
<label for="banane">Banane</label>
<input type="radio" name="frucht" id="banane" value="Banane">
</p>
</section>
<section>
<ul>
<li>Die Gruppierung erfolgt mithilfe des Attributes <code>name</code></li>
<li>Gruppierte Elemente erlauben es nur, dass ein Element gleichzeitig ausgewählt ist</li>
<li>"Geeignet" für bis zu 5 Auszuwählende Elemente</li>
<li>Alternative bei mehr Elementen existiert</li>
</ul>
</section>
<section>
<h3><code>input type="checkbox"</code></h3>
</section>
<section>
<p>
Checkboxen erlauben eine <code>true/false</code> Abfrage beim User im Stil einer anklickbaren Checkbox
</p>
</section>
<section>
<pre class="html"><code data-trim>
&lt;input type="checkbox" name="akzeptiert" id="accepted"&gt;
</code></pre>
</section>
<section>
<p>Hinweis: Dieser Checkbox wurde zusätzlich ein Label hinzugefügt</p>
<p><label for="accept">Akzeptieren?</label><input type="checkbox" name="accept" id="accept"></p>
</section>
<section>
<h3>Lange Listen: <code>select</code></h3>
</section>
<section>
<p>Das <code>select</code>-Element erlaubt es, lange Listen in einem extra Container mit einer Scrollbar anzuzeigen.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;select name="animals"&gt;
&lt;option value="cat"&gt;Katze&lt;/option&gt;
&lt;option value="dog"&gt;Hund&lt;/option&gt;
&lt;option value="bird"&gt;Vogel&lt;/option&gt;
&lt;/select&gt;
</code></pre>
</section>
<section>
<label for="animals">Tiere</label>
<select name="animals" id="animals">
<option value="cat">Katze</option>
<option value="dog">Hund</option>
<option value="bird">Vogel</option>
</select>
</section>
<section>
<p>Eine <code>option</code> mit <code>value=""</code> dient als Anzeige eines noch nicht ausgewählten Wertes</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;select name="animals"&gt;
&lt;option value=""&gt;Biete wähle ein Tier&lt;/option&gt;
&lt;option value="cat"&gt;Katze&lt;/option&gt;
&lt;option value="dog"&gt;Hund&lt;/option&gt;
&lt;option value="bird"&gt;Vogel&lt;/option&gt;
&lt;/select&gt;
</code></pre>
</section>
<section>
<label for="animals">Tiere</label>
<select name="animals" id="animals">
<option value="">Biete wähle ein Tier</option>
<option value="cat">Katze</option>
<option value="dog">Hund</option>
<option value="bird">Vogel</option>
</select>
</section>
<section>
<p>Wenn mehrere Optionen Auswählbar sein sollen, lässt sich dies mit dem <code>multiple</code>-Attribut verwirklichen.</p>
<p>Dabei wird das <code>select</code> als eine Box mit mehrere Zeilen (mit Scroll) dargestellt. Mehrere Optionen können gleichzeitig mit STRG/CMD ausgewählt werden.</p>
</section>
<section>
<p>Falls eine Option mit leerem Wert (<code>value=""</code>) existiert, kann dieses mit dem Attribut <code>disabled</code> nicht Anwählbar angezeigt werden.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;select name="animals"&gt;
&lt;option value="" disabled&gt;Biete wähle ein Tier&lt;/option&gt;
&lt;option value="cat"&gt;Katze&lt;/option&gt;
&lt;option value="dog"&gt;Hund&lt;/option&gt;
&lt;option value="bird"&gt;Vogel&lt;/option&gt;
&lt;/select&gt;
</code></pre>
</section>
<section>
<label for="animals">Tiere</label>
<select name="animals" id="animals" multiple>
<option value="" disabled>Biete wähle mindestens ein Tier</option>
<option value="cat">Katze</option>
<option value="dog">Hund</option>
<option value="bird">Vogel</option>
</select>
</section>
<section>
<p>Weiter lassen sich die Optionen in einem <code>select</code> mithilfe des Tag <code>optgroup</code> kategorisieren</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;select name="animals"&gt;
&lt;optgroup label="Katzenrassen"&gt;
&lt;option value="bsh"&gt;British Shorthair&lt;/option&gt;
&lt;option value="mc"&gt;Maine Coon&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label="Hunderassen"&gt;
&lt;option value="gs"&gt;Schäferhund&lt;/option&gt;
&lt;option value="poodle"&gt;Pudel&lt;/option&gt;
&lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
</section>
<section>
<label for="animals">Rassen</label>
<select name="animals" id="animals">
<optgroup label="Katzenrassen">
<option value="bsh">British Shorthair</option>
<option value="mc">Maine Coon</option>
</optgroup>
<optgroup label="Hunderassen">
<option value="gs">Schäferhund</option>
<option value="poodle">Pudel</option>
</optgroup>
</select>
</section>
<section>
<p>Select bietet (auch heutzutage) einen großen Nachteil: Die Elemente sind schwer zu stylen.</p>
<p>Falls eine visuell ansprechendere Komponente gewünscht ist, muss eine eigene implementiert werden (inklusive Unterstüztung von Barrierefreiheits-Features)</p>
<p>Alternativ bietet sich auch die Nutzung von Komponenten-Bibliotheken an.</p>
</section>
</section>

19
src/components/slides/html-forms/index.astro Normal file
View file

@ -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'
---
<div class="slides">
<TitleSlide />
<Introduction />
<Basics />
<Structuring />
<Inputs />
<MoreInputs />
<Validation />
</div>

144
src/components/slides/html-forms/inputs.astro Normal file
View file

@ -0,0 +1,144 @@
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls -->
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types -->
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls -->
<section>
<section>
<h2>Mehr Eingabemöglichkeiten</h2>
</section>
<section>
<p>Bisher haben wir nur das Standard-Textfeld zur Eingabe von Text verwendet.</p>
</section>
<section>
<h3>Der <code>type</code> beim <code>&lt;input&gt;</code></h3>
</section>
<section>
<p>Soweit haben wir bei Inputs das Attribut <code>type</code> als <code>text</code> definiert.</p>
<p>Das Textfeld kann aber spezialisiert werden um Eingaben zu sammeln</p>
</section>
<section>
<h4>Sichere Eingaben mittels <code>password</code></h4>
<pre class="html"><code data-trim>
&lt;input type="password" value="geheim"&gt;
</code></pre>
</section>
<section><input type="password" value="geheim"></section>
<section>
<h4>Zahleneingabe mittels <code>number</code></h4>
<pre class="html"><code data-trim>
&lt;input type="number" value="5"&gt;
</code></pre>
</section>
<section><input type="number" value="5"></section>
<section>
<ul>
<li>Bietet kleine Buttons an um die Zahl zu ändern</li>
<li>Ändern der Zahl mittels Pfeiltasten</li>
<li>
Verschiedene Optionen um Eingabe zu präzisieren
<ul>
<li><code>max</code> &amp; <code>min</code> um Grenzen nach oben und unten zu sezten</li>
<li><code>step</code> um Schritte anzugeben (Pfeile)</li>
</ul>
</li>
</ul>
</section>
<section>
<h4>Zahleneingabe mittels <code>number</code></h4>
<pre class="html"><code data-trim>
&lt;input type="number" min="1" max="10" step="2" value="1"&gt;
</code></pre>
</section>
<section><input type="number" min="1" max="10" step="2" value="1"></section>
<section>
<h4>Alternative Zahleneingabe mit <code>range</code></h4>
</section>
<section>
<p>Eine weitere Möglichkeit, Zahlen einzugeben, besteht darin einen Slider anzuzeigen</p>
</section>
<section>
<pre class="html"><code data-trim>
&lt;input type="range" min="1" max="10" step="1" value="1"&gt;
</code></pre>
</section>
<section><input type="range" min="1" max="10" step="1" value="1"></section>
<section>
<p>Nachteil: Ohne Feedback und Anzeige des aktuellen Wertes, eher sinnlos</p>
</section>
<section>
<h4>Alles was Zeiten betrifft</h4>
</section>
<section>
<ul style="font-family: monospace;">
<li>datetime-local</li>
<li>month</li>
<li>time</li>
<li>week</li>
<li>date</li>
</ul>
</section>
<section>
<input type="datetime-local">
<br>
<input type="month">
<br>
<input type="time">
<br>
<input type="week">
<br>
<input type="date">
</section>
<section>
<p>Man sieht, nicht alle Werte bewirken etwas auffälliges, manche Types helfen aber auf mobilen Geräten.</p>
<img src="/images/month-picker.jpeg" alt="Ein Monats-Picker auf einem iOS Gerät geöffnet" height="300" />
</section>
<section>
<h4>Jetzt wirds bunt: <code>color</code></h4>
<pre class="html"><code data-trim>
&lt;input type="color" value="#00ff00"&gt;
</code></pre>
</section>
<section><input type="color" value="#00ff00"></section>
<section>
<h4>Dateien auswählen mit <code>file</code></h4>
<pre class="html"><code data-trim>
&lt;input type="file"&gt;
</code></pre>
</section>
<section><input type="file" ></section>
<section>
<h4>Weitere Text-Basierte Typen</h4>
</section>
<section>
<ul>
<li><code>url</code> für URL's</li>
<li><code>email</code> für E-Mail Adressen</li>
<li><code>tel</code> für Telefonnummern</li>
<li><code>search</code> für Sucheingaben</li>
</ul>
</section>
<section>
<p>Manche Eingabearten validieren die Eingabe, wenn ein User auf "submit" drückt.</p>
<p>Oft wird aber mittels Javascript eine komplexere Validierung implementiert (die meist schon Hinweise nach der Eingabe in einem Textfeld auf fehler hinweist)</p>
</section>
</section>

39
src/components/slides/html-forms/introduction.astro Normal file
View file

@ -0,0 +1,39 @@
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms -->
<section>
<section>
<p>Bisher haben wir HTML nur dazu verwendet, etwas anzuzeigen.</p>
<p>Aber natürlich hat jeder von uns schon einmal Daten in irgendeiner Form auf einer Website eingegeben</p>
</section>
<section>
<ul>
<li>Registrierung / Anmeldung</li>
<li>Adresseingabe</li>
<li>Zahlungsmittel angeben</li>
<li>Eine Beschwerde / Kommentar / Lob schreiben</li>
</ul>
</section>
<section>
<p style="font-size: 12rem;">🍕</p>
</section>
<section>
<p>
Wenn auch vieles heutzutage auf Apps gemacht wird, wird euch regelmäßig eine Webform innerhalb einer App über den Weg laufen.
</p>
</section>
<section>
<ul>
<li>Komplexes Szenario einer Pizzabestellung</li>
<li>Kommentare</li>
<li>Reisebuchungen</li>
<li>etc.</li>
</ul>
</section>
<section>
HTML bietet eine Reihe von Tags um Daten einzugeben, zu sammeln und diese final an einen Server zu schicken um dort bearbeitet zu werden.
</section>
</section>

54
src/components/slides/html-forms/structuring.astro Normal file
View file

@ -0,0 +1,54 @@
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form -->
<section>
<section>
<h2>Gruppieren von Eingabe-Elementen</h2>
</section>
<section>
<p>
Mithilfe der Tags <code>fieldset</code> und <code>legend</code> können Zusammenhängende Abschnitte in einem Formular zusammengefasst werden.
</p>
<p>
Die Tags haben keinen Einfluss darauf, wie die Daten versendet werden.
</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form&gt;
&lt;fieldset&gt;
&lt;legend&gt;Name&lt;/legend&gt;
&lt;p&gt;
&lt;label for="vorname"&gt;Vorname&lt;/label&gt;
&lt;input id="vorname" name="firstname" type="text"&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label for="nachname"&gt;Nachname&lt;/label&gt;
&lt;input id="nachname" name="lastname" type="text"&gt;
&lt;/p&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form>
<fieldset>
<legend>Name</legend>
<p>
<label for="vorname">Vorname</label>
<input id="vorname" name="firstname" type="text">
</p>
<p>
<label for="nachname">Nachname</label>
<input id="nachname" name="lastname" type="text">
</p>
</fieldset>
</form>
</section>
<section>
Alle Zusammenhängende Elemente können in ein <code>fieldset</code> gepackt werden und zusätzlich mit einem <code>legend</code> Beschrieben werden
</section>
</section>

3
src/components/slides/html-forms/title.astro Normal file
View file

@ -0,0 +1,3 @@
<section>
<h1>Daten verschicken mit Formularen</h1>
</section>

146
src/components/slides/html-forms/validation.astro Normal file
View file

@ -0,0 +1,146 @@
<!-- https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation -->
<section>
<section>
<h2>Ist das so richtig? Validierung von Formularen</h2>
</section>
<section>
<p>Disclaimer Vorweg:</p>
<p>Vertraue niemals von Nutzern eingegebene Daten, selbst wenn eine (Vor)-Validierung im Frontend geschieht!</p>
<p>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.</p>
</section>
<section>
<p>Validierung im Frontend passiert auf 2 Arten:</p>
<ul>
<li>In der Komponente (Tag) eingebaute Attribute die eine Validierung durchführen</li>
<li>Eine dynamische Validierung mithilfe von JavaScript</li>
</ul>
</section>
<section>
<p>Diese Präsentation fokusiert sich auf Attribute die den Tags mitgegeben werden können.</p>
<p>Drückt ein Nutzer auf den Absende-Button, so validiert der Browser alle Eingabefelder innerhalb des <code>form</code>-Elementes</p>
<p>Das Verhalten bei einer Fehlerhaften Eingabe variiert von Browser zu Browser</p>
</section>
<section>
<h3>Eine Notwendigkeit: * (required)</h3>
</section>
<section>
<p>Das Attribut <code>required</code> kann als "boolsches" Attribut ohne Wert in einer Komponente stehen.</p>
<p>Sie sorgt dafür, dass der User einen Wert eingeben haben muss, bevor das Formular durch den Browser versendet wird.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form&gt;
&lt;label for="input"&gt;Eingabe&lt;/label&gt;
&lt;input type="text" id="input" required&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form>
<label for="input">Eingabe</label>
<input type="text" name="value" id="input" required>
<input type="submit">
</form>
</section>
<section>
<h3>Eingabe-Länge beschränken: mit <code>minlength &amp; maxlength</code></h3>
</section>
<section>
<p>Mithilfe der Attribute <code>minlength &amp; maxlength</code> kann bei Text-Basierten Eingaben auf eine mindestlänge des Eingegebenen Textes (Zeichenlänge) erzwungen werden.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form&gt;
&lt;label for="input"&gt;Eingabe (3-15 Zeichen)&lt;/label&gt;
&lt;input type="text" id="input" minlength="3" maxlength="15"&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form>
<label for="input">Eingabe (3-15 Zeichen)</label>
<input type="text" name="value" id="input" minlength="3" maxlength="15">
<input type="submit">
</form>
</section>
<section>
<p>Das Attribut <code>maxlength</code> sorgt dafür, dass auch nach dem 15. Zeichen kein weiteres Eingegeben werden kann.</p>
<p><code>minlength</code> führt bei zu wenigen Zeichen zum gleichen Effekt wie beim Attribut <code>required</code> (aber mit einer spezifischen Fehlermeldung)</p>
</section>
<section>
<h3>Ober- und Untergrenzen bei Zahlen: <code>min &amp; max</code></h3>
</section>
<section>
<p>Wie bereits in einer vorherigen Slide gesehen, dienen die Attribute <code>min &amp; max</code> dazu, obere sowie untere Grenzen in einer Zahleneingabe festzulegen.</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form&gt;
&lt;label for="input"&gt;Eingabe Zahl (1 bis 10)&lt;/label&gt;
&lt;input type="number" id="input" min="1" max="10" value="1"&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form>
<label for="input">Eingabe Zahl (1 bis 10)</label>
<input type="number" name="value" id="input" min="1" max="10" value="1">
<input type="submit">
</form>
</section>
<section>
<h3>Komplexe Textvalidierung mithilfe von <code>pattern</code></h3>
</section>
<section>
<p>Pattern bietet ein Effektives mittel um komplexe Anforderungen an Texte zu prüfen</p>
<p>Das Pattern wird mithilfe eines regulären Ausdrucks (Regular Expression) definiert</p>
</section>
<section>
<pre class="html"><code data-trim data-line-numbers>
&lt;form&gt;
&lt;label for="input"&gt;Eingabe (banane oder kirsche)&lt;/label&gt;
&lt;input type="text" id="input" pattern="banane|kirsche"&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;
</code></pre>
</section>
<section>
<form>
<label for="input">Eingabe (banane oder kirsche)</label>
<input type="text" name="value" id="input" pattern="banane|kirsche">
<input type="submit">
</form>
</section>
<section>
<h3>Validierung mittels <code>type</code>?!</h3>
</section>
<section>
<p>Wie vielleicht bereits beobachtet, haben Eingabefelder wie z.B. <code>type="email"</code> bereits eine selber eingebaute Validierung.</p>
<p>Diese Validierung "reicht" aber zumeist nicht und wird mithilfe von <code>pattern</code> und JavaScript erweitert um den Anforderungen gerecht zu werden.</p>
</section>
</section>

8
src/pages/slides/forms.astro Normal file
View file

@ -0,0 +1,8 @@
---
import Reveal from "../../layouts/Reveal.astro";
import Slides from '../../components/slides/html-forms/index.astro'
---
<Reveal title="HTML Formulare">
<Slides />
</Reveal>