Formulare
Formulare
Embedded Files
Formulare finden Sie auf fast allen Webseiten:
Google verwendet ein Formularfeld um Ihre Suche entgegen zu nehmen
Login und Passwort werden über Formularfelder an die Applikation weitergegeben
Rechnungs- und Lieferadresse in einem Onlineshop werden über ein Formular erfasst
...
Ziele:
Ziele:
G4: Ich kann den Aufbau und die Funktion eines HTML-Formulars erklären.
F4: Ich kann ein einfaches HTML-Formular korrekt umsetzen.
E4: Ich kann ein Formular mit komplexen Formularelementen planen und umsetzen (z.B. Radiobutton, Dropdown, Label, Fieldset, Legend, ...)
Eingabetypen:
Eingabetypen:
Formulare sorgen also dafür, dass der Benutzer einer Webseite seine Daten mit der Webseite austauschen kann.
Dazu gibt es unterschiedliche Formularfelder für:
die Eingabe von kurzem oder langem Text
die Eingabe eines Passwortes
die Eingabe einer URL oder einer E-Mail-Adresse
die Eingabe von Zeit und Datum
die Auswahl einer aus mehreren Möglichkeiten
die Auswahl mehrerer aus mehreren Möglichkeiten
das Hochladen von Dateien
das Versenden des Formulars
das Löschen der Formulareingaben
...
Formulare :
Formulare :
<form action="fomular.php" method="post">
<div>
<label>Anrede *</label><br>
<input type="radio"
name="anrede"
id="frau"
value="Frau"
required>
<label for="frau" >Frau</label>
<input type="radio"
name="anrede"
id="herr"
value="Herr">
<label for="herr" >Herr</label>
<input type="radio"
name="anrede"
id="anderes"
value="Anderes">
<label for="anderes" >Anderes</label>
</div>
<div>
<label for="vorname">Vorname *</label><br>
<input type="text"
id="vorname"
name="vorname"
minlength="1"
maxlength="30"
required />
</div>
[...]
<div>
<input type="submit" value="Senden">
[...]
</div>
</form>
<form>: umschliesst das gesamte Formular und definiert über die Attribute
action: wohin die Daten gesendet werden und über das Attribut
method: ob die Daten per GET oder POST gesendet werden.
<input>: definiert ein Eingabefeld. Davon gibt es unzählige.
<select>: definiert ein Dropdown-Feld. Dieses Dropdown-Feld kann mit <option> befüllt werden. Es auch eine Mehrfachauswahl sowie Gruppen von Optionen mit <optgroup> möglich.
<textarea>: steht für ein mehrzeiliges Eingabefeld.
<datalist>: erstellt mit <option> eine eingeschränkte Auswahlmöglichkeit. Diese wird beim Tippen in ein Eingabefeld angezeigt.
Beschriftung:
Beschriftung:
<label>: definiert die Beschriftung des Eingabefeldes und verknüpft die Beschriftung über das Attribut for mit dem <input> mit der gleichen id
<fieldset>: gruppiert mehrere Eingabefelder logisch und optisch mit einem Rahmen
<legend>: beschriftet das <fieldset>
Attribute:
Attribute:
Über das Attribut type kann definiert werden, für welche Art von Eingaben das Formularfeld entgegennimmt.
Das Attribut name definiert den Variablen-Namen, unter welchen die eingegebene Daten beim Datenempfänger abrufbar sind.
Das Attribut id definiert eine eindeutige und pro HTML-Dokument eindeutige Identifizierung.
Das Attribut value definiert ein vordefinierter Wert für ein Eingabefeld.
Das Attribut readonly sorgt dafür, dass ein Eingabefeld nicht geändert, nur gelesen werden kann.
Das Attribut placeholder zeigt vor der Benutzereingabe einen Hinweis auf die erwartete Eingabe an.
Clientseitige Validierung:
Clientseitige Validierung:
Formulare werden clientseitig validiert, um eine schnellere Rückmeldung an den Benutzer zu geben und die Benutzererfahrung zu verbessern. Durch die Validierung im Browser können Benutzer ungültige Eingaben sofort sehen und korrigieren, ohne auf eine Serverantwort warten zu müssen. Dies spart Zeit und reduziert Frustrationen, da Benutzer nicht erst das Formular absenden müssen, um herauszufinden, dass sie ungültige Angaben gemacht haben.
Das Attribut required macht ein Eingabefeld zu einem Pflichtfeld.
Die Attribute minlength / maxlength definieren die minimale / maximale Länge an Zeichen, welche ein Text-Feld entgegennimmt.
Die Attribute min / max definieren die kleinste / grösste Zahl, welche ein Zahlen-Feld entgegennimmt.
Das Attribut pattern ermöglicht die Prüfung von Inhalten mit regulären Ausdrücken
Video:
Video:
Weiterführende Links:
Weiterführende Links:
Formularelemente: https://www.w3schools.com/html/html_form_elements.asp
Eingabetypen: https://www.w3schools.com/html/html_form_input_types.asp
Learning Apps:
Page updated
Report abuse