Abschlussprüfung Mediengestalter Winter 2015/2016, Medienproduktion: U12: HTML5-Formulare (Konzeption und Visualisierung)

Achtung: Bei diesem Artikel handelt es sich bislang nur um einen Entwurf!!

Leider gibt es ein kleines Problem bei der Darstellung der Tabelle – sie läuft unter den rechten Seitenbalken. Als schnellen Workaround wurde die Tabelle deshalb weit nach unten platziert – Sorry for any inconveniences.. :/

 
TAG Attribute mögliche Attributwerte Zusatzattribute / Untergeordnete Tags Bedeutung / Anmerkungen
form Alle Formularelemente müssen in einen umgebenden <form>-Container gepackt werden.
action URL An welches Skript sollen die Eingaben zur weiteren Verarbeitung gesendet werden.
name Name des Formulars, keine Sonderzeichen Sollte gesetzt werden, wenn es auf einer Seite mehrere Formulare gibt und/oder diese an die gleiche action gesendet werden können.
method post
  • POST requests können nicht im Cache abgelegt werden
  • Eingaben von POST requests können nicht in der Adresszeile angezeigt werden, sind insofern auch für die Übertragung sensibler Daten geeignet
  • POST requests verbleiben nicht in der Browser-Historie/Verlauf
  • POST requests können nicht als Lesezeichen abgelegt werden
  • POST requests haben keine Begrenzung bzgl. der übertragenen Datenmenge
  • POST requests können Binärdaten übertragen
get Bei get werden die Formulareingaben über die Adresszeile des Browser versendet. Dazu folgende Anmerkungen:

  • GET requests können gecached werden
  • GET requests verbleiben in der Browser History /dem Verlauf
  • GET requests können als Lesezeichen abgelegt werden.
  • GET requests sollten niemals für die Übertragung sensibler Daten (z.B. Passwörtern) genutzt werden – sie stehen in der Adresszeile dann im Klartext!
  • GET requests haben eine eingeschränkte Datenmenge.
  • GET requests können keine Binärdaten/Anhänge (z.B. Bilder) übertragen
  • GET requests sollten nur verwendet werden, um Daten abzurufen, NICHT um sie zu übertragen!
    Beispiel: Zur Bedienung einer Suchfunktion.
