HTML

Der Inhalt ist erst nach dem Einloggen sichtbar

Themen:


Introduction ⇑
a ⇑
anker ⇑
color ⇑
details ⇑
div ⇑
embed ⇑
form ⇑
Grundaufbau ⇑
img ⇑
li ⇑
marquee ⇑
meter ⇑
object ⇑
picture ⇑
span ⇑
table ⇑
typographie ⇑

Anzahl an Themen: 18

Aktuell geöffnete Datei: 'form'

Zum Wechseln des Themas einfach ein neues Thema eingeben

HTML_form

form

<form></form>

= Umschließt das gesamte Formular

- action="wohin soll gesendet werden"
- method="wie soll gesendet werden [GET oder POST]">

<input>

= Felder, bei denen etwas zur Übermittlung vom Besucher eingetragen werden kann.

- name
- value

- type = Art des Eingabefeldes & zur Begrenzung der Eingabemöglichkeiten
     text
     email
     tel
     date
     time
     week
     password
     radio
     checkbox
     hidden
     submit

inputmode="numeric"

check: https://caniuse.com

- placeholder
- size
- title
- id
- pattern
- maxlength
- minlength
(max- & minlength ohne required, dürfen leer sein, oder entsprechend der Eingaben)
(max- & minlength mit required, nur entsprechend der Eingaben)
- required*
- checked*
- disabled*
- readonly*
- autofocus*

* - (Boolean attribute)

- pattern

Pattern können nur auf die Typen text & tel angewendet werden.

Buchstaben & Zahlen
"[a-z]" Alle Kleinbuchstaben
"[A-Z]" Alle Großbuchstaben
"[A-Za-z]" Alle Groß- & Kleinbuchstaben
"[A-z]" Alle Groß- & Kleinbuchstaben und [ \ ] ^ _ `
"[A-Za-zÄäÖöÜüß]" Alle Buchstaben und Umlaute "[0-9]" Alle Zahlen
"[0-9A-Za-z]" Alle Zahlen, Groß- und Kleinbuchstaben (keine Umlaute)
"[ ]" Ein Leerzeichen

Kurzschreibweisen
"\d" eine Ziffer - [0-9]
"\D" ein Zeichen das keine Ziffer ist
"\w" ein Buchstabe, eine Ziffer oder der Unterstrich, also [a-zA-Z_0-9]
"\W" ein Zeichen, das kein Buchstabe, keine Ziffer oder kein Unterstrich ist
"\s" Ein Leerzeichen (whitespace)
"\S" ein Zeichen, das kein Leerzeichen ist
"." Ein beliebiges Zeichen

Auswahl der Eingaben begrenzen
"[02468]" Ein Zeichen (02468) aus der Auswahl
"[12][ab]" 1 oder 2 & a oder b bzw. 1a, 1b, 2a, 2b

Zeichenanzahl eingrenzen (Quantoren)
"[a-z][a-z][a-z]" 3 Kleinbuchstaben
"[a-z]{3} 3 Kleinbuchstaben
"[02468]{1,}.{0,}" Mind. ein Zeichen aus der Auswahl, keine Obergrenze; Anschließend sind alle Zeichen möglich (von keinem & ohne Obergrenze)
"[A-zäöüß]" Groß- & Kleinbuchstaben, kleine Umlaute und [ \ ] ^ _ `
"DE(1[2468])" DE1[eine Zahl aus der Auswahl]
vcxx ".." Zwei beliebige Zeichen
".{1}" Ein beliebiges Zeichen
".{1,}" Mind. ein beliebiges Zeichen, keine Obergrenze
".{5,}" Mind. fünf beliebige Zeichen, keine Obergrenze
".{5,8}" Mind. 5 beliebige Zeichen, max. acht beliebige Zeichen
"[0-9]+" Einmal oder mehr
"[0-9]*" Keinmal oder mehr
"[0-9]?" Einmal oder keinmal"

Zeichenausschluss
"[^#]" # ist nicht erlaubt
"[^#zd]" #,z,d sind nicht erlaubt
"[^A-Za-Z]" Groß- und Kleinbuchstaben sind nicht erlaubt

Gruppen von Zeichen
"(123)" Gruppe von Zeichen, die so eingegeben werden muss
"(123)(abc)" Zwei Gruppen von Zeichen, die so eingegeben werden müssen
"(1)(a)" Es muss eine 1a eingegeben werden

Eingabe gleicher Eingaben verlängen
"(1)\1" Es muss eine 11 eingegeben werden (\1 verlangt die gleiche Eingabe, wie in Klammer 1)
"(1)(a)\1" Es muss eine 1a1 eingegeben werden (\1 bezieht sich auf die gleiche Eingabe, wie in Klammer 1)
"(1)(a)\2" Es muss eine 1aa eingegeben werden (\2 bezieht sich auf die gleiche Eingabe, wie in Klammer 2)
"([12])\1" Es muss eine 1 oder 2 eingegeben werden gefolgt von der selben Eingabe (11 oder 22) "([a-z]){1}([0-9]){1}\1\1" Ein Kleinbuchstabe, dann eine Zahl, dann erneut 2x der gleiche Buchstabe von vorn
"(?:[a-z]){1}([0-9]){1}\1\1" Ein Kleinbuchstabe, dann 3x der gleiche Zahl ("?:" lässt die enthaltende Klammer nicht mitzählen)

Oder
"1|2" oder "[1]|[2]" oder "(1)|(2)" 1 oder 2
"([1]|[2]){3}" 3 Ziffern bestehnt aus 1 oder 2 in beliebiger Reihenfolge und Anzahl
"([1]){3}|([2]){3}" 3 Zahlen, die nur aus Einsen und/oder Zweien besteht
"[12]|[AB]" 1,2 oder A, B können eingegeben werden
"(12)|(AB)" 12 oder AB können eingegeben werden
"-(12)|-(AB)" -12 oder -AB können eingegeben werden
"([a-z](12)|(AB))[a-z]" a12a oder ABa können eingegeben werden. Klammern beachten.

Maskieren
Zeichen, die als Metazeichen verwendet werden, müssen maskiert werden, um als Zeichen berücksichtigt zu werden.
Zu den MEtazeichen zählen z.B. - + * ? . Um diese Metazeichen als Zeichen im Pattern zu nutzen benötigen wir einen \ zum Maskieren
"\?" Es muss ein ? eingegeben werden
"\." Es muss ein . eingegeben werden
"\-" Es muss ein - eingegeben werden

positive Bedingungen
"(.*[A-Z]).*" Es wird ein Großbuchstabe verlang, davor und dahinter können weitere Zeichen eingegeben werden
"(?=[A]).*" oder "(?=A).*" Es muss mit einem A begonnen werden folgende Zeichen sind frei wählbar
"(?=.*[A]).*" Es wird ein A verlangt, davor und dahinter können beliebige Zeichen gesetzt werden
"(?=[A]).[0-9]+" oder "(?=[A]).*[0-9]+" Es beginnt mit A gefolgt von mind. einer Zahl
"(?=.*[A]).*[0-9]+" Es muss ein A und eine Zahl an beliebiger Stelle geben.
"(?=[0-9]?.*[A]).*[0-9]+" Möglich eine Zahl einzugeben dann A dann mind. eine Zahl

