Back to Main Page

20.05.2022

A10 Aufbu eines Formulares

In html wird ein Formular mit den tags <form></form> abgegrenzt. Diese Tags zeigen an von wo bis wo das formular geht. Die einzelnen Inputfelder können dann anschlissend mit den tags <input></input> erstellt werden. Ein Formular kann dazu verwendet werden um Daten an eine weitere Resource (z.B. ein PHP file) zu senden also defaktor eine Request. Im Wwebkontext gibt es grundsätzlich 5 verschiedene Requestmethden. Aus diesem Grud hat das formular einen Paramether method= in welchem man angeben kann mit welcher RequestMethode das Formular gesendet werden sollte. Ein weiterer Paramether ist action=. In diesem kann man bestimmen was passieren sollte wenn der User auf den submitbutton klickt. Bei action= kann man sowohl Scripts aufrufen oder eine Request starten. Im falle einer Request muss man bei action= angeben an welche Resource diese gesenet werden sollte z.B. action="https://www.api.exampke.com/formular.php".

Paramether von <input>

Auch die Tags <input></input> haben noch weitere Paramether. Diese sind unteranderem type mt demen man beschreiben kann, welcher Datentyp im formular angegeben werden sollte min= und minlength= mit welchen man beschreiben kann was die minimale Eingabe länge von z.B. eines Strings ist den man eingeben muss. Das ist z.B. dann von Vorteil wenn man ein Passwort hat welches mindestens 8 Zeichen lang sein sollte. max= und maxlength= welche sagen was die maximale länge von z.B. einen String ist. Der Paramether required kann dazu verwendet werden um anzuzeigen dass das Inputfile required lso pflicht ist.

<lable>

Mithilfe den Tags<lable></lable> läst sich ein Lable kennzeichen. Ein Lable kann dazu verwendet werden um z.B. die Inputfelder zu beschrieften. Anstelle eines Lables könnte man theoretisch auch z.B. Paragraphen verwenden. Allerdings hat eine Lable viele Vorteiele gegenüber von Paragraphen. Zu aller erst einaml währe da der Vorteil, dasss ein Lable mit dem Inputfield verbunden werden kann. Das ist zwar etwas aufwändiger zu erstllen hat aber den Vorteill dass es mit dem Inpufield nun zusammen hängt und es nichtmehr müsahm so formatiert werden muss dammit der Text genau über dem Inputfield ist. Auch hat es einen Vorteile für Personen, welche sich die Website vorlessen lassen möchten. Ein <lable> kann man mithilfe von Paramether for= an ein Lable hängen.
Beispel HTML Formular:

    <form  name="">
        <label for="name">Name:</label>
        <input  type="text" name="name" id="name">
        <br>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
        <br>
        <label for="message">Message:</label>
        <textarea name="message" id="message" cols="30" rows="10"></textarea>
        <br>
        <input type="submit" value="Submit">
    </form>

A11 verschiedene Input Typen

Wie bereits im letzten Kapittel beschrieben gibt es verscheidene Input types. Diese beschreiben grundsätzlch welche Werte in dem Inputfield angegeben werden können. Der Voreil davon ist, dass die meisten Browser wie Google Chrome eine Hilfestellung beim Input von z.B. einem Datum geben und es auch direckt noch vor dem Absenden validiert wird.
Die verschiedenen Input Tags

• radio Radio Buttons können dazu verwendet werden um eine Auwahl von verschedenen Feldern abzudecken. Dabei kan immer nur 1 Feld ausgewählt sein. Es kann also z.B. zu verwendet werden, um ein Geschlecht anzugeben.
• checkbox Eine Checkbox funktionier in etwa gleich wie einen Radio Button. Der unterschied besteht darin, dass man bei einer Checkbox auch mehrere werte auwählen kann.
• submit Kann dafür verwendet werden um den Submitbutton zu kennzeichnen
• emai Email kann dazu verwendet werden um eine Eingabe von einer E-Mail Adresse zu kennzeichnen
• text Ist die defaultmössige Eingabe um Texte (Strings) zu kennzeichnen
• password Kann dazu verwendet werden um die Eingabe von einem Passwort zu erwarten. Der Vorteil von Passwor zu text ist, dass Passwort die verschiedenen buchstaben welche eingegebenwerden schwärtzt und Passwortmanager so leichert das Feld erkennen können.
• date Kann dazu verwendet werden um ein Datum einzugeben
• time Kann dazu verwendet werden um eine Zeit anzugeben
• datetime Kann dazu verwendet werden um eine Zeit + Datum einzugeben
• file Kann dazu verwendet werden um ein File hochlanden zu können.

Reflexion

Ich dennke, dass ich in der Letzen woche gut mitgekommen bin. Ich konnte fast alle B Kompetenzen bis auf eine zum Thema HTML fertigstellen.