HTML5 - Formulare
1. Die Neuerungen
... sind gewaltig. Zumindest in der Theorie, in der Praxis dagegen sieht es nicht so pralle aus, da die Browserunterstützung erhebliche Lücken oder Abweichungen aufweist. Egal. Ich zeig euch mal, was möglich wäre, wenn. Ja, wenn das Wörtchen "wenn" nicht wär.
2. Browserseitige Validierung
Darauf hat das W3C besonderen Wert gelegt, um den armen Entwicklern das Leben leichter zu machen. Und einige Browser können das auch schon sehr gut. Allerdings ist die Unterstützung, sagen wir mal, unterschiedlich. Das werde ich euch aber erst später zeigen, wenn es um die neuen Attributwerte geht.
3. Hilfsmittel
Auch davon gibt es eine ganze Menge. Sachen, die man früher alle händisch und mit einem Mordsaufwand programmieren musste, werden jetzt vom Browser ausgeführt. Ganz automatisch und ohne großes Zutun unsererseits. Dazu werde ich dann im weiteren Verlauf kommen.
4. Neue Elemente
Da muss ich euch enttäuschen. Es gibt nur eins. Allerdings ist das ein richtig gutes Feature und das erste Beispiel für ein gelungenes Hilfsmittel.
<datalist>
- 16.0
- 12.0
- 22.0
- 10.0
Dabei kann man eine Vorschlagsliste für Eingaben erstellen. Gebt einfach im folgenden Beispiel etwas ein.
Ein Beispiel
<input type="text" list="characters">
<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart Simpsom">
<option value="Marge Simpson">
<option value="Lisa Simpson">
<option value="Maggie Simpson">
<option value="C. Montgomery Burns">
<option value="Waylon Smithers">
<option value="Apu Nahasapeemapetilon">
<option value="Ned Flanders">
<option value="Nelson Muntz">
<option value="Seymour Skinner">
<option value="Clancy Wiggum">
</datalist>
Was zum Teufel
... war denn das? Werden zumindest die sagen, deren Browser das unterstützt. Je nach Eingabe wird eine Liste ausgeklappt, aus der man sich einen Eintrag direkt in das Textfeld klicken kann. Praktisch, gelle?
Aber!
Leider gehen die einzelnen Browser mal wieder völlig unterschiedlich vor. Ob es an fehlenden Vorgaben des W3C liegt oder an böser Mutwilligkeit der Hersteller, kann ich leider nicht sagen. OK, in allen Fällen gibt es keine Unterscheidung zwischen Groß- und Kleinschreibung, ansonsten macht der Firefox(!), was er will. Im Einzelnen sieht da so aus.
- Die Liste klappt erst nach dem ersten Buchstaben aus. Gesucht wird nach einem beliebigen Vorkommen. Oder sie klappt bei einem Doppelklick aus.
- Die Liste klappt schon nach einem Klick auf das Textfeld auf. Gesucht wird nach dem ersten Vorkommen.
- Die Liste klappt schon nach einem Klick auf das Textfeld auf. Gesucht wird nach dem ersten Vorkommen.
- Die Liste klappt schon nach einem Klick auf das Textfeld auf. Gesucht wird nach dem ersten Vorkommen.
Erläuterung
Die Verbindung zwischen beiden Elementen geschieht über ein jeweils zugewiesenes Attribut (siehe oben). Bei der <datalist> ist es die id
und im Textfeld das list mit Angabe des id-Wertes aus der Datenliste.
Schreibweisen
Leider sind wir da derzeit extrem eingeschränkt. Es gibt also nur folgende Möglichkeiten.
<!-- so -->
<option value="Homer Simpson">
<!-- oder so -->
<option>Homer Simpson
<!-- oder so -->
<option>Homer Simpson</option>
So was
... geht leider gar nicht. Denn die Browser durchsuchen den value-Wert und nicht den möglichen Inhalt der <option>-Elemente.
<option value="1">Homer Simpson</option>
Auch hier unterscheidet sich die Darstellung je nach Browser. Das probiert ihr aber mal selber aus.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt