The Current State of HTML5 Forms

The form Attribute

<input type="text" form="form_id">
<form id="form_id">
   <input type="submit">
</form>

Live Demo

Outside the form
In the form:
Firefox
4+
Safari
5.1+
Safari Mobile
iOS 5+
Chrome
10+
Opera
9.5+
IE
11+
Android
4.0+
Supported Supported Supported Supported Supported Supported Supported

The Low Down

The form attribute can be used to explicitly associate a form element with a form, even if that form is not its ancestor, and can disassociate a form element from the form in which it is nested.

  • The form attribute enables placing an <input>, <button>, or other form field anywhere within a document, not just as descendants of a <form> elements. It also enables a non-disabled form field from being submitted along with its form ancestor.
  • If a form control is nested within a <form>, by default it will be associated with that form. You can disassociate it from that form with form="", or associate it with another form within the document with form="id_of_other_form".
  • The form attribute takes as its value the ID of the form it should be bound to. To associate a form control with a <form> of which it is not a descendant, set the form attribute of the form element to the value of the form's id.
  • A form control can only be associated with a single <form>.
  • Warning: form="" disassociates a form control from all forms. To set a form element to its default state, you must remove the attribute altogether removeAttribute('form'), instead of setting the value of the form attribute to an empty string.
  • Valid on <input>, <button>, <textarea>, <select>, <label>, <keygen>, <output> and <fieldset>.