Analyse der Funktionen und Demonstration von HTML5 in Hinblick auf Formulare

Aus Winfwiki

Wechseln zu: Navigation, Suche

Fallstudienarbeit

Hochschule: Hochschule für Oekonomie & Management
Standort: Düsseldorf
Studiengang: Bachelor Wirtschaftsinformatik
Veranstaltung: Fallstudie / Wissenschaftliches Arbeiten
Betreuer: Prof._Dr._Uwe_Kern
Typ: Fallstudienarbeit
Themengebiet: HTML 5
Autor(en): Andreas Schreiber, Ivo Marx, Tom Reißberg, Daniel Dreissen
Studienzeitmodell: Abendstudium
Semesterbezeichnung: WS10
Studiensemester: 2
Bearbeitungsstatus: begutachtet
Prüfungstermin:
Abgabetermin:


Inhaltsverzeichnis


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

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 Merkmale
HTML 1.0[3] 1990 Verfügt über Standardelemente: Überschriften, Textabsätze
HTML 2.0[4] 1995 Einführung der Formulare
HTML 3.2[5] 1997 Einführung von Tabellen, Befehle für physischen Textauszeichnung
HTML 4.0[6] 1998 Einführung von Frames und Cascading Style Sheets
HTML 4.01[7] 1999 Korrekturen des HTML 4.0 Standards
XHTML 1.0[8] 2000 Neuanfang von HTML auf Basis von XML
XHTML 2[9] 2006 Die Arbeiten wurden im Jahr 2009 Zugunsten von HTML5 eingestellt
HTML5[10] 2009 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 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
</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.

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.


Anwendungsbeispiel
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" 
  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>


Eingabefeld Formular
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>
...


Legend Tag
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.

Tastaturanpassung beim URL-Input

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.

Tastaturanpassung beim URL-Input

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 /></td>
  </tr>
...
</form>


Eingabefeld email
Abbildung 6 - Eingabefeld E-Mail in Opera


Besonderheit:

Das iPhone passt beim Aufruf einer Website mit dem Eingabefeld input die Tastatur entsprechend an.

Tastaturanpassung beim Mail-Input

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]. 


...
  <tr>
    <td>Zeitpunkt</td>
    <td><input type=datetime name="meeting.start" ><input type="text" name="datum" placeholder="YYYY-MM-DD"></td>
  </tr>
...


date und time
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 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>
...


Eingabefeld number
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.

Tastaturanpassung beim Number-Input

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"> 50 cm</td>
    <td><input type="text" name="gewuerze_salami" autocomplete="on" list="gewuerze" multiple="multiple" /></td>
  </tr>
...
Eingabefeld range
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].


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="versandart_express">Express</label>
          <input type=radio name="versandart" value="standart" id="versandart_express"><label for="versandart_standart">Standart</label>
        </td>
      </tr>
      <tr>
        <td>Zeitpunkt</td>
        <td><input type=datetime name="meeting.start" ><input type="text" name="datum" placeholder="YYYY-MM-DD"></td>
      </tr>
    </table>
  </fieldset>
...


Radio-Buttons
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
    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
autocomplete
on
off
Bei on werden die Daten im Browser gespeichert und es kann eine Autovervollständigung vorgenommen werden. Bei off werden keine Informationen im Browser gespeichert.
autofocus autofocus Das input-Feld ist während des Ladens der Seite sichtbar. Hinweis: Nicht im Zusammenhang mit dem Typ hidden nutzbar.
form <form-name> Definiert die Zugehörigkeit zu einem oder mehreren form-Elementen.
formaction <url> Wohin die Daten bei Ausführung hin geschickt werden sollen. Die auszuführende Aktion vom form-Tag wird überschrieben.
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
Wie sollen die Daten an einen Server gesendet werden. Das Attribut action aus dem form-Tag wird überschrieben.
formnovalidate formnovalidate 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> Eine datalist mit vordefinierten Optionswerten der input-Elemente wird angegeben.
max
<number>
<date>
Legt den maximalen Wert des Input-Felds fest. Kann mit min verwendet werden, um einen Bereich zu definieren.
min
<number>
<date>
Legt den minimalen Wert des Input-Felds fest.
multiple multiple Es können mehrere Werte angegeben werden.
pattern <regulärer Ausdruck> Kann den Wert für ein Input-Feld bestimmen. Mit pattern="[0-9]" muss eine Zahl zwischen 0 und 9 eingegeben werden.
placeholder <text> Gibt dem Benutzer durch einen vordefinierten Text eine Hilfe zur möglichen Eingabe.
required required Kennzeichnet ein Pflichtfeld und muss zum Absenden des Formulars ausgefüllt werden.
step <number> 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.


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].


