Hauptmenü

Untermenü

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

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

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

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