Mindestzeichenangabe
"(?=.{5}$).*" Es werden 5 Zeichen benötigt, alle Zeichen möglich
"(?=.{5}).*" Es Werden 5 beliebige Zeichen benötigt
"(?=.{5,7}$).*" Es werden mind. 5 Zeichen benötigt, maximal 7 sind erlaubt, alle Zeichen möglich
"(?=.{5,}$).*" Es werden mind. 5 Zeichen benötigt, alle Zeichen möglich
"(?=.{5}$)[A-Z]*" Es wird eine Eingabe von 5 Großen Buchstaben benötigt (ohne $ mind. 5 Großbuchstaben) (?=.{5}$).*[A-Z]*
"(?=.{5}).*" Es Werden 5 beliebige Zeichen benötigt
"(?=.{5}$)[0-9]+" Es werden 5 Zahlen benötigt
"(?=.{5}$)[0-9]+\.[0-9]+" Es müssen 5 Zahlen eingegeben werden und ein . (Der . darf nicht an 1. und letzter Stelle sein.
"(?=.{5}$)[z-A]+\.[0-9]+" Es müssen 5 Zeichen eingegeben werden und ein . (1-3 Buchstabe(n), dann ein . und 3-1 Zahl(en).

Mehr Anforderungen $ = Endemarker
"(?=.{5}$)(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*" 5 Zeichen, davon eine Zahl, ein Groß- und ein Kleinbuchstabe ($ zwingend notwendig, sonst wird die 5 als mind. gedeutet, nicht als genau 5)
"(?=.{5,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*" Mind. 5 Zeichen, davon eine Zahl, ein Groß- und ein Kleinbuchstabe = (?=.{5} ... [$ möglich]
"(?=.{5,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[\W]).*" Mind. 5 Zeichen, davon eine Zahl, ein Groß- und ein Kleinbuchstabe

negative Bedingungen
"[^02-9]" Alle Zahlen außer 1 sind möglich
"(?!1)[0-9]" Alle Zahlen außer 1 sind möglich
"(?![15])[0-9]" Alle Zahlen außer 1 & 5 sind möglich
"(?![5])[0-9]" Alle Zahlen, außer 5
"(?![56])[0-9]" Alle Zahlen, außer 5 oder 6
"(?![56])[0-9]{2}" Alle 2 stelligen Zahlen, die nicht mit 5 oder 6 beginnen
"(?![56])[0-9](?![1])[0-9]" Alle 2 stelligen Zahlen, die vorn keine 5 oder 6 haben und die nicht auf 1 enden
"(?!Pf).*" Es darf nicht mit "Pf" beginnen
"(?!.*pf).*" bzw. "(?!.*pf.*).*" Kein "pf" darf vorkommen
".*(?!m)[a-z]" Es dar nicht auf einem m enden, der letzte Buchstabe muss auch klein sein
".*[^m]" Das letzte Zeichen darf kein m sein, jedoch kann jedes beliebige Zeichen gewählt werden

Übungen

Übung: 2 Großbuchstaben 2 Zahlen 2 Kleinbuchstaben

"[A-Z]{2}[0-9]{2}[a-z]{2}"

Übung: 1 Großbuchstabe oder mehr 1 Zahl oder mehr 1 Kleinbuchstaben oder mehr

"[A-Z]+[0-9]+[a-z]+"

Übung: Hallo GD20-GD29 oder Hallo SP20-29

"Hallo\s((GD)|(SP))2[0-9]"

Übung: Noten von 1,0 bis 6,0, aber auch ohne Komma

"[1-5](,\d)?|6(,0)?"

Übung: Kleinbuchstabe 1 Kleinbuchstabe 2 Kleinbuchstabe 1 (Pflicht) Kleinbuchstabe 2 (Pflicht)

"([a-z])([a-z])\1\2" oder "([a-z][a-z])\1"

Übung: Sie wollen 9 Zahlen eingegeben haben. Sie bieten an, alle Zahlen hintereinander einzugeben oder nach jeweils 3 Zahlen eine Trennung durch . , - _ und Leerzeichen. Trennzeichen müssen bei Verwendung identisch sein

"[0-9]{3}([\.\s\-,_])?[0-9]{3}\1[0-9]{3}"

Übung: Sie sollen Currywurst, Rostbratwurst, Kaffee, Kafee, Kaffe oder Kafe eingeben können

"(Curry|Rostbrat)wurst$|(Kaf)(f)?(e)(e)?$"

Übung: Was bedeutet: (A(BC){2}){2}?

ABCBCABCBC

Übung: Sie möchten, dass 4 Zahlen eingegeben werden, wobei Zahl 1 & 2, sowie 3 & 4 identisch sein müssen

"([0-9])\1([0-9])\2"

Übung: Sie möchten, dass 6 Zahlen eingegeben werden, wobei Zahl 1, 2 & 4 sowie 3, 5 & 6 identisch sein müssen

"([0-9])\1([0-9])\1\2\2"

Übung: Sie möchten Die Zahlen 0-5 & 10-15 eingeben können. Erlaubt sind nur 7 Zeichen im Pattern.

"1?[0-5]"

Übung: 0151n, 0152n, 0157n, 0159n, 0160, 0162, 0163, 017n (n steht für jede beliebige Zahl)

"01((5[1279]\d)|(6[023])|(7\d))" oder "01(5[1279]\d|6[023]|7\d)"

Übung: KFZ (vereinfacht)
Möglichkeiten:
A-A 1 > A-AAAA 1111
AA-A 1 > AA-AAA 111
AAA-A 1 > AAA-AA 111
Hinten jeweils noch ein H oder E möglich. Z.B. AA-A 1H; AA-AAA 111E (Leerzeichen als gezwungenes Zeichen)

"[A-Z]{1}-[A-Z]{1,4}\s[0-9]{1,4}[EH]?|[A-Z]{2}-[A-Z]{1,3}\s[0-9]{1,3}[EH]?|[A-Z]{3}-[A-Z]{1,2}\s[0-9]{1,3}[EH]?"

Zum Patterncheck

Dropdownmenü

<select name="betreff" size="1">
     <option>Option 1</option>
     <option>Option 2</option>
</select>

<select name="betreff" size="1">
     <optgroup label="Kategorie 1">
          <option>Option 1</option>
          <option>Option 2</option>
     </optgroup>
</select>

Wie verhält es sich mit der Value?

Kann man hier eine Pflichtangabe erstellen?

Texteingabefeld über mehrere Zeilen

<textarea></textarea>
- rows: Zeilenanzahl in textareas
- cols: Spaltenanzahl in textareas

label

- for: Zuordnung der id im input aus einem label
- Unterscheidung implizit und explizit

Der Sendebutton

- <input type="submit" value="Senden">

- <button type="submit">Senden</button>

Umrandungen/ Strukturierung/ Gruppierungen von Eingaben

<fieldset>
</fieldset>

<fieldset>
<legend>Title</legend>
</fieldset>

<ul></ul>

<ol></ol>

<li></li>

Zum Üben:
action="http://volterra.bplaced.de/pages/html/HTML_Themen/form_check.php" method="GET"

Beispielformular ohne Formatierungen

Übungen für Formulare:

Login
- Benutzername, Passwort, Angemeldet bleiben?

Registrieren:
Anrede, Titel, Nachname, Vorname, Geburtsdatum, Ergänzende Informationen, Nationalität, Land, PLZ, Ort, Straße, Hausnummer, Telefonnummer, E-Mail,

Wird Ihr Aufenthaltsort in den nächsten 14 Tagen vom Wohnort abweichen?
Ja/Nein, Land, PLZ, Ort, Straße, Hausnummer, Telefonnummer.
Zugangscode, Reisepassnummer, Gültig bis (Tag/Monat/Jahr getrennt)

Einwilligungserklärung:
Durch den Klick auf "Speichern" beauchfrage ich die Dr. Lobrenzkowitz GmbH, meine Speichelprobe bzw. die des Probanden, dessen Sorgeberechtigter, gesetzlicher Vormund oder rechtlicher Betreuer ich bin, auf das Vorliegen einer Infektion mit dem SARS-CoV-2-Virus zu untersuchen.
Durch den Klick auf "Speichern" willige ich außerdem jederzeit widerruflich darin ein, dass Gronkolowisky GmbH personenbezogene Daten einschließlich Gesundheitsdaten über mich

zum Zwecke der Organisation und Durchführung der Unsersuchung
zum Zwecke der anonymisierten wissenschaftlich-statistischen Auswertung durch die Gronkolowisky GmbH

Verarbeitet, wie jeweils in den Datenschutzhinweisen näher spezifitiert.

Bärenland:
Name, Vorname, Email, Tel, Anzahl Kinder, Anzahln Erwachsene, Alter Kinder, Aktivitäten: Schatzsuche, Grillen, Basteln, Schnitzen, Wird Verpflegung benötigt? Unverträglichkeiten, Wie wird bezahlt? Wann kommen Sie? Wie lange bleiben Sie? An welchem Tag? AGB