Attribute Wert Beschreibung
maxlength <number> Legt die maximale Anzahl an zulässigen Zeichen in der Eingabe-Box fest.
placeholder <text> Soll dem Benutzer einen Hinweis zur Ausfüllung der Eingabe-Box geben.
wrap
hard
soft
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 for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
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">
    <option value="Andreas Schreiber">
    <option value="Daniel Dreissen">
    <option value="Tom Reißberg">
    <option value="Ivo Marx">
  </datalist>
...


datalist Element
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>


Drop-Down Menü 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 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">
autocomplete
Abbildung 16 - Beispiel autocomplete


list

Mit dem Attribut list kann einem Input-Element eine data-list-Element mitgegeben werden. Das datalist-Element 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>
list
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>
required
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="hedral@damowmow.com">
  <option value="pillar@example.com">
  <option value="astrophy@cute.example">
  <option value="astronomy@science.example.org">
</datalist>
[54]
multiple
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">
pattern
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">
step
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">
placeholder
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

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'"
Effekt nach Onblur

Abbildung 23 - Beispiel onblur


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 ;)'"
Effekt nach Onchange

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'"
Effekt nach Onfocus

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');">
Effekt nach Onselect

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';"
Effekt nach Onformchange

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';"
Effekt nach Onforminput

Abbildung 28 - Beispiel onforminput


oninput

"Das Script startet, wenn in einem Element des Formulars eine Eingabe erfolgt."[65] 


oninput="javascript:this.form.info.innerHTML = 'Ohje, was kommt denn jetzt?'"
Effekt nach Oninput

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 gemacht';"
   required
>
Effekt nach Oninvalid

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.


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 Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Rotes_x.gif Bild:Rotes_x.gif
fieldset Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
keygen Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
label Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
meter Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
optgroup Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
output Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Rotes_x.gif Bild:Rotes_x.gif
progress Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
legend Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
input Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
button Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
select Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
option Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif
textarea Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif

/*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 Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Rotes_x.gif Bild:Rotes_x.gif
autofocus Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
list Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Rotes_x.gif Bild:Rotes_x.gif
max Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
min Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
mutiple Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Rotes_x.gif
pattern Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
placeholder Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Rotes_x.gif Bild:Rotes_x.gif
required Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif
step Bild:Gruener_haken.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif Bild:Gruener_haken.gif Bild:Rotes_x.gif

/*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 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].<<

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>
Block-Element mit CSS

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="stylesheet" type="text/css"/>
  <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>
Slider mittels JQuery

Abbildung 32 - Beispiel JQuery UI - Slider

Ebenfalls könnte mittels JQuery UI eine Farbauswahl eingebunden werden... 

$('#colorpickerHolder').ColorPicker({flat: true});


Color Picker mittels JQuery

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'
});


Checkbox mittels JQuery

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.

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>
    <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="sizes"> 50 cm</td>
        <td><input type="text" name="gewuerze_salami" autocomplete="on" list="gewuerze" multiple="multiple" /></td>
      </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="sizes"> 50 cm</td>
        <td><input type="text" name="gewuerze_hawai" autocomplete="on" list="gewuerze" multiple="multiple" /></td>
      </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="sizes"> 50 cm</td>
        <td><input type="text" name="gewuerze_tonno" autocomplete="on" list="gewuerze" multiple="multiple" /></td>
      </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="sizes"> 50 cm</td>
        <td><input type="text" name="gewuerze_diablo" autocomplete="on" list="gewuerze" multiple="multiple" /></td>
      </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>
        <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: " required value="max@mustermann.de" /></td>
      </tr>
      <tr>
        <td>Passwort*:</td>
        <td><input type="password" name="passwort" value="asdfgh" required></td>
      </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ße gemacht';" required></td>
      </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="versandart_express">Express</label>
          <input type=radio name="versandart" value="standart" id="versandart_express"><label for="versandart_standart">Standart</label>
        </td>
      </tr>
      <tr>
        <td>Zeitpunkt</td>
        <td><input type=datetime name="meeting.start" ></td>
      </tr>
    </table>
  </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></td>
      </tr>
      <tr>
        <td>Nur heute konstenlose Gutscheinnummern </td>
        <td><input type="text" name="gutscheinnr" value="123.456.789" onselect="javascript:alert('Sie Sparfuchs');"></td>
      </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">
    <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)
  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)
  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 Bedeutung
AjaxAsynchronous JavaScript and XML
CSScascading style sheets
HTMLHypertext Markup Language
HTTPHypertext Transfer Protokoll
PHPHypertext Preprocessor
SGMLStandard Generalized Markup Language
URLuniform resource locator
W3CWorld Wide Web Consortium
WHATWGWeb Hypertext Application Technology Working Group
XHTMLextensible hypertext markup language
XSSCross-Site-Scripting


5.4 Abbildungsverzeichnis

Abb.-Nr. Abbildung
1Anwendungsbeispiel "Pizza-Bestellformular"
2Ausgabe außerhalb von Form-Elementen
3Überschrift für Elemente mit legend
4iPhone Tastatur (search)
5iPhone Tastatur (url)
6Eingabefeld E-Mail in Opera
7iPhone Tastatur (email)
8Datums- und Zeitangaben
9Eingabefeld number mit Step 1.0 in Opera
10iPhone Tastatur (number)
11Eingabefeld range mit Step 1.0 in Opera
12Gruppe von Radio-Buttons in Opera
13datalist-Element mit autocomplete
14Drop-Down Menü mit Überschriften
15Keygen
16Beispiel autocomplete
17Beispiel list
18Beispiel required
19Beispiel multiple
20Beispiel pattern
21Beispiel step
22Beispiel placeholder
23Beispiel onblur
24Beispiel onchange
25Beispiel onfocus
26Beispiel onselect
27Beispiel onformchange
28Beispiel onforminput
29Beispiel oninput
30Beispiel oninvalid
31Beispiel Zentrierter div-Tag mit Rahmen
32Beispiel JQuery UI - Slider
33Beispiel JQuery UI - Colorpicker
34Beispiel JQuery UI - Checkbox


5.5 Tabellenverzeichnis

Tabelle Nr. Inhalt
Tabelle 1Übersicht der Versionen von HTML
Tabelle 2Neue Attribute vom Typ input
Tabelle 3Neue Attribute vom Typ button
Tabelle 4Neue Attribute vom Typ textarea
Tabelle 5Neue und modifizierte Elemente
Tabelle 6Neue Attribute


5.6 Quellenverzeichnis

Literaturquellen:

Kröner(2010) Kröner, Peter: HTML5 Webseiten innovativ und zukunftssicher, 2010
Linux-Magazin Linux-Magazin, Ausgabe 10/10: Ner neue Webstandard HTML5
Grundkurs Informatik Ernst, Hartmut:Grundkurs Informatik, 4.Auflage, 2008
HTML & XHTML
Das umfassende Referenzwerk 		Chuck Musciano & Bill Kennedy, HTML & XHTML-Das umfassende Referenzwerk, 4.Auflage, 2003


Internetquellen:

W3schools http://www.w3schools.com/html5
W3C http://dev.w3.org/html5/spec
Net Heaven http://www.dotnetheaven.com/Articles/ArticleListing.aspx?SectionID=48
wordIQ http://www.wordiq.com/definition/HTML
SELFHTML e.V. http://aktuell.de.selfhtml.org/links/html.htm
HTML-Seminar http://www.html-seminar.de/html-editoren-zur-fehlerreduktion.htm
Webdesign mit XHTML und CSS http://fwpf-webdesign.de/xhtml/grundlagen/aufbau-eines-html-dokuments
Web-Toolbox http://www.web-toolbox.net/webtoolbox/formulare/formulareinsatz.htm
The HTML5 test http://html5test.com/
PHP http://de.php.net/
css4you http://www.css4you.de
JQuery http://jquery.org/
Von „http://winfwiki.wi-fom.de/index.php/Analyse_der_Funktionen_und_Demonstration_von_HTML5_in_Hinblick_auf_Formulare“
Persönliche Werkzeuge