“form” Attribut in HTML5

In HTML4 oder XHTML war es bisher so, dass Formularelemente (input/textarea) sich innerhalb eines <form>-Tags befinden mussten, damit diese beim Absenden eines Formulars auch berücksichtigt wurden. Die Daten eines Formularelements außerhalb eines <form>-Tags ließen sich so nur mit umständlichen JavaScript beim Absenden eines Formular mit übergeben.

Nun etwas einfacher

In HTML5 wurde das Attribut “form” eingeführt, welches diese Problematik extrem vereinfacht. Damit lassen sich beliebige Formularelemente einem beliebigen <form>-Tag zuweisen. Das Attribut wird wie folgt verwendet:

<form id="login_form">
   <input type="text" name="username">
   <input type="password" name="password">
   <input type="submit" value="Login">
<form>

<input type="text" name="date" form="login_form">

Wichtig sind hierbei 2 Dinge:

  • das Formularelement “date” liegt außerhalb des <form>-Tags
  • das Formularelement “date” besitzt ein Attribut form, welches der ID des <form>-Tags entspricht

Wird das Forumlar login_form nun bestätigt, dann werden auch die Daten das “date”-Eingabefeldes berücksichtigt und gesendet, obwohl dieses außerhalb des <form>-Tags liegt.

form-Attribut überschreibt das Standardverhalten von Formularelementen

Besitzt eine Seite zwei Formulare, dann lassen sich die Eingabeelemente über das form-Attribut beliebig einem der beiden Formulare zuordnen. So können nun Daten aus einem Formular #1 über das entsprechende form-Attribut zusammen mit einem Formular #2 gesendet werden, obwohl die Eingabefelder innerhalb des Formular #1 liegen. Das hat allerdings zur Folge, dass die Daten eines so gekennzeichnetes Eingabefeldes nur noch mit dem angegebenen Formular gesendet werden und bei anderen Formularen (auch wenn diese die Elternelemente im HTML-Code sind) nicht mehr berücksichtigt werden. Dies gilt übrigens auch für Submit-Buttons. Ein kleines Beispiel:

<form id="form1">
   <input type="text" name="field1">
   <input type="submit" form="form2" value="Submit1">
<form>

<form id="form2">
   <input type="text" name="field2">
   <input type="submit" form="form1" value="Submit2">
<form>

Im Beispiel werden die Formulare jeweils vom anderen Formular aus abgeschickt.

Browser Support

Das Verhalten des form-Attributs wird von folgenden Browsern unterstützt:
Opera 9.5+, Safari 5.1+, Firefox 4+, Chrome 10+

Der Internet Explorer macht hier wieder eine Ausnahme. Selbst in Version IE10 wird dieses Verhalten leider nicht unterstützt (Konnte es jedoch selbst noch nicht Testen).

One comment on ““form” Attribut in HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *