HTML5 - Formulare - Attribute Teil 1
1. Ein Wunder, ein Wunder
Tritt mir auf den Fuß. Nee, den Witz habe ich schon mal hier gerissen, der zieht nicht mehr. Aber nachdem ich mich durch die neuen Attribute gekämpft habe, dachte ich tatsächlich Folgendes.
"Beim W3C rennen ja wirklich nicht nur völlig weltfremde Technokraten herum, sonder auch praktisch denkende Menschen". [Quelle: ich beim Einlesen in die neuen Formular-Attribute]
Denn es hat ein paar Neuerungen gegeben, die mich wirklich überrascht haben.
2. autocomplete
- 16.0
- 5.1
- 22.0
OK, das gehört nicht dazu und sollte dem einen oder anderen auch schon unter die Augen gekommen sein. Ihr kennt doch sicher diese Angewohnheit vom Firefox, sich jeden gottverdammten Eintrag in einem Formularfeld zu merken. Man trägt etwas in ein Formularfeld ein, sendet es nicht ab sondern haut kräftig auf die F5-Taste und der Eintrag bleibt erhalten. Um dieses manchmal nervige Verhalten zu unterbinden, wurde schon früh auf obiges Attribut zurückgegriffen.
Aber dessen eigentliche Aufgabe ist Folgendes. Man füllt ein Formular auf sendet es ab und klickt dann auf den "Zurück"-Button im Browser. Was soll nun mit den Daten
geschehen? Bleiben sie erhalten oder werden sie verworfen? Dieses Attribut hat zwei Werte, on und off. Deren Wirkungsweise könnt ihr in den
Beispielen sehen. Die entsprechenden Browser vorausgesetzt.
Drei Beispiele
autocomplete="on". Textfeld ausfüllen, Formular absenden und auf "Zurück" im Browser klicken. Die Inhalte bleiben erhalten.
autocomplete="off". Die Inhalte werden gelöscht.
autocomplete="on" beim Formular und off beim <select>. Browserabhängig, Details dazu kommen später in den Tutorials.
Ansonsten probiert es mal selber aus.
<!-- Beispiel 1 -->
<form method="post" autocomplete="on">
<!-- Beispiel 2 -->
<form method="post" autocomplete="off">
<!-- Beispiel 3 -->
<form method="post" autocomplete="on">
<select name="bla" autocomplete="off">
3. autofocus
- 16.0
- 5.1
- 22.0
- 10.0
Ist auch nicht so überraschend gewesen, da ich es schon das eine oder andere Mal gesehen habe. Dieses Attribut legt den Cursor direkt auf ein ausgewähltes Formularelement. Wenn ihr oben schon rumgespielt habt, ist der natürlich weg und ihr müsst die Seite neu laden.
Beispiel
<input type="text" name="blubb" autofocus="autofocus" /><br>
4. disabled
- 16.0
- 12.0
- 22.0
- 9.0/10.0
Das wäre eine ziemlich alte Kiste, da es da Attribut schon seit HTML 3.2 gibt. Glaube ich mich zumindest daran zu erinnern. Aber! In HTML5 kann man
disabled auf ein <fieldset> legen und damit alle darin enthaltenen Formularelemente deaktivieren. Praktisch, nicht?
Beispiel
<form>
<fieldset disabled="disabled" style="border: none">
<input type="text" name="blubb" />
<input type="checkbox" name="blubber" />
</fieldset>
</form>
Erläuterung
Natürlich kann man das auch mit mehreren Fieldsets machen. Und dazwischen andere packen mit aktiven Elementen. Ist überhaupt kein Problem. Ach, wer sich das Beispiel mit dem IE9 oder 10 ansieht, dort kann man zwar etwas in das Textfeld schreiben, es wird aber nicht versendet. Also kann der Browser das, sagen wir mal, zur Hälfte.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt