Vorbereitende Basics - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 33

Spezielle Ausgabeelemente
In HTML5 wurden auch ein paar spezielle Ausgabeelemente eingeführt, die als semantisch
bereits gekennzeichnete Alternativen zu dem klassischen div -Element dienen (in der Regel
vollkommen ohne optische Hervorhebung durch den Browser). Viele dieser Elemente
machen nur dann Sinn, wenn Sie dynamisch mit JavaScript darauf zugreifen. Für die einzel-
nen Elemente sei auf die oizielle Dokumentation von HTML5 verwiesen.

neue Formularelemente und Elemente zur Interaktion
HTML5 erweitert seine Auszeichnungsmöglichkeiten um genauere Deinitionen einer Inter-
aktion mit dem Anwender. Das umfasst zunächst Formularelemente, aber auch eigenstän-
dige Elemente sind oder waren in der Diskussion. Wir werden nicht sämtliche Details hier
betrachten, aber zumindest die Erweiterungen des input -Elements im Rahmen von Webfor-
mularen um verschiedene Typen. Bei der Weiterentwicklung der Formulartechnik wurde
die bereits sehr ausgereite Speziikation Web Forms 2.0 in HTML5 integriert. Sie können
nun Auszeichnungen zur Eingabe von Suchbegrifen, Telefonnummern, URL- und E-Mail-
Adressen, Datums- und Zeitangaben, Zahlen sowie Farbangaben vornehmen. Die Festle-
gung erfolgt wie üblich über eine Wertzuweisung zu type . Etwa so:

Listing 3.5■ Ein neuer Typ eines Eingabefelds
<input type="url">

Eingabefelder können auch als Plichtfelder deiniert und dynamische Eingabefelder mit
der Möglichkeit versehen werden, weitere Felder hinzuzufügen. Ebenso sind die Angaben
von Wertebereichen möglich. Schauen wir uns verschiedene Datentypen an, die Sie in
HTML5 verwenden können:

Tabelle 3.2■ Neue Typen bei Eingabefeldern in Formularen
Attributwert Bedeutung

Die Angabe einer Farbe. Sofern die Browser das unterstützen, ist die Anzeige
einer Farbtabelle ohne Eingabe eines Farbwerts möglich.

color

Datumsangabe: Jahr, Monat, Tag ohne Zeitzone

date

Datumsangabe: Jahr, Monat, Tag, Stunde, Minute, Sekunde und Millisekunde
nach UTC (Weltzeit)

datetime

Datumsangabe: Tag

day

E-Mail-Adresse(n)

email

Datumsangabe: Monat

month

Ein numerischer Wert wird erwartet. Einige Browser zeigen bei diesem Typ
neben dem Eingabefeld einen Spinner (eine Komponente mit zwei Auswahl-
pfeilen zur numerischen Erhöhung oder Erniedrigung eines Werts) an, über den
die Werte visuell geändert werden können.

number

Ein Wertebereich. Dieser verwendet eine Kombination aus Attributen, von
denen min und max die wichtigsten sind. Dazu kann man noch eine Schrittweite
( step ) und einen Vorgabewert ( value ) speziizieren. Beispiel:

range