autocomplete on / off Autovervollständigung mit den im Browser u.U. gespeicherten Daten aktivieren bzw. deaktivieren. Sollte bei Eingabe sensibler Daten auf „off“ stehen.
novalidate Keine Automatische Validierung des HTML5-Formulars wird deaktiviert.
input type Mögliche Werte siehe unten. Art des Formularfelds.
text Einfaches Texteingabefeld
password Eingabe in Passwort-Felder wird maskiert, damit Fremde bei der Eingabe nicht spicken können.
search Wie Texteingabefeld.
email Erwartet Eingabe einer korrekten Mailadresse und kann durch die aktuellen Browser vor dem Absenden auch verifiziert werden. Smartphones ergänzen teils automatisch die Toplevel-Domain am Ende.
color Farbpicker, wie vom Betriebssystem bekannt.
time Zeitauswahl. Sollte automatisch das lokale Zeitformat nutzen.
date Datumsauswahl. Anzeige anhand eines Kalenders.
datetime Sollte Eingabe des Datums und einer Zeit ermöglichen. Zur Zeit noch mangelnde Browserunterstützung in Chrome, Firefox und Internet Explorer (Stand Oktober 2015)
datetime-local Kombination aus <date> und <time>
week Wochenauswahl. Anzeige anhand eines Kalenders.
month Anzeige anhand eines Kalenders. Auch wenn ein Tag gewählt werden kann, wird nur der Monat und das Jahr übergeben.
url Erwartet Eingabe einer URL im gültigen Format mit voranstehendem http:// . Wird vor dem Absenden validiert.
Es ist sinnvoll, den Wert „http://“ als value vorzudefinieren. Dadurch wird allerdings ein möglicher placeholder-Wert überschrieben.
tel Erwartet Eingabe einer Telefonnummer in standardisierten Formaten und mit entsprechend gültigen Zeichen. Wird von den wenigsten Browsern unterstützt.
number Erwartet Eingabe eines numerischen Wertes – ohne Buchstaben, ohne Sonderzeichen.
min Minimalwert für numerische Eingaben. Numerisch.
max Maximalwert für numerische Eingaben. Numerisch.
step Schrittweite für die numerische Eingabe. Kommawerte müssen mit Punkt statt dem in Deutschland genutzten Komma definiert werden.
range Wertebereich in Form eines Sliders
min Siehe oben
max Siehe oben
step Siehe oben
radio
checkbox
submit
reset
list ID der zu verwendenden Liste mit vordefinierten Eingabewerten
readonly
disabled
datalist
id
option
select
value
selected
optgroup Siehe: http://www.w3schools.com/tags/tag_optgroup.asp
keygen
output Kann für die Ausgabe von Berechnungen genutzt werden. Muss aber durch ein Javascript berechnet werden.
textarea
rows
cols
button
required keiner Feld muss ausgefüllt werden
minlength Numerischer Wert Anzahl der minimalen Zeichen, die in das Feld eingetragen werden müssen
maxlength Numerischer Wert Anzahl der maximalen Zeichen, die in das Feld eingetragen werden können
name beliebig, keine Sonderzeichen Name der übergebenen Variablen. Setzen Sie diesen Wert nicht, wird der Wert des Eingabefeldes nicht übermittelt!
value vorgegebener Text, der im Formularfeld stehen soll. Als Platzhalter ungeeignet, da der Text vorab manuell gelöscht werden müsste. Nutzen Sie dafür lieber das placeholder-Attribut. Kann leer gelassen werden und wird dynamisch mit dem eingebenen Wert des Nutzers gefüllt. Wert der übergebenen Variablen
id beliebig, keine Sonderzeichen, sollte identisch mit dem name-Attribut sein. Muss innerhalb des gesamten HTML-Dokuments eindeutig sein. eindeutiger Identifikator für ein HTML-Element
placeholder beliebiger Platzhaltertext für das Formularfeld. Sollte der Beschriftung bzw. des erwarteten einzugebenden Werts entsprechen. Wird bei Aktivierung des Feldes und Eingabe des ersten Zeichens automatisch gelöscht.
autofocus keine Aktiviert das Feld bei Aufruf der Seite automatisch. Sollte (normalerweise) auf das erste Feld gesetzt werden.
pattern Siehe http://html5pattern.com/ und http://www.w3schools.com/tags/att_input_pattern.asp Eingabemuster für den erwarteten Wert anhand von Regular Expressions (RegEx)
button
label
fieldset
legend

 

Weitere Informationen zum Thema HTML5-Formulare

  • http://www.w3schools.com/html/html_forms.asp
  • http://www.w3schools.com/html/html_form_elements.asp
  • http://www.w3schools.com/html/html_form_input_types.asp
  • http://www.w3schools.com/html/html_form_attributes.asp
  • https://ma.ttias.be/firefox-nightly-starts-marking-login-forms-in-http-as-insecure/

 

Thomas A. Reinert
Freelancer, MediaDesign, CEO TARThemes.com bei TAR MediaDesign
Thomas ist (hauptsächlich) Frontend-Entwickler auf Basis von HTML5, CSS3 und jQuery. Nach insgesamt 35 Jahren Programmiererfahrung, 20 davon als Webentwickler und knapp 10 Jahren Wordpress hat er einen guten Einblick in das Backend, die Theme- sowie Plugin-Programmierung und individuelle Anpassungen an die jeweiligen Projektvoraussetzungen. Zusätzlich unterrichtet er als freier Dozent in der Berufsbildung und ist seit 2013 im Prüfungsausschuss der IHK Köln für "Mediengestalter Digital und Print, Fachrichtung Digital" tätig.

Schreibe eine Antwort

Deine E-Mailadresse wird nicht veröffentlicht Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>