Reference Form Elements Outside the Form
Description
In HTML5, you can associate elements with forms anywhere in the document by using the form attribute, which is defined by input, button, and the other form-related elements.
To associate an element with a form that is not an antecedent, you set the form attribute to the id value of the form.
Example
The following code shows how to use the form Attribute.
<!DOCTYPE HTML>
<html>
<body>
<form id="voteform" method="post" action="http://example.com/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave"
name="fave" /></label>
</p><!-- w w w. j a va 2 s. co m-->
</form>
<p>
<label for="name">Name: <input form="voteform" id="name"
name="name" />
</label>
</p>
<button form="voteform" type="submit">Submit Vote</button>
<button form="voteform" type="reset">Reset</button>
</body>
</html>
In code above, only one of the input elements is a descendent of the form element.
The other input element and both
of the button elements are outside of the form element,
and they use the form attribute to associate themselves with the form.