Kap 02 NeueTags

Entwicklung multimedialer Anwendungen
Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm
Hochschule Harz
FB Automatisierung und Informatik
[email protected]
http://www.miwilhelm.de
Raum 2.202
Tel. 03943 / 659 338
Fachbereich AI, Entwicklung multimedialer Anwendungen
1
Inhalt
1. Einleitung
2. Auszeichnungs-Tags / Semantische Elemente
3. Multimedia (Audio, Video)
4. CSS3 (Design)
5. SVG / Canvas
6. Tablet Ansteuerung (jQuery)
7. Geolocation
Fachbereich AI, Entwicklung multimedialer Anwendungen
2
1
Typografische Tags
•
•
•
•
•
•
•
•
•
•
abbr
Abkürzung und Akronyme (MWSt. / NATO)
• Attribut title als Hint
b
stilistisches Tag z. B. für Firmennamen (fett)
bdi
Text verläuft von rechts nach links
bdo
Textrichtung ändern
• Attribut dir=rtl bzw. ltr
cite
Zitat für Werktitel (Elbauenpark)
code
Codierter Text (z. B. für Syntax-Highlight)
dfn
zu definierender Ausdruck, à la Buch
em
emphase, betont den Inhalt
i
stilistisches Tag, Fachausdrücke (kursiv)
ins
eingefügter Text (Varianten)
Fachbereich AI, Entwicklung multimedialer Anwendungen
html5\html5_bsp1.xhtml
3
Typografische Tags
•
•
•
•
kdb
Keybord
• <kdb>ls –l [↵] </kdb>
kbd {
font-family: monospace;
}
mark
markierter Text, z. B. nach einem Suchvorgang
q
Wörtliche Rede oder Zitat
• ohne Anführungszeichen
Fernöstliche Sprache:
• rp
Ruby-Klammer
• rt
Textteil einer Ruby-Annotation
• ruby
Ruby-Annotation
Fachbereich AI, Entwicklung multimedialer Anwendungen
4
2
Typografische Tags
•
•
•
•
•
•
•
•
•
•
•
s
gelöschter Text (Varianten), bleibt aber im Text
del
gelöschter Text (Varianten)
samp
stilistisches Tag
• Beispielausgabe eines Programms
small
kleingedruckt
span
strong
stilistisches Tag, besonders wichtig (fett)
sub
Tiefergestellt
sup
Höhergestellt
u
Nicht artikulierte Zusatzbemerkung zum Text
var
Frei wählbare Bezeichnernamen
wbr
manuelle Trennung
Fachbereich AI, Entwicklung multimedialer Anwendungen
5
Globale Attribute der typografische Tags
•
•
•
•
•
•
•
•
•
•
accesskey
class
contenteditable
contextmenu
data
dir
draggable
dropzone
hidden
id
Alt+O
Editierbar?
sp. Daten
Direction
Drag&Drop
Drag&Drop
•
•
•
•
•
•
•
•
•
•
•
•
Fachbereich AI, Entwicklung multimedialer Anwendungen
inert
itemid
itemprop
itemref
itemscope
lang
itemtype
spellcheck
style
tabindex
title
translate
6
3
Events
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
onabort
oncancel
onblur
oncanplay
oncanplaythrough
onchange
onclick
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformchange
onforminput
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
Fachbereich AI, Entwicklung multimedialer Anwendungen
7
Events
•
•
•
•
•
•
•
•
•
•
•
•
•
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
•
•
•
•
•
•
•
•
•
•
•
•
•
onratechange
onreadystatechange
onscroll
onseeked
onseeking
onselect
onshow
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting
Fachbereich AI, Entwicklung multimedialer Anwendungen
8
4
Fachbereich AI, Entwicklung multimedialer Anwendungen
9
Fachbereich AI, Entwicklung multimedialer Anwendungen
10
5
Fachbereich AI, Entwicklung multimedialer Anwendungen
11
Fachbereich AI, Entwicklung multimedialer Anwendungen
12
6
Fachbereich AI, Entwicklung multimedialer Anwendungen
13
Fachbereich AI, Entwicklung multimedialer Anwendungen
14
7
Fachbereich AI, Entwicklung multimedialer Anwendungen
15
Fachbereich AI, Entwicklung multimedialer Anwendungen
16
8
Fachbereich AI, Entwicklung multimedialer Anwendungen
17
Fachbereich AI, Entwicklung multimedialer Anwendungen
18
9
Semantische Elemente
•
•
main
arcticle
•
•
•
•
•
•
•
Absätze
Seitenleiste
Fußzeile für verschiedene Elemente
Ein footer-Element kann aber auch für die Hauptseite dienen
nav
•
Kopfzeile für verschiedene Elemente
Ein header-Element kann aber auch als Einstieg dienen
section
aside
footer
•
•
Dieses Tag schließt komplette Absätze etc. ein.
Meist kann man es mit dem body-Tag verbinden.
header
•
Hauptbereich
Artikel
Navigator-Element
Ein nav-Element kann im Seitenheader oder unten platziert werden
Auch können mehrere Navigationselemente verfügbar sein.
Fachbereich AI, Entwicklung multimedialer Anwendungen
19
Semantische Elemente
•
•
•
•
•
•
•
•
main
arcticle
header
section
aside
footer
nav
Mit diesen Tag‘s kann man eine bessere Struktur innerhalb einer HTMLSeite erstellen.
•
•
Barrierefreiheit
Siri / Cortana / Google Now
Fachbereich AI, Entwicklung multimedialer Anwendungen
20
10
Fachbereich AI, Entwicklung multimedialer Anwendungen
21
Fachbereich AI, Entwicklung multimedialer Anwendungen
22
11
Fachbereich AI, Entwicklung multimedialer Anwendungen
23
Weitere HTML5-Elemente
•
•
•
•
nav
datetime
summary
details
Navigator-Element
Inhalt ist ein Datum
Summary ist die Zusammenfassung
Mit „details“ erhält man erweiterte Blöcke
Fachbereich AI, Entwicklung multimedialer Anwendungen
24
12
Summary / Details
Fachbereich AI, Entwicklung multimedialer Anwendungen
25
Nav-Element
•
Eine Navigation wurde vor HTML5 mittels eine div-Tag‘s und
einer ungeordneten Liste (list-style:none) erstellt.
•
Das neue Tag vereinfacht kaum die Erstellung einer
Navigationsliste.
•
Man braucht trotzdem eine ungeordneten Liste (list-style:none).
•
Ein nav-Element kann im Seitenheader oder unten platziert
werden
•
Auch können mehrere Navigationselemente verfügbar sein.
•
Auch hierarchische Navigationselemente sind möglich.
Fachbereich AI, Entwicklung multimedialer Anwendungen
26
13
Verwendung eines Nav-Elementes
•
Liste der Inhalte (à la Wikipedia)
•
Scheint sinnvoll.
•
Schalter zur vorherigen / nächsten Seite
• Auch diese Technik ist möglich.
•
Such-Element
•
•
Sehr wichtig, gerade bei großen Seiten.
Breadcrumbs (Brotkrümelnavigation)
•
•
Design Pattern in HTML-UI
Anzeige der einzelnen parent-Seiten
Fachbereich AI, Entwicklung multimedialer Anwendungen
clicks
27
Nav-Element
<nav>
<a href="Struktur.html" title="Struktur">Struktur</a> |
<a href="Darstellung.html" title="Darstellung">Darstellung</a> |
<a href="Formulare.html" title="Formulare">Formulare</a> |
<a href="Verweise.html" title="Verweise">Verweise</a>
</nav>
<nav id="nav1">
<ul>
<li><a href="Struktur.html" title="Struktur">Struktur</a></li>
<li><a href="Darstellung.html" title="Darstellung">Darstellung</a></li>
<li><a href="Formulare.html" title="Formulare">Formulare</a></li>
<li><a href="Verweise.html" title="Verweise">Verweise</a></li>
</ul>
</nav>
Fachbereich AI, Entwicklung multimedialer Anwendungen
28
14
Fachbereich AI, Entwicklung multimedialer Anwendungen
29
CSS Selektoren des Nav-Element
nav a:visited, nav a:link, nav a:hover {
text-decoration:none;
}
nav ul{
list-style-type: none;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
30
15
Progress-Element
•
Eine Progressbar dient zur Darstellung einer Fortschrittanzeige.
•
HTML4
•
Realisiert mit verschiedenen Bildern
•
Oder mit div‘s und javaskript
•
•
<dd class="left">77%</dd>
HTML5
•
<progress value="24" min=" 0" max="100" ></progress>
Fachbereich AI, Entwicklung multimedialer Anwendungen
31
Progress-Element
Fachbereich AI, Entwicklung multimedialer Anwendungen
32
16
function calc( value ) {
"use strict;"
if (! isNaN(value) ) {
var zahl = parseInt(value);
var progress = document.getElementById( "progress2" );
var posi=progress.value+zahl;
if (posi>=0 && posi<=100) {
progress.value = progress.value+zahl;
}
}
}
// ]]>
</script>
</head>
<progress id="progress2" value="24" min="0" max="100" />
<form>
<input type="button" value="dec" onclick="calc(-1)"/>
<input type="button" value="inc" onclick="calc(+1)"/>
</form>
Fachbereich AI, Entwicklung multimedialer Anwendungen
33
Progress-Element in Firefox und IExplorer
Fachbereich AI, Entwicklung multimedialer Anwendungen
34
17
Formularelemente in HTML 5
■
■
■
■
■
■
Datentyp für Emailadresse(n)
Datentyp für URLs
Datentypen für numerische Eingaben
• Numerischer Wert
• Bereichsdialogs
Datentyp für Datumsangaben
• Tag, Monat, Jahr
• Datum und Zeit
• Datum, Zeit, Woche
Farbauswahl
Sucheingabe
Fachbereich AI, Entwicklung multimedialer Anwendungen
35
Formularelemente in HTML 5
■
Datentyp für Emailadresse(n):
•
■
Datentyp für URLs:
•
■
■
<input type="url" />
Datentypen für numerische Eingaben
•
<input type="number" />
•
<input type="range" min="10" max="100" step="5" value="55" />
Auswahl einer Farbe
•
■
<input type="email" />
<input type="color" />
Sucheingabe
•
<input type="search" name="search" />
Fachbereich AI, Entwicklung multimedialer Anwendungen
36
18
Formularelemente in HTML 5
■Datentyp
•
•
•
•
•
•
•
für Datumsangaben
<input type="day" />
<input type="month" />
<input type="year" />
<input type="datetime" />
Jahr, Monat, Tag, Stunde, Minute, Sekunde und Millisekunde
nach UTC (Weltzeit)
<input type="date" /> Jahr, Monat, Tag ohne Zeitzone
<input type="week" />
<input type="time" />
Stunde, Minute, Sekunde und Millisekunde ohne Zeitzone
Fachbereich AI, Entwicklung multimedialer Anwendungen
37
Neue Datums und Zeit-Elemente
Fachbereich AI, Entwicklung multimedialer Anwendungen
38
19
Neue Datums und Zeit-Elemente
Fachbereich AI, Entwicklung multimedialer Anwendungen
39
Neue Datums und Zeit-Elemente
Fachbereich AI, Entwicklung multimedialer Anwendungen
40
20
Neue Datums und Zeit-Elemente
Fachbereich AI, Entwicklung multimedialer Anwendungen
41
Fachbereich AI, Entwicklung multimedialer Anwendungen
42
21
Chrome
Fehlerhaft
Ok
•
•
•
•
day
datetime
datetime_local
•
•
•
date
month
week
time
Fachbereich AI, Entwicklung multimedialer Anwendungen
43
Opera
Fehlerhaft
Ok
•
•
•
•
•
Day
year
datetime
datetime_local
Fachbereich AI, Entwicklung multimedialer Anwendungen
•
•
•
date
month
week
time
44
22
Firefox
Fehlerhaft
•
ALLE
Fachbereich AI, Entwicklung multimedialer Anwendungen
45
IExplorer
Fehlerhaft
•
Fachbereich AI, Entwicklung multimedialer Anwendungen
ALLE
46
23
Testroutinen:
•
•
•
•
•
•
•
•
•
•
•
•
function
function
function
function
function
function
checkFormDayDate( value )
checkFormMonth( value )
checkFormYear( value )
checkFormDatetime( value )
checkFormWeek( value )
checkFormTime( value )
function absolutDay(day, month, year)
function isSchaltjahr(year)
function checkDate(day, month, year)
function checkYear(year)
function checkTime(hour, min, sec)
function checkWeek(week, year)
Fachbereich AI, Entwicklung multimedialer Anwendungen
function checkFormYear( value) {
"use strict;"
if ( isNaN(value) ) {
alert("Falsches Jahresformat: \n"+value);
return false;
}
else {
year = parseInt(value);
if (checkYear(year)) {
alert("Year: "+year);
return true;
}
else {
alert("Falsches Jahresformat: \n"+value);
return false;
}
}
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
47
function checkYear(year) {
"use strict;"
if (year<1900 || year>2200)
return false;
else
return true;
}
48
24
function checkFormTime( value) {
"use strict;"
var values = value.split(":");
if (values.length<2) {
alert("Falsches Zeitformat: \n"+value);
return false;
}
else {
var hour, min, sec;
if ( isNaN(values[0]) ) {
alert("Falsches Zeitformat: \n"+value);
return false;
}
else {
hour= parseInt(values[0]);
}
if ( isNaN(values[1]) ) {
alert("Falsches Zeitformat: \n"+value);
return false;
}
else {
min= parseInt(values[1]);
}
if (values.length==3) {
if ( isNaN(values[2]) ) {
alert("Falsches Zeitformat: \n"+value);
return false;
}
else {
sec= parseInt(values[2]);
}
}
else {
sec=0;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
49
if (checkTime(hour, min, sec)) {
alert("Hour: "+hour+" Min: "+min
+" Sec: "+sec);
return true;
}
else {
alert("Falsches Zeitformat: \n"+value);
return false;
}
} // if (values.length<2) {
} // checkFormTime
function checkTime(hour, min, sec) {
"use strict;"
if (hour<0 || hour>23 ) return false;
if (min<0 || min>59 ) return false;
if (sec<0 || sec>59 ) return false;
return true;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
50
25
function checkFormMonth( value ) {
// März 2015
"use strict;"
var values = value.split(" ");
if (values.length<2) {
alert("Falsches Monatsformat: \n"+value);
return false;
}
else {
var month, year;
month = values[0];
if ( isNaN(values[1]) ) {
alert("Falsches Monatsformat: \n"+value);
return false;
}
else {
year= parseInt(values[1]);
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
51
if (!checkYear(year)) {
alert("Falsches Monatsformat: \n"+value);
return false;
}
var month2 = month.toLowerCase();
if (month2=="januar" || month2=="februar" || month2=="märz" ||
month2=="april" || month2=="mai" || month2=="juni" || month2=="juli" ||
month2=="august" || month2=="september" || month2=="oktober" ||
month2=="november" || month2=="dezember" ) {
alert("Korrektes Monatsformat: \n"+"Monat: "+month+" Jahr: "+year);
return true;
}
else {
alert("Falsches Monatsformat: \n"+value);
return false;
}
} // if (values.length<2) {
} // checkFormMonth
Fachbereich AI, Entwicklung multimedialer Anwendungen
52
26
function checkFormDayDate( value) {
// 24.11.2015
"use strict;"
var values = value.split(".");
if (values.length<3) {
alert("Falsches Datumsformat: \n"+value);
return false;
}
else {
var day, month, year;
if ( isNaN(values[0]) ) {
alert("Falsches Datumsformat: \n"+value);
return false;
}
else {
day = parseInt(values[0]);
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
if ( isNaN(values[1]) ) {
alert("Falsches Datumsformat: \n"+value);
}
else {
month = parseInt(values[1]);
}
53
return false;
if ( isNaN(values[2]) ) {
alert("Falsches Datumsformat: \n"+value);
return false;
}
else {
year = parseInt(values[2]);
}
if (checkDate(day, month, year)) {
alert("Day: "+day+" Month: "+month+" Year: "+year); return true;
}
else {
alert("Falsches Datumsformat: \n"+value);
return false;
}
} // if (values.length<3) {
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
54
27
function checkDate(day, month, year) {
"use strict;"
var maxtage=0;
if (day<=0 || day>31) return false;
if (month<=0 || month>12) return false;
if (year<1900 || year>2200) return false;
switch (month) {
case 1:
case 3:
case 4:
case 7:
case 8:
case 10:
case 12: maxtage=31;
break;
case 4:
case 6:
case 9:
case 11: maxtage=30; break;
case 2: var rest=year % 4;
if (rest==0) {
rest=year%100;
if (rest==0) {
rest=year%400; // check 1900 2000
if (rest==0)
maxtage=29;
else
maxtage=28;
} // if (rest==0) {
else {
maxtage=29;
}
}
else
maxtage=28;
} // switch
} // checkDate
Fachbereich AI, Entwicklung multimedialer Anwendungen
55
function checkFormDatetime( value) {
// 31.02.2015 10:66
"use strict;"
var values = value.split(" ");
if (values.length<2) {
alert("Falsches DateTimeformat: \n"+value);
return false;
}
else {
if (!checkFormDayDate(values[0])) return false;
if (!checkFormTime(values[1])) return false;
return true;
} // if (values.length<2) {
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
56
28
function checkFormWeek( value) {
"use strict;"
var values = value.split(","); // "Woche 56", und "2015"
if (values.length<2) {
alert("Falsches DateWochenformat: \n"+value);
return false;
}
var year;
if ( isNaN(values[1]) ) {
alert("Falsches Jahresformat: \n"+value);
return false;
}
year=parseInt(values[1]);
if (!checkYear(year)) {
alert("Falsches Jahr: \n"+value);
return false;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
57
checkFormWeek
var week=values[0]; // Woche 56
var values = week.split(" "); // "Woche 56"
if ( isNaN(values[1]) ) {
alert("Falsches Monatsformat: \n"+value);
return false;
}
week=parseInt(values[1]);
if (checkWeek(week, year)) {
alert("Woche: "+week+" Jahr: "+year);
return true;
}
else {
alert("falsche Woche");
return false;
}
} // checkFormWeek
Fachbereich AI, Entwicklung multimedialer Anwendungen
58
29
function checkWeek(week, year) {
"use strict;"
if (week<0 || week>53) return false;
if (year<1900 || year>2200) return false;
var zeit1 = absolutDay(1, 1, 1900); // dies ist ein Montag
var zeit2 = absolutDay(1, 1, year);
var zeit3 = zeit2 - zeit1-1;
var weekday = zeit3 %7; // 0=montag
// wenn 1.1.year auf einem Donnerstag liegt, gibt es 53 Wochen
var countWeeks;
if (wochentag==3)
countWeeks=53;
else
countWeeks =52;
return week>0 && week<=countWeeks;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
59
function absolutDay(day, month, year) {
var delta_tage = new Array(0,3,3,6,8,11,13,16,19,21,24,26);
var j4, j100, j400;
var f;
if ( (day==0) || (month==0) ||(year==0) ) return 0;
f=365.25*(year-1.0) +28.0*(month-1.0)+delta_tage[month-1]+day;
if (month>2) {
// 2000 ist Schaltjahr 1900 nicht
j4=year % 4;
j100=year % 100; // Schaltjahr wenn = 0 1900 oder 2000
j400=year % 400; // nun 2000 2400
if ( ((j4==0)&&(j100>0)) || (j400==0) ) f++;
}
return Math.floor(f);
} // absolutDay
Fachbereich AI, Entwicklung multimedialer Anwendungen
60
30
function checkWeek2(week, year) {
"use strict;"
if (week<0 || week>53) return false;
if (year<1900 || year>2200) return false;
var myDate = new Date(1,1,year);
var weekday = myDate.getDay(); // 0=Montag
// wenn 1.1.year auf einem Donnerstag liegt, gibt es 53 Wochen
var countWeeks;
if (weekday==3)
countWeeks=53;
else
countWeeks=52;
return week>0 && week<=countWeeks;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
61
Neue Telefon, Url und EMail-Elemente (IExplorer)
Kaum Interaktion
Fachbereich AI, Entwicklung multimedialer Anwendungen
62
31
Neue Telefon, Url und EMail-Elemente
Kaum Interaktion
Fachbereich AI, Entwicklung multimedialer Anwendungen
63
Neue Telefon, Url und EMail-Elemente
Kaum Interaktion
Fachbereich AI, Entwicklung multimedialer Anwendungen
64
32
Search-Element
•
•
•
Das search-Element hat eine eigene Liste
Browser könnten das Suchfeld der aktuellen Seite zum Beispiel
automatisch in die Suchleiste integrieren und auswählen
Smartphones blenden beim Suchfeld auf eine Tastatur ein.
Fachbereich AI, Entwicklung multimedialer Anwendungen
65
<label for="userID1" >Farbauswahl :
<input type="color" name="color" id="userID1" />
</label>
<br /><br />
<input type="button" value="farbe setzen" onclick="setColor(this.form)"/>
Fachbereich AI, Entwicklung multimedialer Anwendungen
66
33
<label for="userID3" >Output:
<output name="output">
</output>
</label>
<br /><br />
<input type="button" value="Farbe abfragen" onclick="checkColor(this.form)"/>
function checkColor( form ) {
"use strict;"
form.tColor.value = form.color.value.toUpperCase();
var color=form.color.value.toUpperCase();
var red = color.substr(1,2);
var green = color.substr(3,4);
var blue = color.substr(5,6);
// 1->2
color.substring(1,3)
form.output.value = red+" "+green+" "+blue;
}
Fachbereich AI, Entwicklung multimedialer Anwendungen
67
Firefox
Opera
Chrome
IExplorer
Fachbereich AI, Entwicklung multimedialer Anwendungen
68
34
Output-Element
•
Ersatz für „ajax“-Elemente
•
Automatisches Berechnen
•
For-Attribute
Fachbereich AI, Entwicklung multimedialer Anwendungen
69
Output-Element
<h1>Output-Element</h1>
<form onsubmit="return false"
oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any" /> +
<input name="b" type="number" step="any"/> =
<output name="o" />
</form>
Fachbereich AI, Entwicklung multimedialer Anwendungen
70
35
Output-Element: bsp2, bsp3
<form onsubmit="return false"
oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" id="a" type="number" step="any"/> +
<input name="b" id="b" type="number" step="any"/> =
<output name="o" for="a b" />
</form>
valueAsNumber ist eine neue Methode, die den Wert als Zahl ausgibt.
<form onsubmit="return false"
oninput="o.value = a.valueAsNumber + b.valueAsNumber">
<input name="a" id="a" type="number" step="any"/> +
<input name="b" id="b" type="number" step="any"/> =
<output name="o" for="a b"/>
</form>
Fachbereich AI, Entwicklung multimedialer Anwendungen
71
•Bsp5: http://html5-webdesign.de/output.html
Fachbereich AI, Entwicklung multimedialer Anwendungen
72
36
Range-Element
•
Anwender bestimmt interaktiv die Eingabe
•
Prozentuale, visuelle, Eingabe
•
Nicht alle Browser unterstützen die Anzeige des aktuellen
Wertes (Abhilfe: output)
Fachbereich AI, Entwicklung multimedialer Anwendungen
73
Range-Element
<form onsubmit="return false"
oninput="level.value = rangeInput.valueAsNumber">
<label for="forRange">Range Element</label>
<input name="rangeInput"
id="forRange"
type="range" min="0" max="100" value="17" />
<output for="forRange" name="level">0</output>/100
</form>
Fachbereich AI, Entwicklung multimedialer Anwendungen
74
37
Datelist-Element
•
Suggestion
•
Optionale Eingaben
•
Vergleichbar mit der ComboBox, aber keine festen Vorgaben
Alte Technik
<select name="objekte" >
<option > Internet Explorer</option >
<option selected="selected"> Firefox</option>
<option > Chrome</option >
<option > Opera</option >
<option > Safari</option >
</select>
Neue Technik
<input type="text" list="browsers2" value="Firefox" />
<datalist id="browsers2">
<option value="Internet Explorer"/>
<option value="Firefox"/>
<option value="Chrome"/>
<option value="Opera"/>
<option value="Safari"/>
</datalist>
Fachbereich AI, Entwicklung multimedialer Anwendungen
75
Fachbereich AI, Entwicklung multimedialer Anwendungen
76
38
Datelist-Element: Chrome
•
Funktioniert auch mit type="days"
•
"month", "week", und "date" nicht möglich
Fachbereich AI, Entwicklung multimedialer Anwendungen
77
Datelist-Element: Chrome
•
Funktioniert auch mit type="week"
Fachbereich AI, Entwicklung multimedialer Anwendungen
78
39
Datelist-Element: Chrome
•
Funktioniert auch mit type="year"
Fachbereich AI, Entwicklung multimedialer Anwendungen
79
Datelist-Element: Chrome
•
Funktioniert auch mit type="datetime" und "datetime_local"
Fachbereich AI, Entwicklung multimedialer Anwendungen
80
40
Datelist-Element: Chrome
•
Funktioniert auch mit type="time"
Fachbereich AI, Entwicklung multimedialer Anwendungen
81
Validierung
•
autocomplete
•
autofocus
•
label
•
placeholder
•
required
Fachbereich AI, Entwicklung multimedialer Anwendungen
82
41
Fachbereich AI, Entwicklung multimedialer Anwendungen
83
<form autocomplete="on" >
<label for="userId" > Username
<input type="text" title="Username für den Server" name="username"
id="userId" value="" placeholder="Ihr Username"
size="14" maxlength="10" autocomplete="on"
autofocus="autofocus" required="required" />
</label>
<label for="userId" > Password
<!-- insert a form element -->
<input type="text" title="Sinnvolles Passwort" name="password"
id="userPassword" value=""
placeholder="Ihr neues Passwort"
autocomplete="on"
size="14" maxlength="10"
required="required" />
</label>
<input type="submit" value="Send" />
<input type="reset" value="Delete"/>
</form>
Fachbereich AI, Entwicklung multimedialer Anwendungen
84
42