Working with Elements Outside the Form


Posted on September 22nd, by Learning in HTML, HTML Elements In Context. No Comments

In HTML4, the input, button, and other form-related elements had to be contained within the form element, just as I demonstrated in all of the examples so far. In HTML5, that restriction has been removed, and you can associate elements with forms anywhere in the document. You do this 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 simply set the form attribute to the id value of the form. The code below gives an example.


<!DOCTYPE HTML>
 <html>
 <head>
 <title>Example</title>
 <meta name="author" content="Luís"/>
 <meta name="description" content="A simple example"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 </head>

<body>
 <form id=<strong>"</strong>voteform<strong>"</strong> method="post" action="http://flash:8000/form">
 <p>
 <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
 </p>
 </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 this example, 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, but they use the form attribute to associate themselves with the form.