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.. :/

 
TAGAttributemögliche AttributwerteZusatzattribute / Untergeordnete TagsBedeutung / Anmerkungen
formAlle Formularelemente müssen in einen umgebenden <form>-Container gepackt werden.
actionURLAn welches Skript sollen die Eingaben zur weiteren Verarbeitung gesendet werden.
nameName des Formulars, keine SonderzeichenSollte gesetzt werden, wenn es auf einer Seite mehrere Formulare gibt und/oder diese an die gleiche action gesendet werden können.
methodpost
  • 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
getBei 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.
autocompleteon / offAutovervollständigung mit den im Browser u.U. gespeicherten Daten aktivieren bzw. deaktivieren. Sollte bei Eingabe sensibler Daten auf „off“ stehen.
novalidateKeineAutomatische Validierung des HTML5-Formulars wird deaktiviert.
inputtypeMögliche Werte siehe unten.Art des Formularfelds.
textEinfaches Texteingabefeld
passwordEingabe in Passwort-Felder wird maskiert, damit Fremde bei der Eingabe nicht spicken können.
searchWie Texteingabefeld.
emailErwartet 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.
colorFarbpicker, wie vom Betriebssystem bekannt.
timeZeitauswahl. Sollte automatisch das lokale Zeitformat nutzen.
dateDatumsauswahl. Anzeige anhand eines Kalenders.
datetimeSollte Eingabe des Datums und einer Zeit ermöglichen. Zur Zeit noch mangelnde Browserunterstützung in Chrome, Firefox und Internet Explorer (Stand Oktober 2015)
datetime-localKombination aus <date> und <time>
weekWochenauswahl. Anzeige anhand eines Kalenders.
monthAnzeige anhand eines Kalenders. Auch wenn ein Tag gewählt werden kann, wird nur der Monat und das Jahr übergeben.
urlErwartet 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.
telErwartet Eingabe einer Telefonnummer in standardisierten Formaten und mit entsprechend gültigen Zeichen. Wird von den wenigsten Browsern unterstützt.
numberErwartet Eingabe eines numerischen Wertes – ohne Buchstaben, ohne Sonderzeichen.
minMinimalwert für numerische Eingaben. Numerisch.
maxMaximalwert für numerische Eingaben. Numerisch.
stepSchrittweite für die numerische Eingabe. Kommawerte müssen mit Punkt statt dem in Deutschland genutzten Komma definiert werden.
rangeWertebereich in Form eines Sliders
minSiehe oben
maxSiehe oben
stepSiehe oben
radio
checkbox
submit
reset
listID der zu verwendenden Liste mit vordefinierten Eingabewerten
readonly
disabled
datalist
id
option
select
value
selected
optgroupSiehe: http://www.w3schools.com/tags/tag_optgroup.asp
keygen
outputKann für die Ausgabe von Berechnungen genutzt werden. Muss aber durch ein Javascript berechnet werden.
textarea
rows
cols
button
requiredkeinerFeld muss ausgefüllt werden
minlengthNumerischer WertAnzahl der minimalen Zeichen, die in das Feld eingetragen werden müssen
maxlengthNumerischer WertAnzahl der maximalen Zeichen, die in das Feld eingetragen werden können
namebeliebig, keine SonderzeichenName der übergebenen Variablen. Setzen Sie diesen Wert nicht, wird der Wert des Eingabefeldes nicht übermittelt!
valuevorgegebener 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
idbeliebig, keine Sonderzeichen, sollte identisch mit dem name-Attribut sein. Muss innerhalb des gesamten HTML-Dokuments eindeutig sein.eindeutiger Identifikator für ein HTML-Element
placeholderbeliebiger 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.
autofocuskeineAktiviert das Feld bei Aufruf der Seite automatisch. Sollte (normalerweise) auf das erste Feld gesetzt werden.
patternSiehe http://html5pattern.com/ und http://www.w3schools.com/tags/att_input_pattern.aspEingabemuster 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>