Information Technology Reference
In-Depth Information
Listing 3.1 zeigt die Verwendung des neuen Elements. Das
input
-Element wird
vom Typ
text
definiert, und das Attribut
list
verweist auf die
id
des
datalist
-
Elements (in diesem Fall
homepages
). Das
autofocus
-Attribut positioniert die
Schreibmarke beim Laden der Seite automatisch innerhalb des Textfeldes
(vergleiche Abschnitt 3.2.1, Fokussieren mit »autofocus«) und sorgt, zumindest
beim Browser Opera, dafür, dass sich die Auswahlliste öffnet.
Für die
option
-Elemente innerhalb der
datalist
ist es ausreichend, das
value
-Attribut zu befüllen. Weitere Attribute und ein Text-Node sind zwar mög-
lich, werden aber bei dieser Verwendung nicht benötigt. Beim Anklicken der
S
UBMIT
-Schaltfläche wird dem Inhalt des Textfeldes die Zeichenkette
http://
vorangestellt und der Browser an die so entstandene URL umgeleitet (
window
.location
).
<form>
<p>
<label for=url>Goto</label>
http://<input type=text id=url name=homepage
list=hompages autofocus>
<datalist id=hompages>
<option value=www.google.com>
<option value=html5.komplett.cc/code>
<option value=slashdot.org>
<option value=heise.de>
</datalist>
<input type=submit
onclick="window.location =
'http://'+document.getElementById('url').value;
return false;" >
</form>
Listing 3.1:
Das »datalist«-Element, gefüllt mit Internet-Adressen
Wenn Sie ältere Browser ebenfalls mit einer Auswahlliste ausstatten möchten,
ohne den HTML-Code zu duplizieren, können Sie auf folgenden Trick zurück-
greifen. Da Browser, die das
datalist
-Element unterstützen, ein eingeschlos-
senes
select
-Element ignorieren, zeigen sie das neue HTML5-Auswahlele-
ment an. Ältere Browser hingegen zeigen zu dem Textfeld eine Auswahlliste
mit vorgegebenen Links an, die bei einer Änderung der Auswahl in das Textfeld
eingefügt werden.
<datalist id=hompages>
<select name=homepage
onchange="document.getElementById('url').value =
