Inhaltsverzeichnis

Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Hochschule:
Standort:
Studiengang:
Veranstaltung:
Betreuer:
Typ:
Themengebiet:
Autor(en):
Studienzeitmodell:
Semesterbezeichnung:
Studiensemester:
Bearbeitungsstatus:
Prüfungstermin:
Abgabetermin:
Fallstudienarbeit
Hochschule für Oekonomie & Management
Düsseldorf
Bachelor Wirtschaftsinformatik
Fallstudie / Wissenschaftliches Arbeiten
Prof._Dr._Uwe_Kern
Fallstudienarbeit
HTML 5
Andreas Schreiber, Ivo Marx, Tom Reißberg, Daniel Dreissen
Abendstudium
WS10
2
begutachtet
Inhaltsverzeichnis
• 1 Einleitung
♦ 1.1
Aufgabenstellung
♦ 1.2 Zielsetzung
♦ 1.3
Vorgehensweise
• 2 Grundlagen
♦ 2.1 Allgemein
HTML
♦ 2.2 Einsatz von
Formularen
• 3 Analyse
♦ 3.1
Anwendungsbeispiel
♦ 3.2 Vergleich
HTML4 vs.
HTML5
◊ 3.2.1
Modifizierte
Elemente
⋅ 3.2.1.1
form
⋅ 3.2.1.2
legend
⋅ 3.2.1.3
input
⋅ 3.2.1.4
button
⋅ 3.2.1.5
select
Inhaltsverzeichnis
1
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
⋅ 3.2.1.6
option
⋅ 3.2.1.7
textarea
⋅ 3.2.1.8
fieldset
◊ 3.2.2 Neue
Elemente
⋅ 3.2.2.1
label
⋅ 3.2.2.2
datalist
⋅ 3.2.2.3
optgroup
⋅ 3.2.2.4
keygen
⋅ 3.2.2.5
output
⋅ 3.2.2.6
progress
⋅ 3.2.2.7
meter
◊ 3.2.3
Attribute
◊ 3.2.4
Events
◊ 3.2.5
Sicherheit
◊ 3.2.6
Performance
◊ 3.2.7
Browserkompatibiltät
◊ 3.2.8
Alternativen
♦ 3.3 Ergebnis
• 4 Fazit
• 5 Anhang
♦ 5.1 Quellcode des
Beispiels
♦ 5.2 Fußnoten
♦ 5.3
Abkürzungsverzeichnis
♦ 5.4
Abbildungsverzeichnis
♦ 5.5
Tabellenverzeichnis
♦ 5.6
Quellenverzeichnis
Inhaltsverzeichnis
2
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
1 Einleitung
Im Januar 2008 verabschiedete die W3C den ersten Entwurf der Spezifikation von HTML5. Da HTML 4.01
bereits seit 1999 im Einsatz ist und nicht mehr den aktuellen Anforderungen gerecht wird, beschloss die W3C
diesen Schritt zu gehen.
1.1 Aufgabenstellung
Diese Hausarbeit befasst sich im Rahmen der Veranstaltung "Wissenschaftliches Arbeiten" mit dem Thema
HTML5 in Hinblick auf Formulare und analysieren dessen Funktionen und demonstrieren diese anhand eines
Beispiels.
Formulare stellen eine der wichtigsten Schnittstellen für den Besucher zur Webseite dar. Sie bieten dem Besucher
einer Webseite die Möglichkeit mit der dieser und gegebenenfalls anderen Besuchern zu interagieren. Diese
Möglichkeiten wurden in den letzten Jahren immer interessanter und unter dem Begriff WEB 2.0 in der
Öffentlichkeit bekannt. Soziale Netzwerke wie Facebook, StudiVZ, WerKenntWen usw. setzen Formulare auf
ihren Webseiten ein, damit der Benutzer seine Daten pflegen und mit anderen Benutzern des Netzwerkes in
Kontakt treten kann.
In HTML5 wurde das Konzept der einfachen Textbox, die ihre Daten ungeprüft an den Server weitergibt komplett
überarbeitet und mit deutlich mehr Möglichkeiten ausgestattet.
1.2 Zielsetzung
Die Zielsetzung dieser Hausarbeit besteht darin, HTML5 in Hinblick auf Formulare zu analysieren und neue
Funktionen zu demonstrieren. Des Weiteren wird ein Vergleich zu Formularen in HTML 4 gezogen und
aufgezeigt welche Elemente, Attribute und Events sich geändert haben oder welche hinzugefügt wurden. Es wird
die Frage gestellt, ob diese Elemente, Attribute und Events eine sinnvolle Weiterentwicklung sind und ob sich
eine Erleichterung zum Entwickeln von Formularen ergeben hat. Außerdem werden Möglichkeiten aufgedeckt,
wie HTML Formulare alternativ entwickelt oder gestaltet werden können.
Zusätzlich wird auf die Sicherheit und die Performance von HTML5 in Bezug auf Formulare eingegangen.
1.3 Vorgehensweise
Um eine möglichst interesante und anschauliche Hausarbeit zu gestalten, dient als Grundlage dazu das Formular
"Pizza Mamamia", welches zu diesem Zweck programmiert wurde. Anhand dessen werden die neuen Funktionen
demonstriert und erklärt. Dazu wird jedes aufgezeigte Element und Attribut beschrieben und die Veränderung
gegenüber HTML 4 erläutert.
2 Grundlagen
1 Einleitung
3
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
2.1 Allgemein HTML
Hypertext Markup Language (HTML) ist eine Auszeichnungssprache zur Erstellung von Dokumenten, die
mithilfe eines Browsers angesehen werden können. Dabei liegt die Fokussierung auf der Darstellung von
Informationen, in Form von Texten, Tabellen und Bildern[1].
HTML wurde im Jahre 1989 von Tim John Berners-Lee am CERN, der europäischen Organisation für
Kernforschung, zusammen mit einem seiner Kollegen erfunden. Dabei verfolgten sie das Ziel, den Nutzen des
bereits bestehenden Internets durch den Informationsaustausch zwischen den Wissenschaftlern zu erhöhen.
Voraussetzung dafür sollte eine plattformunabhängige Text- und Bilderstellung und der Einsatz der
Hypertextfunktionalität sein. Die Hypertextfunktionalität beschreibt die Möglichkeit Querverweise von einem
Dokument ausgehend auf beliebig viele andere Dokumente einzusetzen, obwohl diese auf anderen Server
liegen[2].
Geschichte von HTML
HTML
Version
Einführungsdatum
HTML 1.0[3]
1990
HTML 2.0[4]
1995
HTML 3.2[5]
1997
HTML 4.0[6]
1998
HTML 4.01[7] 1999
XHTML 1.0[8] 2000
XHTML 2[9]
2006
HTML5[10]
2009
Merkmale
Verfügt über Standardelemente:
Überschriften, Textabsätze
Einführung der Formulare
Einführung von Tabellen, Befehle für
physischen Textauszeichnung
Einführung von Frames und Cascading Style
Sheets
Korrekturen des HTML 4.0 Standards
Neuanfang von HTML auf Basis von XML
Die Arbeiten wurden im Jahr 2009
Zugunsten von HTML5 eingestellt
Einführung eines neuen Vokabular.
Überarbeitung und Erweiterung der zu
HTML gehörenden DOM-Spezifikation,
Neue Elemente, Attribute, etc.
Tabelle 1: Versionsübersicht
HTML beruht auf der Auszeichnungssprache Standard Generalized Markup Language (SGML), die zur
Deklaration des Aufbaus von Dokumenten dient. SGML war damals für Regierungsorganisationen und ähnlichen
Instituten die Standardlösung, spielte im Internet von "heute" aber nie eine Rolle, da es eine sehr komplizierte
Sprache war. Stattdessen bauten die Browserhersteller spezielle HTML-Parser in ihre Software ein, die zum
einem weniger Komplexität besaßen und zum anderen die Möglichkeit boten auch fehlerhafte Seiten darzustellen.
Im Jahre 1994 wurde das World Wide Web Consortium (W3C) gegründet, um die verschiedenen Entwicklungen
zu strukturieren und als Standard zu definieren[11]. So die Theorie - Jedoch sah es in der Praxis anders aus. Das
W3C war immer einen Schritt hinterher, weil die Browser sich nicht unbedingt an die Standards hielten und vorab
neue Elemente etablierten, bevor das W3C diese in ihre Recommendations definierten. Aufgrund dieser nicht
optimalen Situation für das W3C wurde die Konsequenz gezogen einen ?Reset? von HTML durchzuführen und
2.1 Allgemein HTML
4
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
XHTML einzuführen. Die W3C schrieb dazu unter anderen, in einem Statement: << [..] it was agreed that further
extending HTML 4.0 would be difficult, as would converting 4.0 to be an XML application. The proposes way to
break free of these restrictions is to make a fresh start with the next generation of HTML based upon a suite of
XHTML tag-sets.>>[12] XHTML ist HTML in XML. XML ist eine universelle Auszeichnungssprache, die als
Datenaustauschformat nutzbar ist und Vektorgrafiken darstellen kann. XHTML sollte als Übergangslösung bzw.
als Vorstufe dienen. Es hat den gleichen Umfang wie HTML 4.01. Es ist eher bekannt unter XHTML 1.0. Jedoch
wurden von den Webseiten die Quellcodes weiterhin als HTML ausgeben und entsprechend mit
Tag-Soup-Parsern verarbeitet. XHTML 2.0 sollte die finale Version werden, bei der es auch kein Ausweichen auf
HTML gab. Jedoch wurde XHTML nie richtig angenommen. Es wurde bis heute in keiner Version des Internet
Explorers verarbeitet. Auch die Browserhersteller zweifelten die Praktikabilität von XHTML an, sodass Apple,
Mozilla und Opera die Web Hypertext Application Technology Working Group (WHATWG) im Jahre 2004
gründeten und an der Entwicklung einer neuen Web-Technologie Label Web Application 1.0, das spätere
HTML5, arbeiteten. Sie implementierten nach und nach erste HTML5 Features in ihre Browser, sodass im Jahre
2009 das W3C erkennen musste, dass die Weiterentwicklung an XHTML keinen Sinn mehr ergab und dass die
Zukunft bei HTML5 liegt, sodass sie die XHTML Arbeitsgruppe auflöste und stattdessen eine eigene
Arbeitsgruppe zur Entwicklung von HTML5 bildeten. Nun arbeiteten zwei Arbeitsgruppen an HTML5 und die
Unübersichtlichkeit war vorprogrammiert. Aktuell kann man noch nicht von der einen Fassung des HTML5 bzw.
von dem Standard HTML5 sprechen, wie man es zum Beispiel bei der Version 4.01 tun kann. Beide
Arbeitsgruppen veröffentlichen ihre Versionen von HTML5 und haben auch ihre eigenen Terminplanungen. Die
WHATWG plant HTML5 nicht vor 2022 mit dem Recommendation-Status zu versehen, die W3C hingegen geht
von 2010 aus. Mit der Einführung von HTML5 werden viele neue Elemente eingeführt, die Webseiten mit vielen
nützlichen Funktionen erweitern. HTML5 ist somit für die Zukunft gerüstet, ganz im Sinne des Web 2.0, bei dem
der Browser nicht mehr allein zum Betrachten von Webseiten genutzt, sondern der Funktionsbereich enorm
erweitert wird. So wird der Browser auch als E-Mail Client oder Instant Messenger genutzt. Neue Elemente, wie
<video> oder die Drag&Drop Schnittstelle sind nun etabliert, um in Zukunft auf Plugins, wie Flash oder
Java-Applets verzichten zu können. HTML5 ist abwärtskompatibel. Die Features der neuen Elemente sind auf
älteren Browsern, ohne HTML5 Unterstützung, nicht erkennbar, jedoch wird das Element als das bekannte <input
type="text"> Element interpretiert und kann dadurch weiter genutzt werden[13].
HTML Dokumente
HTML ist eine Sprache, die mittels einer Syntax und spezieller Anweisungen zur Darstellung von Texten,
Tabellen und Bildern, der Strukturierung und der Erstellung eines Layouts von Dokumenten dient. Über
Hyperlinks können einzelne Dokumente interaktiv gestaltet und mit anderen Dokumenten auf dem eigenen oder
anderen Servern verknüpft werden. Das mit HTML erstellte Dokument hat die Endung ?.html? oder ?.htm? und
wird auf dem Server liegend über das Hypertext Transfer Protokoll (HTTP) und einem Browser aufgerufen,
interpretiert und dargestellt[14]. Zudem können HTML Dokumente in E-Mails übertragen und mit kompatibler
E-Mail Software dargestellt werden. Durch die jüngste Entwicklung im Bereich des mobilen Internets sind zudem
immer mehr mobile Browser fähig HTML Dokumente darzustellen[15].
Um ein HTML Dokument zu erstellen kann man einen HTML-Editor, wie z.B. Notepad++, PSPad oder den
einfachen Texteditor verwenden. Der Vorteil bei der Nutzung eines HTML-Editors liegt unter anderem in der
Syntaxhervorhebung, der Autovervollständigung und der Vorschaufunktion[16]. Das Grundgerüst eines HTML
Dokumentes ist immer gleich und sieht wie folgt aus:
<html>
<head>
<titel>Titel des HTML Dokumentes</titel>
Informationen über das HTML Dokument
2.1 Allgemein HTML
5
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
</head>
<body>
Inhalt des HTML Dokuments
</body>
</html>
Struktur eines HTML-Dokumentes[17]
<head>
Das "head" Element ist der Dokumentenkopf, der Informationen über das jeweilige HTML-Dokument enthält. Er
wird in der Regel nicht im Browser angezeigt.
<title>
Dieses Element nennt die Titel des Dokumentes und ist zwingend anzugeben, da es oft von Suchmaschinen
benutzt wird.
<body>
Hier wird der im Browser sichtbare Inhalt eingegeben, wie Texte, Bilder, Tabellen etc.
2.2 Einsatz von Formularen
Formulare bieten dem Besucher einer Webseite die Möglichkeit zur Dateneingabe. Sie bilden die Schnittstelle
zwischen dem Besucher und der Webseite[18]. Der Besucher kann seine Daten über Eingabefelder, mehrzeiligen
Textfeldern, Listen usw. eingeben[19].
Formulare können verschieden eingesetzt werden. Zum einen um "bestimmte, gleichartig strukturierte Auskünfte
von Anwendern einzuholen"[20], den "Anwendern das Suchen in Datenbeständen zu ermöglichen"[20] oder "die
Möglichkeit zugeben, selbst Daten für einen Datenbestand beizusteuern"[20]. Zum anderen um "dem Anwender
die Möglichkeit individueller Interaktion zu bieten um aus einer Produktpalette etwas bestimmtes zu
bestellen"[20].
Formulare finden sehr häufig Verwendung. Um einen Überblick zu verschaffen eine kleine Auflistung von
Formularbeispielen:
• Kontaktformulare
• Webmailer
• Online-Shops
• Hochladen von Dateien
• Suchmaschinen etc.
Ein sehr bekanntest Beispiel für ein Formular ist die Suche von Google.
2.2 Einsatz von Formularen
6
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
3 Analyse
3.1 Anwendungsbeispiel
Unser Anwendungsbeispiel ist ein, für diese wissenschaftliche Arbeit erstelltes, Formular mit dem Namen "Pizza
Mamamia". Es stellt ein Bestellformular eines Pizza-Lieferanten dar. Anhand dieses Beispiels werden die neuen
und alten Funktionen in einem Formular dargestellt. Dieses Anwendungsbeispiel ist die Grundlage auf die unsere
Analyse basiert. Das heißt, dass die modifizierten und neuen Elemente und Attribute anhand dessen erklärt und
aufgezeigt werden.
Das Formular "Pizza Mamamia" im Browser Opera 11.
3 Analyse
7
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
3.1 Anwendungsbeispiel
8
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 1 - Anwendungsbeispiel "Pizza-Bestellformular"
Der Quellcode des Beispiels ist im Anhang unter 5.1.
3.2 Vergleich HTML4 vs. HTML5
In HTML5 wurden im Vergleich zu HTML4 viele neue Elemente, Attribute und Events hinzugefügt bzw.
erweitert. Diese Tatsache bietet Web-Entwicklern die Möglichkeit Funktionen einzusetzen für die in HTML4
noch der Einsatz von JavaScript zwingend nötig war.
Im folgenden Abschnitt werden wir genauer auf die neuen bzw. erweiterten Elemente, Attribute und Events
eingehen und diese anhand von Beispielen exemplarisch darstellen. Auf die Änderungen zu HTML4 werden wir
falls nötig näher eingehen.
3.2.1 Modifizierte Elemente
3.2.1.1 form
Im Gegensatz zu HTML4 muss das form-Element nicht mehr zwingend um ein Eingabefeld in einem Formular
sein. In HTML5 ist es um ein neues form-Attribut für Eingabeelemente erweitert worden. Durch eine
Verknüpfung des form-Elements mit einer ID und einem Namen des form-Attributs eines Eingabefeldes, welches
auf diese ID passt, gehört das Element zum Formular. Egal an welcher Stelle im Dokument sich die einzelnen
Teile befinden[21].
Auflistung über alle Elemente, die sich so einem Formular zuordnen lassen:
• button
• fieldset
• input
• keygen
• label
• meter
• object
• output
• progress
• select
• textarea
Im Beispiel befindet sich das output-Element aktivitaet außerhalb des Formulars mit der id="aktivitaet". Über
JavaScript in den Attributen onformchange, onforminput und onsumbit wird im output-Feld die jeweilige Aktion
angezeigt.
<form action="bestellung_abschicken.html" name="formular_pizza_bestellung"
3.2 Vergleich HTML4 vs. HTML5
9
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
onformchange="javascript:aktivitaet.innerHTML = 'Formular wurde geändert';"
onforminput="javascript:aktivitaet.innerHTML = 'Es wird gerande eine Eingabe getätigt';"
onsubmit="javascript:alert('Bestellung wird geprüft und versendet.');">
<input type="hidden" name="page" value="mamamia">
...
<table>
<tr>
<td><output for="aktivitaet" id="aktivitaet"></output></td>
</tr>
</table>
Abbildung 2 - Ausgabe außerhalb von Form-Elementen
3.2.1.2 legend
In HTML 4.01 konnte das legend-Tag nur im fieldset-Element benutzt werden. Es dient als Überschrift für den
Inhalt eines Blocks. In HTML5 werden die Elemente <fieldset>, <figure> und <details> unterstützt[22]. Dadurch
wird der Inhalt des Elements für den Benutzer verständlicher[23].
...
<fieldset>
<legend><strong>Fortschritt:</strong></legend>
Bestellvorgang:
<progress max="3" value="2">Schritt 2 von 3</progress> <meter value="0.66">66%</meter>
<br />
Bestellnummer: <input type="text" name="bestellnummer" value="2010-12-24.234" readonly>
</fieldset>
...
3.2.1.1 form
10
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 3 - Überschrift für Elemente mit legend
3.2.1.3 input
In HTML5 wurde das input-Element verglichen mit anderen Elementen stark verändert. Hatte dieses in HTML
4.01 lediglich nur einen type-Zustand <input type="text">, so können dem modifizierten input-Element in
HTML5 viele neue Typen zugeteilt werden, die dem Formular nützliche Funktionen zur Verfügung stellen, die
sonst nur durch aufwändige Skripte realisierbar waren[24].
search
Der input-Typ search ist eine Ergänzung bzw. Weiterentwicklung zum "alten" Typ <input type=text>. Das
Suchfeld wird dabei an die Suchmasken der jeweiligen Plattform angepasst, so dass ggf. CSS-Formatierungen
ignoriert werden[24].
<input type="search">
Besonderheit:
Das iPhone passt beim Aufruf einer Website mit dem Eingabefeld input die Tastatur entsprechend an.
3.2.1.2 legend
11
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 4 - iPhone Tastatur (search)
telephone
Mit dem input-Typ telephone soll ein Eingabefeld für eine Telefonnummer bereitgestellt werden. Die Eingabe
erfordert jedoch kein bestimmtes Format. Lediglich Zeilenumbrüche werden ignoriert. Die Funktionen des Feldes
sind vergleichbar mit denen von normalen Text-Feldern[24].
<input type="telephone">
url
Der Typ url ist für die Eingabe von URLs gedacht, wobei dieses Feld eine Besonderheit hat. Es verfügt über eine
eingebaute Validierungsregel, mit der Syntaxüberprüfungen vorgenommen werden können[24].
<input type="url">
Besonderheit:
Das iPhone passt beim Aufruf einer Website mit dem Eingabefeld input die Tastatur entsprechend an.
3.2.1.3 input
12
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 5 - iPhone Tastatur (url)
email
Das Eingabefeld vom Typ email verfügt ebenfalls über eine eingebaute Validierungsregel (vergleiche url). Mit ihr
kann ebenfalls auf die korrekte Syntax-Eingabe der E-Mail geprüft werden, ohne dies über aufwändige
Java-Skripte realisieren zu müssen[24].
...
<tr>
<td>Email:*</td>
<td><input type="email" name="mail" title="Bitte eine gültige E-Mail Adresse eingeben: " required
</tr>
...
</form>
3.2.1.3 input
13
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 6 - Eingabefeld E-Mail in Opera
Besonderheit:
Das iPhone passt beim Aufruf einer Website mit dem Eingabefeld input die Tastatur entsprechend an.
Abbildung 7 - iPhone Tastatur (email)
date und time
Beide Input-Typen stellen neue Funktionen für die Eingabe von Datums- und Zeitangaben im Browser bereit. Mit
date wird die Auswahl eines Datums ermöglicht. Time stellt eine Auswahl für die Uhrzeit zur Verfügung. Im
Browser werden für diese Auswahl neue Formularwidgets angeboten, die als Datumspicker oder
Zeitauswahlfelder auftreten[25].
3.2.1.3 input
14
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
...
<tr>
<td>Zeitpunkt</td>
<td><input type=datetime name="meeting.start" ><input type="text" name="datum" placeholder="YYYY</tr>
...
Abbildung 8 - Datums- und Zeitangaben
datetime und datetime-local
Beide Elemente arbeiten genauso wie das date-Element mit Formularwidgets, bei denen ein Datumspicker bei der
Auswahl angezeigt wird. Dort wird zum gewünschten Datum per Mausklick navigiert und ausgewählt. Der
Unterschied zwischen den beiden Elementen besteht darin, dass beim datetime-Element die UTC-Zeitzone mit
angegeben wird und beim datetime-local nicht. Bei einem Eintrag 16.12.2010 würde das DOM-Attribute value
den Datumsstring 2010-12-16T19:50z zurück liefern. Das z steht für die jeweilige UTC-Zeitzone. Das Element
datetime-local würde den Datumsstring 2010-12-16T19:50 als Ergebnis zurück geben[26].
month und week
Mit diesen beiden Elementen werden die Auswahl eines Monats (month) oder einer Kalenderwoche (week)
ermöglicht.
number
Durch den input-Typ number wird ein Feld für die Eingabe von Zahlen bereitgestellt. Die Eingabe kann über die
Tastatur oder über entsprechende Kontrollelemente im jeweiligen Browser erfolgen. In Verbindung mit den
Attributen min und max kann der Zahlenbereich eingeschränkt werden. Die Werte können beliebige
Fließkommazahlen sein, bei denen der min-Wert kleiner als der max-Wert gewählt werden sollte. Durch die
3.2.1.3 input
15
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Ergänzung des Attributs step kann die Sprungweite der Zwischenschritte über die Kontrollelemente im Browser
reguliert werden. Wird das Attribut nicht angegeben, so wird der default-Wert von 1 genutzt. Dies gilt nicht für
Eingaben über die Tastatur, bei der auch Nicht-Zahlenwerte eingegeben werden können. Diese werden nicht
automatisch abgefangen und muss separat über die Validierungs-API von HTML5 geprüft werden[27].
Im folgenden Beispiel lassen sich die Werte 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 und 10 einstellen, da als step-Wert 1.0
definiert wurde.
...
<td><input type="number" min="0" max="10" step="1.0" size="3"></td>
...
Abbildung 9 - Eingabefeld number mit Step 1.0 in Opera
Besonderheit:
Das iPhone passt beim Aufruf einer Website mit dem Eingabefeld input die Tastatur entsprechend an.
3.2.1.3 input
16
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 10 - iPhone Tastatur (number)
range
Mit dem input-Typ range kann eine Zahl zwischen den durch min und max gesetzten Grenzwerten ausgewählt
werden. Dargestellt wird diese Auswahl im Browser als Schieberegler. Auch hier kann durch das Attribut step
(wie beim number-Attribut) die Größe der möglichen Zwischenschritte festgelegt werden. Der default-Wert bei
keiner Angabe ist ebenfalls 1[28].
...
<tr>
<td><label for="input_gericht_salami">Salami</label></td>
<td><input type="checkbox" name="gericht_salami" id="input_gericht_salami"></td>
<td><input type="number" min="0" max="10" step="1.0" size="3"></td>
<td>10 cm<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="sizes
<td><input type="text" name="gewuerze_salami" autocomplete="on" list="gewuerze" multiple="multipl
</tr>
...
3.2.1.3 input
17
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 11 - Eingabefeld range mit Step 1.0 in Opera
color
Der Typ color stellt eine Farbauswahl zur Verfügung. Damit kann ein bestimmter Farbwert (z.B. #FFFF00)
ausgewählt werden. Die Angabe des Farbwertes erfolgt mit dem Hashtag # gefolgt von der Ziffernfolge
[A-Fa-f0-9]. Jedoch wird dieses Formularelement bisher in keinem Browser unterstützt[28].
Ein beispielhafter Code-Ausschnitt:
<input type="color">
checkbox
Beim checkbox Element wird mit dem Attribut indeterminate ein neuer, zusätzlicher "unbestimmter" Zustand zur
Verfügung gestellt. Dieser lässt nicht erkennen, ob die checkbox angehakt wurde oder nicht[29]. Dieser neue
Status ist nur für die Darstellung der checkbox zuständig und lässt erkennen, ob die checkbox aktiviert ist. Das
Aktivieren der Checkbox muss aktiv über den Benutzer erfolgen oder über das checked-Attribut[30].
<input type="checkbox" id="alpha">
<input type="checkbox" id="beta">
<input type="checkbox" id="gamma" checked>
<script>
document.getElementById('beta').indeterminate = true;
</script>
radio button
Mehrere radio-buttons können zu einer Gruppe zusammengefasst werden. Sie stehen im input-Element und haben
den Typ radio. Bei einer Gruppe von radio-Buttons, aus der eine Auswahl getroffen werden soll, müssen alle
Elemente den gleichen Namen über das Attribut name bekommen. Dieses Zusammenfassen von Gruppen kann
mit dem fieldset-Element verknüpft werden[31].
3.2.1.3 input
18
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Die Größe einer Pizza könnte somit in einem Formular abgefragt werden. Für die optische Aufbereitung wird das
Element legend benutzt, so dass die Überschrift im Rahmen platziert ist.
...
<fieldset>
<legend>Versand</legend>
<table>
<tr>
<td>Versandart:</td>
<td>
<input type=radio name="versandart" value="express" id="versandart_express"><label for="ver
<input type=radio name="versandart" value="standart" id="versandart_express"><label for="ve
</td>
</tr>
<tr>
<td>Zeitpunkt</td>
<td><input type=datetime name="meeting.start" ><input type="text" name="datum" placeholder="Y
</tr>
</table>
</fieldset>
...
Abbildung 12 - Gruppe von Radio-Buttons in Opera
file upload
Der Typ file-upload wird über type=file im input-Element angegeben. Durch die Erneuerungen in HTML5 lassen
sich nun verschiedene Validierungsregeln nutzen, so dass Eingaben von z.B. einem bestimmten File-Typ (Audio)
überprüft werden oder die Auswahl eines Files erforderlich ist. So kann beispielsweise über das Attribut multiple
eine Liste von mehreren Dateien angegeben werden. Damit aus einem übergebenen Pfad nur der Dateiname
extrahiert wird, kann das folgende Konstrukt verwendet werden (es unterscheidet zwischen Windows- und
UNIX-Pfadangaben)[32].
function extractFilename(path) {
var x;
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
3.2.1.3 input
19
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
return path.substr(x+1);
return path; // just the filename
}
<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
function updateFilename(path) {
var name = extractFilename(path);
document.getElementById('filename').textContent = name;
}
</script>
Die neuen Attribute vom Typ input[33]:
Attribut
Wert
Beschreibung
Bei on werden die Daten im Browser gespeichert und
es kann eine Autovervollständigung vorgenommen
werden. Bei off werden keine Informationen im
Browser gespeichert.
Das input-Feld ist während des Ladens der Seite
sichtbar. Hinweis: Nicht im Zusammenhang mit dem
Typ hidden nutzbar.
Definiert die Zugehörigkeit zu einem oder mehreren
form-Elementen.
Wohin die Daten bei Ausführung hin geschickt
werden sollen. Die auszuführende Aktion vom
form-Tag wird überschrieben.
autocomplete
on
off
autofocus
autofocus
form
<form-name>
formaction
<url>
formenctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
Wie sollen die Daten kodiert werden bevor sie an
einen Server übertragen werden. Das Attribut enctype
aus dem form-Tag wird überschrieben.
formmethod
get
post
formnovalidate
formnovalidate
Wie sollen die Daten an einen Server gesendet
werden. Das Attribut action aus dem form-Tag wird
überschrieben.
Das Formular soll nicht validiert werden. Dies setzt
das novalidate-Attribut im form-Tag außer Kraft.
formtarget
_blank
_self
_parent
_top
<frame-name>
Gibt an wo die URL geöffnet werden soll und
überschreibt das target-Attribut aus dem form-Tag.
height
<pixel>
<Prozentangabe %>
Definiert die Höhe in einem Input-Feld und ist nur
nutzbar mit dem Typ image.
list
<datalist-id>
max
<number>
<date>
3.2.1.3 input
Eine datalist mit vordefinierten Optionswerten der
input-Elemente wird angegeben.
Legt den maximalen Wert des Input-Felds fest. Kann
mit min verwendet werden, um einen Bereich zu
20
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
definieren.
min
<number>
<date>
multiple
multiple
pattern
<regulärer Ausdruck>
placeholder
<text>
required
required
step
<number>
Es können mehrere Werte angegeben werden.
Kann den Wert für ein Input-Feld bestimmen. Mit
pattern="[0-9]" muss eine Zahl zwischen 0 und 9
eingegeben werden.
Gibt dem Benutzer durch einen vordefinierten Text
eine Hilfe zur möglichen Eingabe.
Kennzeichnet ein Pflichtfeld und muss zum Absenden
des Formulars ausgefüllt werden.
Gibt in einem Bereich die Sprungweite an.
width
<pixel>
<Prozentangabe %>
Definiert die Breite in einem Input-Feld und ist nur
nutzbar mit dem Typ image.
Legt den minimalen Wert des Input-Felds fest.
3.2.1.4 button
Das button-Element wurde hinsichtlich seiner Attribute verändert. So unterstützt es nun in der HTML5 Version
die Attribute formaction, formenctype, formmethod, formnovalidate und formtarget[34].
Mit dem button können Buttons/Knöpfe in einem Formular dargestellt werden. Die Gestaltung erfolgt entweder
in Textform oder mit Hilfe eines Bildes. Bei den Attributen sollte immer der type mit angegeben werden, da
dieser unterschiedlich von den verschiedenen Browsern bewertet werden kann[35][36].
3.2.1.5 select
Auch dem select-Element wurden neue Attribute hinzugefügt[37]. Mit Hilfe des select-Elements wird eine
Drop-Down Liste zur Verfügung gestellt. Die zur Auswahl bereitgestellten Elemente werden über das Tag option
angegeben. Eine Referenzierung über das form-Attribut zur form-id im form-Element ist möglich[38].
3.2.1.6 option
Das option-Element kann nun in HTML5, anders als in HTML4, auch im <datalist>-Element verwendet werden.
Weitere Anwendungselemente sind select und optgroup[39]. Die Attribute im option-Element müssen nicht
angegeben werden, wobei die Angabe eines Wertes im value-Attribut sinnvoll ist. Diese Angabe wird letztendlich
an den Server gesendet und kann dort weiterverarbeitet werden[40].
3.2.1.7 textarea
Mit dem textarea-Element wird eine Mehrzeiliges Eingabefeld für Benutzer-Eingaben bereit gestellt. Interessante,
neue Attribute sind neben den Attributen form, autofocus und required, die Attribute maxlength, placeholder und
wrap, die in HTML 4 noch keine Verwendung fanden[41].
3.2.1.4 button
21
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Attribute
Wert
maxlength
<number>
placeholder
<text>
wrap
hard
soft
Beschreibung
Legt die maximale Anzahl an zulässigen Zeichen in der
Eingabe-Box fest.
Soll dem Benutzer einen Hinweis zur Ausfüllung der
Eingabe-Box geben.
Wie soll mit dem Inhalt nach dem Abschicken umgegangen
werden. Bei "hard" werden Zeilenumbrüche bei den "Spalten"
durchgeführt und bei "soft" (entspricht dem default) nicht.
3.2.1.8 fieldset
Das fieldset-Element legt einen Rahmen um einen Bereich. Es können die Attribute name und disabled verwendet
werden. Mit name wird dem fieldset ein eindeutiger Name über den Parameter value gegeben. Mit Hilfe von
disabled kann das gesamte fieldset-Element ausgeblendet werden. Dies kann z.B. hilfreich sein, wenn andere
Parameter noch nicht ausgefüllt wurden und für das fieldset-Element zwingend erforderlich sind[42][43].
3.2.2 Neue Elemente
3.2.2.1 label
Das label-Element gibt einem Element eine Bezeichnung/Titel. Eine besondere Bedeutung hat das for-Attribut,
welches den gleichen Namen wie das ID-Attribut eines input-Feldes haben sollte, wenn diese zusammen gehören
sollen[44].
<form>
<label
<input
<br />
<label
<input
</form>
for="male">Male</label>
type="radio" name="sex" id="male" />
for="female">Female</label>
type="radio" name="sex" id="female" />
3.2.2.2 datalist
Mit diesem Element kann man eine Art Auto-Vervollständigung für Input-Elemente erzeugen. Es werden
verschiedenen, vordefinierte Werte für ein Eingabefeld bereit gestellt. Das datalist-Element ist somit ein
unsichtbares Element, dass als Platzhalter für eine Anzahl von Options-Elementen dienen kann. Eine
Verknüpfung zwischen input- und datalist-Elementen wird über einen ID-Namen hergestellt[45].
...
<tr>
<td>Name*</td>
<td><input type="text" name="name" autocomplete="on" list="name" required /></td>
</tr>
...
<datalist id="name">
3.2.1.7 textarea
22
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
<option value="Andreas Schreiber">
<option value="Daniel Dreissen">
<option value="Tom Reißberg">
<option value="Ivo Marx">
</datalist>
...
Abbildung 13 - datalist-Element mit autocomplete
3.2.2.3 optgroup
Das optgroup-Tag ermöglicht es in Drop-Down Menüs die Auswahl zu gruppieren und mit nicht auswählbaren
Überschriften zu versehen[46][47].
<select name="plz">
<optgroup label="Düsseldorf">
<option value ="40210">40210</option>
<option value ="40211">40211</option>
<option value ="40212">40212</option>
<option value ="40213">40213</option>
</optgroup>
<optgroup label="Köln">
<option value="50667">50667</option>
<option value="50668">50668</option>
</optgroup>
<optgroup label="Remscheid">
<option value="42857">42857</option>
<option value="42859">42859</option>
</optgroup>
</select>
3.2.2.2 datalist
23
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 14 - Drop-Down Menü mit Überschriften
3.2.2.4 keygen
Das keygen-Element ist ein Element zur Erstellung eines Schlüsselgenerators. Durch die Auswahl wird der
Private Key im lokalen Speicher abgelegt. Der Public Key wird verpackt und zum Server gesendet[48].
<label for="key">Schlüsselstärke</label>
<keygen keytype="rsa" name="schluessel" id="key">
<input type="submit" value="Senden">
Mit Hilfe des keytype-Attributs ist es möglich die Art des Schlüssels auszuwählen, die erzeugt werden soll.
Aktuell ist ausschließlich die Auswahl von RSA möglich. Jedoch lässt die Spezifikation offen, ob und auf welche
Weise der jeweilige Browser ein Interface bereitstellt. Firefox und die Webkit-Familie stellen zwei Stufen zur
Verfügung. Andere z.b. Opera hingegen bieten eine ausführlichere Auswahl an[49].
Abbildung 15 - Keygen
3.2.2.5 output
Das Output-Element zeigt das Ergebnis, z.B. einer Berechnung, an. Dessen Funktionsweise ist vergleichbar mit
der eines "normalen" Input-Elements. Der Unterschied liegt darin, dass der Inhalt nicht vom Benutzer,sondern
vom System (also das Ergebnis einer Operation) eingefügt wird[50].
<label for="ergebnis">Ergebnis:</label>
<output for="a b" id= "ergebnis"></output>
3.2.2.6 progress
Das Progress-Element soll zur Fortschrittsanzeige, wie z.B. bei Installationen, Ladevorgängen oder
Rechenoperationen, dienen. Mit Hilfe des max-Attributs kann die Anzahl der Schritte bis zum Ende definiert
3.2.2.3 optgroup
24
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
werden. Das value-Attribut gibt Auskunft über den aktuellen Stand der Operation[51]. Fehlt allerdings dieses
Attribut, so ist kein genauer Status über die aktuelle Operation bekannt. Unterstützt wird das Element aber bisher
noch in keinem Browser[52].
<h1>Installation Pizza-Spiel</h1>
<p>
<progress max="5" value="2">Schritt 2 von 5</progress>
</p>
3.2.2.7 meter
Mit dem Meter-Element kann die Anzeige von Werten zwischen einem Minimal- und Maximalwert dargestellt
werden. So könnte zum Beispiel der belegte Speicherplatz grafisch dargestellt werden[53].
<h1>Festplattenplatz: </h1>
<p>
Disk Usage: <meter value="0.71">71%</meter>
</p>
3.2.3 Attribute
Attribute können auf Formularelemente angewendet werden. Diese beeinflussen das Element in seiner Funktion
und das Verhalten beim Senden der Daten.
autocomplete
Das Attribut autocomplete hat 3 Zustände. Diese sind on, off und default. Wobei default bei keiner Angabe des
Attributs automatisch gesetzt wird und den Standartwert des Browsers lädt.
Der Zustand off deaktiviert die Autovervollständigung für input-Elemente. Dieses Attribut ist z.B. sinnvoll bei der
Eingabe von Benutzernamen. So ist gewährleistet, dass der Benutzername nicht vom Browser ausgegeben wird
und ein Unbefugter nur noch das Passwort braucht[54].
<input type="text" name="ac" autocomplete="off">
<input type="text" name="ac" autocomplete="on">
Abbildung 16 - Beispiel autocomplete
list
Mit dem Attribut list kann einem Input-Element eine data-list-Element mitgegeben werden. Das datalist-Element
3.2.2.6 progress
25
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
enthält Datensätze, die dem Benutzer mit einem Klick oder durch die Eingabe in das Element als Möglicher Inhalt
angeboten wird. So könnten z.B. in einem Formular Gewürze hinterlegt werden die für die Eingabe der Zutaten
vorgeschlagen werden[54].
<input type="text" name="gewuerze_salami" autocomplete="on" list="gewuerze" multiple="multiple">
<datalist id="gewuerze">
<option value="Oregano">
<option value="Knoblauch">
<option value="Salz">
<option value="Pfeffer">
</datalist>
Abbildung 17 - Beispiel list
readonly
Mit dem Attribut readonly können Elemente zur Eingabe gesperrt werden. Die Elemente geben dann nur den
vordefinierten Wert aus und übertragen diesen[54].
<input type="text" name="sollwert" value="100" readonly>
Dieses Attribut war bereits in HTML4 im gleichen Umfang verfügbar.
size
Das Attribut size beschreibt die Größe des Elements[54].
<input type="text" name="test" size="3">
Dieses Attribut war bereits in HTML 4 im gleichen Umfang verfügbar.
required
Das Attribut required besagt, dass ein Element zwingend gefüllt werden muss, ansonsten kann das Formular nicht
abgeschickt werden[54].
<input type="text" name="name" autocomplete="on" list="name" required>
3.2.3 Attribute
26
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 18 - Beispiel required
multiple
Mit dem Attribut multiple können in ein Element mehrere Werte mit einem Komma getrennt eingegeben werden.
Dies ermöglicht z.B. bei der Eingabe mehrerer E-Mail-Adressen die Gültigkeit jeder Adresse zu prüfen.
Cc: <input type=email multiple name=cc list=contacts>
<datalist id="contacts">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
</datalist>
[54]
Abbildung 19 - Beispiel multiple
maxlength
Das Attribut maxlength beschreibt die maximale Anzahl von Zeichen, die in das Element eingetragen werden
können.
<input type="text" name="test" maxlenght="10">
Dieses Attribut war bereits in HTML 4 im gleichen Umfang verfügbar.
pattern
Mit dem Attribut pattern können die Eingaben mit regulären Ausdrücken geprüft werden. Das Formular kann erst
abgeschickt werden, wenn die Prüfung anhand der regulären Ausdrücke erfolgreich ist. Dieses Attribut kann z.B.
zur Prüfung von Seriennummern oder Bestellnummern benutzt werden[54].
Seriennummer:
<input pattern="[0-9][A-Z]{3}" name="seriennummer">
3.2.3 Attribute
27
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 20 - Beispiel pattern
min/max
Durch die Verwendung des min bzw. max Attributes können z.B. bei der Verwendung eines Input-Elements mit
dem Typ number, minimal und maximal Werte definiert werden[54].
<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="sizes">
step
Mit dem Attribut step kann z.B. die Schrittweite bei dem Input-Element mit dem Typ range eingestellt werden.
<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="sizes">
Abbildung 21 - Beispiel step
placeholder
Mit dem Attribut placeholder können dem Benutzer Hilfestellungen bei der Eingabe der Daten in dem Formular
gegeben werden. So können z.B. Formatvorlagen für Datumseingaben eingeblendet werden[54].
<input type="text" name="datum" placeholder="YYYY-MM-DD">
Abbildung 22 - Beispiel placeholder
novalidate
Mit Hilfe des Attributs novalidate kann in einem Formular erzwungen werden, dass die Eingaben vor dem
Versenden nicht überprüft werden[55].
<form action="" novalidate>
width/height
3.2.3 Attribute
28
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Mit den Attributen width und height kann die Größe eines Input-Elementes bestimmt werden[55].
<input type="text" name="test" width="24" height="24">
autofocus
Mit dem Attributen autofocus kann ein Element im Formular bestimmt werden, welches beim Laden der Seite
automatisch in den Focus gelangen soll[55].
<input type="text" name="user_name"
autofocus="autofocus">
3.2.4 Events
Allgemeines zu Event-Handlern
>>[..]Event-Handler (Ereignisbehandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript.
Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um Bestandteile handelt,
die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den
HTML-Sprachstandard mit aufgenommen. Dort wird auch festgelegt, in welchen HTML-Tags welcher
Event-Handler vorkommen darf.
Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick.
Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere
Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Seite
Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onclick="Umrechnen()".
Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick etwa für das Ereignis "Anwender hat mit
der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das
auslösende Element. Wenn der Event-Handler onclick beispielsweise in einem Formular-Button notiert wird, wird
der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses
Elements erfolgt[..].<<[56]
Events in HTML4 sowie HTML5
onblur
"Das onblur-Event wird ausgeführt wenn ein Element den Fokus verliert. Entweder durch das Zeigegerät oder
durch eine Tab-Navigation. Es kann mit den gleichen Elementen wie onfocus verwendet werden."[57]
onblur="javascript:this.style.border = 'solid green 1px'"
Abbildung 23 - Beispiel onblur
3.2.4 Events
29
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
onchange
"Das onchange Event wird ausgeführt wenn ein Steuerelement den Fokus verliert und der Wert sich nach der
Fokussierung geändert hat. Das Attribute kann in folgenden Elementen verwendet werden: INPUT, SELECT und
TEXTAREA."[58]
onchange="javascript:this.form.info.innerHTML = 'Ok, machen wir ;)'"
Abbildung 24 - Beispiel onchange
onfocus
"Das onfocus Event wird ausgeführt, wenn ein Element durch das Zeigegerät oder durch eine Tab-Navigation den
Fokus erhält. Das Attribut kann in folgenden Elementen verwendet werden: A, AREA, LABEL, INPUT,
SELECT, TEXTAREA und BUTTON."[59]
onfocus="javascript:this.style.border = 'solid blue 1px'"
Abbildung 25 - Beispiel onfocus
onreset
"Das Onreset-Event wird ausgeführt, wenn ein Formular resetet wird. Das Attribute kann ausschließlich mit dem
Form-Element verwendet werden."[60]
Onreset=?javascript:alert(?Sie haben das Formular resetet.?)?
onselect
"Das Onselect-Event wird ausgeführt, wenn ein User Text in einem Textfeld markiert. Das Attribut kann in
folgenden Elementen verwendet werden: INPUT und TEXTAREA"[61]
<input type="text" name="gutscheinnr" value="123.456.789" onselect="javascript:alert('Sie Sparfuchs')
3.2.4 Events
30
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 26 - Beispiel onselect
onsubmit
"Das Onsubmit-Event wird ausgeführt, wenn ein Formular abgeschickt wird. Das Attribute kann ausschließlich
mit dem Form-Element verwendet werden."[62]
onsubmit="javascript:alert('Bestellung wird geprüft und versendet.');"
Neue Events in HTML5
onformchange
"Das Script startet, wenn sich das Formular verändert."[63]
onformchange="javascript:aktivitaet.innerHTML = 'Formular wurde geändert';"
Abbildung 27 - Beispiel onformchange
onforminput
"Das Script startet, wenn im Formular eine Eingabe erfolgt."[64]
onforminput="javascript:aktivitaet.innerHTML = 'Es wird gerade eine Eingabe getätigt';"
Abbildung 28 - Beispiel onforminput
oninput
"Das Script startet, wenn in einem Element des Formulars eine Eingabe erfolgt."[65]
3.2.4 Events
31
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
oninput="javascript:this.form.info.innerHTML = 'Ohje, was kommt denn jetzt?'"
Abbildung 29 - Beispiel oninput
oninvalid
"Das Script startet, wenn ein Element ungültig ist."[66]
<input
type="text"
pattern="[A-Za-z]+[.]? [0-9]+"
name="straße"
oninvalid="javascript:this.form.aktivitaet.innerHTML='Sie haben einen Fehler im Feld Straße gemach
required
>
Abbildung 30 - Beispiel oninvalid
3.2.5 Sicherheit
Der Sicherheitsaspekt spielt schon lange eine wichtige Rolle bei Formularen, da sie eine große Angriffsfläche
bieten. Sie sind der einzige Teil einer Website, über den Anwender bzw. Besucher einer Website interaktiv
agieren können. Die Besucher geben mittels Formularen Daten ein, die dann weiter verwendet werden. Eine
bekannte Sicherheitslücke ist das Cross-Site-Scripting (XSS). Wenn im Input-Element ein Javascript-Code
eingegeben wird und das Formular nach Absenden nochmals für den Anwender als Übersicht angezeigt wird,
interpretiert der Browser diesen Code und führt ihn aus. So können andere Webseiten dargestellt werden, auf
andere Webseiten weiter geleitet werden oder ein Schadcode ausgeführt werden. Ein anderes beispielhaftes
Sicherheitsloch sind Spamscripte. Spamscripte füllen alle Felder eines Formulars automatisch aus und versenden
es. Mittlerweile gibt es einfache Lösungswege, die diese Sicherheitslücken beseitigen. Bei XSS sollte man alle
eingegebenen Texte sorgfältig prüfen lassen und Schlüsselworte, die eine Scriptsprache charakterisieren, filtern
und sperren. Ein Spamscript kann zum Beispiel durch ein für den Menschen unsichtbares Eingabefeld verhindert
werden. Wenn dieses Feld trotzdem ausgefüllt wird, weiß man, dass es sich um ein Spamscript handelt. Zwar kein
technisches Sicherheitsproblem, jedoch ebenfalls erwähnenswert ist die Tatsache, dass Anbieter eine Webpage
Formulare anbieten, um schnell an möglichst viele Kontaktdaten der Besucher zu gelangen und diese dann an
Dritte verkaufen. Angelockt werden diese meist mit Gewinnspielen oder der Möglichkeit der kostenfreien
Downloadmöglichkeit von Trailversionen teurer Anwendungen[67]. Die soeben beschriebenen beispielhaften
Sicherheitslücken galten für HTML 4.01 und gelten weiterhin für HTML5. Während bei HTML 4.01 noch auf
JavaScript usw. zurück gegriffen werden musste, kann bei HTML5 darauf verzichtet werden, sodass die damit
verbundenen möglichen Sicherheitslücken nicht auftreten.
3.2.5 Sicherheit
32
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Eine weitere Sicherheitslücke könnte das pattern-Atrribut eröffnen. Bei fehlendem Wissen könnte beim Einsatz
auf die serverseitige Überprüfung verzichtet werden und so ein Schlupfloch für Hacker darstellen. Das neue
Keygen-Element soll mehr Sicherheit bei der Authentifizierung des Benutzers bieten. Jedoch wird dieses Element
noch nicht von allen Browsern unterstützt, um einen sinnvollen und nützlichen Sicherheitsstandard
darzustellen[68]. Da dies das einzige neue Element für die Erhöhung der Sicherheit bei Formularen ist, lässt sich
daraus folgern, dass die Fokussierung bei der Entwicklung von HTML5 nicht auf der Weiterentwicklung der
Sicherheit lag.
3.2.6 Performance
Durch den Einsatz von HTML5 in Bezug auf Formulare kann theoretisch auf Ajax bzw. JavaScript komplett
verzichtet werden. Dadurch wird der Umfang des Quellcodes verringert und somit auch die zu übertragenden
Daten. Aufgrund des kleineren und nicht so komplexen Quellcodes kann dieser auch gegebenenfalls von dem
Browser schneller verarbeitet und angezeigt werden.
Wobei dazu gesagt werden sollte, dass bei der Rechenleistung von aktuellen Computersystemen und dem weit
verbreiteten Breitband-Internet, sich wahrscheinlich kein großer Unterschied in der Performance für den
Standardanwender im Internet festzustellen sein wird.
3.2.7 Browserkompatibiltät
Aufgrund der Tatsache, dass HTML5 noch in der Entwicklungsphase und noch kein verabschiedeter Standard ist,
werden die neuen Elemente und Attribute von HTML5 nicht gleichermaßen von den gängigen Browsern
unterstützt. Zu den Vorreitern unter den Browsern zählen Opera und Safari. Das Schlusslicht bildet der Internet
Explorer.
Folgende Browser unterstützen HTML5 im Allgemeinen[69]:
• ab Firefox 3.0
• ab Safari 3.0
• ab Opera 10.0
• ab Chrome 3.0
• ab Internet Explorer 9
HTML5 ist abwärtskompatibel, d.h. wenn ein Browser ein Element oder Attribut nicht unterstützt, ist es trotzdem
möglich dieses zu benutzen. Die neuen Input-Typen werden zum Beispiel als normale <input type="text">
behandelt, sofern sie nicht vom Browser unterstützt werden. Die nicht unterstützen Attribute werden einfach
außer Acht gelassen und finden keine Anwendung[70].
Die unten stehenden Tabellen geben eine aktuelle (Stand: 12/2010) Übersicht über die Browserkompatibilät der
neuen Elemente und Attribute bezogen auf Formulare:
Neue und modifizierte Elemente[71]
Elemente
Safari 5.03*
Opera 11*
Firefox 3.6.12*
Chrome
8.0.882.215*
Internet
Explorer 9
datalist
3.2.6 Performance
33
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
fieldset
keygen
label
meter
optgroup
output
progress
legend
input
button
select
option
textarea
/*Mac Version des Browsers
input-Attribute[71]
Attribute
Safari 5.03*
Opera 11*
Firefox 3.6.12*
Chrome
8.0.882.215*
Internet
Explorer 9
autocomplete
autofocus
list
max
min
mutiple
pattern
placeholder
required
step
/*Mac Version des Browsers
Nach dem neuesten Update des Opera Browsers auf die Version 11 (16.12.2010) unterstützt dieser nun alle neuen
Elemente und Attribute des Formulars.
3.2.8 Alternativen
PHP
"PHP ist eine weit verbreitete Open-Source-Allzweck-Skriptsprache, welche speziell für die Webprogrammierung
3.2.7 Browserkompatibiltät
34
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
geeignet ist und in HTML eingebettet werden kann"[72].
Mit PHP können nach Absenden eines Formulars die eingegebenen Werte mittels Funktionen überprüft werden.
Z.B. kann das neue HTML5 Attribute "Pattern" dadurch ersetzt werden oder das Input-Element E-Mail, URL oder
Number wird auf Korrektheit überprüft. Hierzu können z.B. folgende Funktionen genutzt werden:
eregi (PHP 4, PHP 5)
>>Sucht Übereinstimmung mit regulärem Ausdruck ohne Berücksichtigung von Groß-/Kleinschreibung[73].<<
Damit lässt sich prüfen, ob sich unzulässige Zeichen in der Eingabe bei einer E-Mail, URL oder Nummer
befinden.
Syntax:
int eregi ( string $pattern , string $string [, array &$regs ] )
Beispiel:
<?php
$string = 'XYZ';
if (eregi('z', $string)) {
echo "'$string' contains a 'z' or 'Z'!";
}
?>
ereg (PHP 4, PHP 5)
>>Sucht Übereinstimmungen mit einem regulären Ausdruck[74].<<
Syntax:
int ereg ( string $pattern , string $string [, array &$regs ] )
Beispiel:
<?php
if (ereg ("([0-9]{4})-([0-9]{1,2})-([0-9]{1,2})", $date, $regs)) {
echo "$regs[3].$regs[2].$regs[1]";
} else {
echo "Ungültiges Datumsformat: $date";
}
?>
Javascript
>>JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache
wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen
Hilfe sich Web-Seiten optimieren lassen[..][75].<<
3.2.8 Alternativen
35
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
JavaScript kann als Alternative genutzt werden um z.B. das Input-Element Number zu ersetzen. Hierbei werden
die Buttons zum Erhöhen oder zum Senken der Zahl durch zwei Buttons, welche mit JavaScript versehen sind,
ersetzt.
Funktion: innerHTML
>>Speichert den Inhalt eines HTML-Elements. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts
HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert[76].<<
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
var Neu = document.all.meinAbsatz.innerHTML + 1;
function erhoehen () {
document.all.meinAbsatz.innerHTML = Neu;
}
</script>
</head><body>
<p id="meinAbsatz">1</p>
<a href="javascript:erhoehen()">Erhöhen</a>
</body>
</html>
CSS / HTML
>>CSS oder Cascading Style Sheets ist eine Sprache zum Formatieren von HTML/XHTML-Elementen.
Verglichen mit den HTML-Formatierungen bietet CSS erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung,
Rahmen, Innen- und Aussenabstände, Listen, Hintergründe, Positionieren[77], ...<<
Mittels CSS und HTML Block-Elementen kann das Fieldset-Tag ersetzt werden.
Beispiel: Mittels "div" wird ein Codeabschnitt gruppiert und über eine eindeutige ID kann dieses Block-Element
z.B. ausgeblendet oder zentriert werden. Mittels CSS kann noch ein zusätzliche Rahmen um den Block gesetzt
werden.
<div align="center" id="container" style="border: 1px solid black">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>
3.2.8 Alternativen
36
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 31 - Beispiel Zentrierter div-Tag mit Rahmen
JQuery UI
"jQuery UI bietet Abstraktionen für die Low-Level-Interaktion und Animation, erweiterte Effekte und grafisch
High-Level anpassbare Widgets, die auf der jQuery JavaScript Library gebaut wurden, mit derer Hilfe Sie
interaktive Web-Anwendungen bauen können[78]."
JQuery UI bietet eine sehr große Auswahl von Funktionen mit denen sehr viele HTML Formularelemente ersetzt
werden können.
Es kann z.B. das Input-Element Range ersetzt werden:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="style
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function() {
$("#slider").slider();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
Abbildung 32 - Beispiel JQuery UI - Slider
Ebenfalls könnte mittels JQuery UI eine Farbauswahl eingebunden werden...
$('#colorpickerHolder').ColorPicker({flat: true});
3.2.8 Alternativen
37
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Abbildung 33 - Beispiel JQuery UI - Colorpicker
... oder standart Formular Elemente, denen noch ein alternatives aussehen zugeordnet wird:
$('input[type=checkbox]').checkbox({
cls:'jquery-safari-checkbox',
empty: 'http://www.yoursite.com/images/empty.gif'
});
Abbildung 34 - Beispiel JQuery UI - Checkbox
3.3 Ergebnis
Nach dem detaillierten Vergleich lässt sich folgendes Ergebnis erschließen:
Die Implementierung der neuen Elemente, Attribute und Typen sind eine Erleichterung in der Programmierung
von Formularen. Es muss nicht mehr auf die Angebote von Drittanbieter wie JavaScript, JQuery etc. ausgewichen
werden, sondern es ist nun möglich ein umfangreiches Formular mit vielen Features auf reiner HTML Basis zu
erstellen. Durch den ID-Tag ist nun auch eine freie Gestaltung des Formulars möglich. Es können also nun
Elemente eines Formulars außerhalb des form-Elements positioniert werden. Zudem erleichtern die neuen
Elemente auch die Eingabe der Anwender. Als Beispiel kann man das Formularwidget "datetime picker" des
input-Elementes heranziehen, bei dem der Anwender das Datum über einen Kalender per Mausklick auswählen
kann. Dazu sind viele clientseite Validierungenen möglich, bei denen anhand des pattern-Attributes die
Richtigkeit einer Eingabe überprüft wird. Des weiteren sind nette Features wie das Anpassen der Tastatur bei
Smartphones, wie z.B. beim iPhone, hinzugekommen. Da HTML5 noch nicht als Standard definiert worden ist,
ist noch keine vollständige Unterstützung aller Browser gegeben. Zur Zeit hat nur die aktuellste Version des
Opera-Browsers (Version 11) als einziger Browser alle Neuerungen implementiert. Zwar wird bei einer fehlenden
Unterstützung ein neues Element als "input type=text" Element interpretiert, sodass ein Formular trotzdem
verwendet werden kann, jedoch ist ein professioneller Einsatz noch nicht zu empfehlen.
Abschließend kann man sagen, dass die neuen Implementierungen ein gute und sinnvolle Neuerung in HTML5
sind. Sobald HTML5 als Standard definiert und von allen Browsern vollständig unterstützt wird, steht einem
professionellem Einsatz nichts mehr im Wege.
3.3 Ergebnis
38
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
4 Fazit
Positiv zu erwähnen ist, dass durch die Neuerungen im Zuge von HTML5 zukünftig viel Aufwand hinsichtlich
der Programmierung von Formularen gespart werden kann, da kein Ausweichen auf andere Lösungen mehr nötig
ist. Darüber hinaus ist es leicht sich in die Programmierung mit HTML5 einzuarbeiten, wenn man bereits erste
Erfahrungen mit HTML besitzt.
Ein Vorteil für den Besucher einer Website ist das neue Pattern-Attribut, weil die Eingabe bereits im Browser auf
Richtigkeit überprüft wird. Der Nachteil daran ist, dass aufgrund fehlendem Programmier-Wissens, eine
Sicherheitslücke entstehen kann. Ein unwissender Programmierer könnte sich darauf verlassen und eine
serverseitige und sicherere Überprüfung außer Acht lassen.
Auf der anderen Seite steht die aktuelle Problematik mit der Browserkompatilibät. Auch hier besteht die Gefahr,
dass man sich dieser nicht bewusst ist und ein in HTML5 programmiertes Formular professionell einsetzt (z.B. in
einer Unternehmenswebseite) und dieses Formular zwar anwendbar ist, dabei aber unbewusst auf die neuen und
unterstützenden Neuerungen verzichtet werden muss. Ein anderer Aspekt ist der Verlust der Bedeutung von
JavaScript, da vor allem im leihen und semi-professionellen Einsatz von HTML5 bei der Programmierung diese
an Wert verlieren.
Es gilt als fast sicher, dass HTML5 der nächste Schritt im Web 2.0 sein wird. Nur ist es aktuell noch unklar,
wann, in welcher Form und von wem. Ob W3C oder WHATWG als Herausgeber bzw. HTML5 als Standard
verabschiedet wird ist eine spannende Frage, die bald beantwortet werden wird. WHATWG hat dabei wohl die
besseren Chancen, die in dem aktuellen Fortschritts als auch in der Historie begründet ist. Auch wegen der
Tatsache, dass die Browserhersteller hinter HTML5 stehen, ist aller Voraussicht nach HTML5 die Zukunft.
Letztendlich lässt sich im Moment nur eine Empfehlung für den privaten Gebrauch aussprechen. Auf einen
professionellen Einsatz sollte aktuell noch verzichtet werden.
5 Anhang
5.1 Quellcode des Beispiels
<h1>Pizza Mamamia </h1>
<form action="bestellung_abschicken.html" name="formular_pizza_bestellung"
onformchange="javascript:aktivitaet.innerHTML = 'Formular wurde geändert';"
onforminput="javascript:aktivitaet.innerHTML = 'Es wird gerande eine Eingabe getätigt';"
onsubmit="javascript:alert('Bestellung wird geprüft und versendet.');">
<input type="hidden" name="page" value="mamamia">
<fieldset>
<legend><strong>Fortschritt:</strong></legend>
Bestellvorgang:
<progress max="3" value="2">Schritt 2 von 3</progress> <meter value="0.66">66%</meter>
<br />
Bestellnummer: <input type="text" name="bestellnummer" value="2010-12-24.234" readonly>
</fieldset>
<fieldset>
<legend>Bestellung</legend>
4 Fazit
39
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
<table border="0" width="60%">
<tr>
<td><strong>Pizza</strong></td>
<td> </td>
<td><strong>Anzahl</strong></td>
<td><strong>Größe</strong></td>
<td><strong>Gewürze</strong></td>
</tr>
<tr>
<td><label for="input_gericht_salami">Salami</label></td>
<td><input type="checkbox" name="gericht_salami" id="input_gericht_salami"></td>
<td><input type="number" min="0" max="10" step="1.0" size="3"></td>
<td>10 cm<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="s
<td><input type="text" name="gewuerze_salami" autocomplete="on" list="gewuerze" multiple="mul
</tr>
<tr>
<td><label for="input_gericht_hawai">Hawai</label></td>
<td><input type="checkbox" name="gericht_hawai" id="input_gericht_hawai"></td>
<td><input type="number" min="0" max="10" step="1.0" size="3"></td>
<td>10 cm<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="s
<td><input type="text" name="gewuerze_hawai" autocomplete="on" list="gewuerze" multiple="mult
</tr>
<tr>
<td><label for="input_gericht_tonno">Tonno</label></td>
<td><input type="checkbox" name="gericht_tonno" id="input_gericht_tonno"></td>
<td><input type="number" min="0" max="10" step="1.0" size="3"></td>
<td>10 cm<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="s
<td><input type="text" name="gewuerze_tonno" autocomplete="on" list="gewuerze" multiple="mult
</tr>
<tr>
<td><label for="input_gericht_diablo">Diablo</label></td>
<td><input type="checkbox" name="gericht_diablo" id="input_gericht_diablo"></td>
<td><input type="number" min="0" max="10" step="1.0" size="3"></td>
<td>10 cm<input type="range" min="10" max="50" value="30" step="5" name="size_salami" list="s
<td><input type="text" name="gewuerze_diablo" autocomplete="on" list="gewuerze" multiple="mul
</tr>
<tr>
<td>Zusatzwünsche</td>
<td colspan="3"><textarea rows="3" cols="50" name="zusatz"
onfocus="javascript:this.style.border = 'solid blue 1px'"
onblur="javascript:this.style.border = 'solid green 1px'"
onchange="javascript:this.form.info.innerHTML = 'Ok, machen wir ;)'"
oninput="javascript:this.form.info.innerHTML = 'Ohje, was kommt denn jetzt?'"></textarea></
<td><output for="info_in_bestellung" id="info"></output></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Kontakt:</legend>
<table>
<tr>
<td>Name*</td>
<td><input type="text" name="name" autocomplete="on" list="name" required /></td>
</tr>
<tr>
<td>Email:*</td>
<td><input type="email" name="mail" title="Bitte eine gültige Email-Adresse eingeben: " requi
</tr>
<tr>
<td>Passwort*:</td>
<td><input type="password" name="passwort" value="asdfgh" required></td>
5.1 Quellcode des Beispiels
40
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
</tr>
<tr>
<td>Telefon:</td>
<td><input type="telephone" name="telefon" maxlength="15" value="0202 123456" />
</td>
</tr>
<tr>
<td>Straße / Nr.*</td>
<td><input type="text" pattern="[A-Za-z]+[.]? [0-9]+" name="straße"
oninvalid="javascript:this.form.aktivitaet.innerHTML ='Sie haben einen Fehler im Feld Straß
</tr>
<tr>
<td>Stadt / PLZ</td>
<td>
<select name="plz">
<optgroup label="Düsseldorf">
<option value ="40210">40210</option>
<option value ="40211">40211</option>
<option value ="40212">40212</option>
<option value ="40213">40213</option>
</optgroup>
<optgroup label="Köln">
<option value="50667">50667</option>
<option value="50668">50668</option>
</optgroup>
<optgroup label="Remscheid">
<option value="42857">42857</option>
<option value="42859">42859</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Land:</td>
<td><input name="land" type="text" list="laender" pattern="[A-Z]{3}" /></td>
</tr>
<tr>
<td>Geburtstag</td>
<td><input type="text" name="geburtstag" placeholder="YYYY-MM-DD"></td>
</tr>
<tr>
<td>Meine Homepage:</td>
<td><input type="url" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Versand</legend>
<table>
<tr>
<td>Versandart:</td>
<td>
<input type=radio name="versandart" value="express" id="versandart_express"><label for="ver
<input type=radio name="versandart" value="standart" id="versandart_express"><label for="ve
</td>
</tr>
<tr>
<td>Zeitpunkt</td>
<td><input type=datetime name="meeting.start" ></td>
</tr>
</table>
5.1 Quellcode des Beispiels
41
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
</fieldset>
<fieldset>
<legend>Sonstiges</legend>
<table>
<tr>
<td>Gutschein hochladen:</td>
<td> <input type=file name="gutschein"> </td>
</tr>
<tr>
<td>Gutscheinnr eintragen</td>
<td><input type="number"><button type="button" onclick="alert('Passt :)')">Prüfen</button></t
</tr>
<tr>
<td>Nur heute konstenlose Gutscheinnummern </td>
<td><input type="text" name="gutscheinnr" value="123.456.789" onselect="javascript:alert('Sie
</tr>
<tr>
<td>Bestellung verschlüsseln</td>
<td><keygen keytype="rsa" name="schluessel" id="key"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Info</legend>
<table>
<tr>
<td><output for="aktivitaet" id="aktivitaet"></output></td>
</tr>
</table>
</fieldset>
<table>
<tr>
<td> </td>
</tr>
<tr>
<td>Mit * gekennzeichnete Felder sind Pflichtfelder!</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<datalist id="sizes">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50">
</datalist>
<datalist id="name">
<option value="Andreas Schreiber">
<option value="Daniel Dreissen">
<option value="Tom Reißberg">
<option value="Ivo Marx">
</datalist>
<datalist id="laender">
<option value="D" label="Deutschland">
5.1 Quellcode des Beispiels
42
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
<option value="ES" label="Spanien">
<option value="NL" label="Niederlande">
</datalist>
<datalist id="gewuerze">
<option value="Oregano">
<option value="Knoblauch">
<option value="Salz">
<option value="Pfeffer">
</datalist>
5.2 Fußnoten
1. ? Vgl. http://www.wordiq.com/definition/HTML (02.12.2010,17:54)
2. ? Vgl. Ernst, Hartmut:Grundkurs Informatik, 4.Auflage, 2008, Seite 735
3. ? Vgl. http://aktuell.de.selfhtml.org/links/html.htm(06.12.2010 17:18)
4. ? Vgl. http://www.w3.org/MarkUp/html-spec/html-pubtext.html(02.12.2010,20:00)
5. ? Vgl. http://www.w3.org/TR/REC-html32.html. (02.12.2010,20:00)
6. ? Vgl. http://www.w3.org/TR/REC-html40/ (02.12.10, 20:00)
7. ? Vgl. http://www.w3.org/TR/html401/ (02.12.10, 20:00)
8. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 20f
9. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 21
10. ? Vgl. http://www.w3.org/TR/html5/ (02.12.10, 20:00)
11. ? Vgl. http://www.w3.org (02.12.2010, 17:04)
12. ? http://www.w3.org/TR/html5 (09.12.2010 21:00)
13. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 23
14. ? Vgl. Chuck Musciano & Bill Kennedy, HTML & XHTML-Das umfassende Referenzwerk, 4.Auflage,
2003, Seite 5ff
15. ? Vgl. http://wordiq.com/definition/html (07.12.2010, 17:00)
16. ? Vgl. http://www.html-seminar.de/html-editoren-zur-fehlerreduktion.htm (08.12.10 8:50)
17. ? Vgl. http://fwpf-webdesign.de/xhtml/grundlagen/aufbau-eines-html-dokuments (08.12.10 9:00)
18. ? Vgl. http://www.web-toolbox.net/webtoolbox/formulare/formulareinsatz.htm (07.12.2010, 19:00)
19. ? Vgl. http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=formular (07.12.2010, 18:45)
20. ? 20,0 20,1 20,2 20,3 http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=formular (07.12.2010,
18:45)
21. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 122f
22. ? Vgl. w3schools HTML5, 09.12.2010, http://www.w3schools.com/html5/tag_legend.asp (09.12.2010,
17:48)
23. ? Vgl. http://www.dotnetheaven.com/UploadFile/manish1231/4447/Default.aspx (09.12.2010, 17:49)
24. ? 24,0 24,1 24,2 24,3 24,4 Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 112
25. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 114
26. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 115
27. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 113
28. ? 28,0 28,1 Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 116
29. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 126
30. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 127
31. ? Vgl. W3C HTML5, 27.11.2010, http://www.w3.org/TR/html-markup/input.radio.html (27.11.2010,
15:09)
5.2 Fußnoten
43
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
32. ? Vgl. W3C HTML5, 28.11.2010, http://dev.w3.org/html5/spec/Overview.html#file-upload-state
(28.11.2010, 12:58)
33. ? http://www.w3schools.com/html5/tag_input.asp (13.12.2010, 09:08)
34. ? http://dev.w3.org/html5/html4-differences/#changed-elements (20.12.2010 14:30)
35. ? Vgl. http://www.w3schools.com/html5/tag_button.asp (09.12.2010 20:01)
36. ? Vgl. http://www.quackit.com/html_5/tags/html_button_tag.cfm (09.12.2010 20:01)
37. ? http://dev.w3.org/html5/html4-differences/#changed-elements (20.12.2010 14:30)
38. ? Vgl. http://www.w3schools.com/html5/tag_select.asp (09.12.2010 20:16)
39. ? Vgl. http://www.quackit.com/html_5/tags/html_option_tag.cfm (09.12.2010 20:33)
40. ? Vgl. http://www.w3schools.com/html5/tag_option.asp (09.12.2010 20:33)
41. ? Vgl. http://www.w3schools.com/html5/tag_textarea.asp (09.12.2010 20:46)
42. ? Vgl. http://www.w3schools.com/html5/tag_fieldset.asp (07.12.2010 20:11)
43. ? Vgl. http://www.w3schools.com/html5/att_fieldset_disabled.asp (07.12.2010 20:11)
44. ? Vgl. http://www.w3schools.com/html5/tag_label.asp (07.12.2010 20:06)
45. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 124
46. ? Vgl. http://www.w3schools.com/html5/tag_optgroup.asp (07.12.2010, 19:55)
47. ? Vgl. http://www.quackit.com/html_5/tags/html_optgroup_tag.cfm(07.12.2010, 19:55)
48. ? W3C HTML5, 25.11.2010, http://www.w3.org/TR/html5/the-button-element.html#the-keygen-element
(25.11.2010, 12:09)
49. ? HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 120
50. ? HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 121
51. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 57
52. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 58
53. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 58
54. ? 54,0 54,1 54,2 54,3 54,4 54,5 54,6 54,7 54,8
http://dev.w3.org/html5/spec/Overview.html#common-input-element-attributes (29.12.2010 15:00)
55. ? 55,0 55,1 55,2 http://www.w3schools.com/html5/html5_form_attributes.asp (29.12.2010 15:00)
56. ? http://de.selfhtml.org/javascript/sprache/eventhandler.htm (29.12.2010 18:00)
57. ? >>The onblur event occurs when an element loses focus either by the pointing device or by tabbing
navigation. It may be used with the same elements as onfocus.<< übersertzt von Andreas Schreiber,
http://www.w3.org/TR/html4/interact/scripts.html (02.01.2011)
58. ? >>The onchange event occurs when a control loses the input focus and its value has been modified
since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and
TEXTAREA.<< übersertzt von Andreas Schreiber, http://www.w3.org/TR/html4/interact/scripts.html
(02.01.2011)
59. ? >>The onfocus event occurs when an element receives focus either by the pointing device or by tabbing
navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT,
SELECT, TEXTAREA, and BUTTON.<< übersertzt von Andreas Schreiber,
http://www.w3.org/TR/html4/interact/scripts.html (02.01.2011)
60. ? >>The onreset event occurs when a form is reset. It only applies to the FORM element.<< übersertzt
von Andreas Schreiber, http://www.w3.org/TR/html4/interact/scripts.html (02.01.2011)
61. ? >>The onselect event occurs when a user selects some text in a text field. This attribute may be used
with the INPUT and TEXTAREA elements.<< übersertzt von Andreas Schreiber,
http://www.w3.org/TR/html4/interact/scripts.html (02.01.2011)
62. ? >>The onsubmit event occurs when a form is submitted. It only applies to the FORM element.<<
übersertzt von Andreas Schreiber, http://www.w3.org/TR/html4/interact/scripts.html (02.01.2011)
63. ? >>Script to be run when a form changes.<< übersertzt von Andreas Schreiber,
http://www.w3schools.com/html5/html5_ref_eventattributes.asp (02.01.2011)
64. ? >>Script to be run when a form gets user input.<< übersetzt von Andreas Schreiber,
http://www.w3schools.com/html5/html5_ref_eventattributes.asp (02.01.2011)
5.2 Fußnoten
44
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
65. ? >>Script to be run when an element gets user input.<< übersetzt von Andreas Schreiber,
http://www.w3schools.com/html5/html5_ref_eventattributes.asp (02.01.2011)
66. ? >>Script to be run when an element is invalid.<< übersetzt von Andreas Schreiber,
http://www.w3schools.com/html5/html5_ref_eventattributes.asp (02.01.2011)
67. ? Vgl. http://www.web-toolbox.net/webtoolbox/formulare/formulareinsatz.htm (07.12.2010, 19:00)
68. ? http://www.w3schools.com/html5/html5_form_elements.asp (09.12.10 10:00)
69. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 30ff
70. ? Vgl. HTML5 Webseiten innovativ und zukunftssicher (2010), Seite 117
71. ? 71,0 71,1 http://html5test.com/ (20.12.2010, 12:00)
72. ? >>PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source
general-purpose scripting language that is especially suited for web development and can be embedded
into HTML.<< übersertzt von Andreas Schreiber, http://php.net/manual/en/intro-whatis.php (02.01.2011)
73. ? http://de.php.net/manual/de/function.eregi.php (02.01.2011)
74. ? http://de.php.net/manual/de/function.ereg.php (02.01.2011)
75. ? http://de.selfhtml.org/javascript/intro.htm (02.01.2011)
76. ? http://de.selfhtml.org/javascript/objekte/all.htm#inner_html (02.01.2011)
77. ? http://www.css4you.de/wscss/css01.html (02.01.2011)
78. ? >>jQuery UI provides abstractions for low-level interaction and animation, advanced effects and
high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build
highly interactive web applications.<< übersertzt von Andreas Schreiber,
http://php.net/manual/en/intro-whatis.php (02.01.2011)
5.3 Abkürzungsverzeichnis
Abkürzung
Ajax
CSS
HTML
HTTP
PHP
SGML
URL
W3C
WHATWG
XHTML
XSS
Bedeutung
Asynchronous JavaScript and XML
cascading style sheets
Hypertext Markup Language
Hypertext Transfer Protokoll
Hypertext Preprocessor
Standard Generalized Markup Language
uniform resource locator
World Wide Web Consortium
Web Hypertext Application Technology Working Group
extensible hypertext markup language
Cross-Site-Scripting
5.4 Abbildungsverzeichnis
Abb.-Nr.
1
2
Abbildung
Anwendungsbeispiel "Pizza-Bestellformular"
Ausgabe außerhalb von Form-Elementen
5.3 Abkürzungsverzeichnis
45
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Überschrift für Elemente mit legend
iPhone Tastatur (search)
iPhone Tastatur (url)
Eingabefeld E-Mail in Opera
iPhone Tastatur (email)
Datums- und Zeitangaben
Eingabefeld number mit Step 1.0 in Opera
iPhone Tastatur (number)
Eingabefeld range mit Step 1.0 in Opera
Gruppe von Radio-Buttons in Opera
datalist-Element mit autocomplete
Drop-Down Menü mit Überschriften
Keygen
Beispiel autocomplete
Beispiel list
Beispiel required
Beispiel multiple
Beispiel pattern
Beispiel step
Beispiel placeholder
Beispiel onblur
Beispiel onchange
Beispiel onfocus
Beispiel onselect
Beispiel onformchange
Beispiel onforminput
Beispiel oninput
Beispiel oninvalid
Beispiel Zentrierter div-Tag mit Rahmen
Beispiel JQuery UI - Slider
Beispiel JQuery UI - Colorpicker
Beispiel JQuery UI - Checkbox
5.5 Tabellenverzeichnis
Tabelle Nr.
Tabelle 1
Tabelle 2
Tabelle 3
Tabelle 4
Inhalt
Übersicht der Versionen von HTML
Neue Attribute vom Typ input
Neue Attribute vom Typ button
Neue Attribute vom Typ textarea
5.4 Abbildungsverzeichnis
46
Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare
Tabelle 5
Tabelle 6
Neue und modifizierte Elemente
Neue Attribute
5.6 Quellenverzeichnis
Literaturquellen:
Kröner(2010)
Linux-Magazin
Grundkurs Informatik
HTML & XHTML
Das umfassende
Referenzwerk
Kröner, Peter: HTML5 Webseiten innovativ und zukunftssicher, 2010
Linux-Magazin, Ausgabe 10/10: Ner neue Webstandard HTML5
Ernst, Hartmut:Grundkurs Informatik, 4.Auflage, 2008
Chuck Musciano & Bill Kennedy, HTML & XHTML-Das umfassende
Referenzwerk, 4.Auflage, 2003
Internetquellen:
W3schools
W3C
Net Heaven
wordIQ
SELFHTML e.V.
HTML-Seminar
Webdesign mit
XHTML und CSS
Web-Toolbox
The HTML5 test
PHP
css4you
JQuery
http://www.w3schools.com/html5
http://dev.w3.org/html5/spec
http://www.dotnetheaven.com/Articles/ArticleListing.aspx?SectionID=48
http://www.wordiq.com/definition/HTML
http://aktuell.de.selfhtml.org/links/html.htm
http://www.html-seminar.de/html-editoren-zur-fehlerreduktion.htm
http://fwpf-webdesign.de/xhtml/grundlagen/aufbau-eines-html-dokuments
http://www.web-toolbox.net/webtoolbox/formulare/formulareinsatz.htm
http://html5test.com/
http://de.php.net/
http://www.css4you.de
http://jquery.org/
5.5 Tabellenverzeichnis
47