HTML5: More Flexibility in Form Design
Case 1: More than one Submit per Form
Up until lately you could have exactly one “submit” button in your form. You would attach post method and url to the “form” element and have the “submit” button process it.
1 2 3 4
<form method="post" action="http://example.com/"> … <input type="submit" /> </form>
The example will look most familiar to you. The new HTML properties “formmethod” and “formaction” change this. They allow you to add the post method and url directly to the “submit” button, taking it out of the “form” element itself. Having these vital processing parameters attached to the “submit” button and away from the form element naturally inserts more flexibility. As the parameters sit in each “submit”, you can have as many as you see fit.
1 2 3 4 5
<form> … <input formmethod="get" formaction="http://www.example.com/" type="submit" value="example.com" /> <input formmethod="get" formaction="http://www.example.org/" type="submit" value="example.org" /> </form>
Mixing the legacy functionality with the new possibilities will work flawlessly. As soon as any “submit” button gets equipped with “formaction” and “formmethod” the parameters for “method” and “action” inside the “form” element are overwritten. If you have a “submit” which is not equipped with the new properties it will fall back to the values set inside “form” itself.
The properties “formmethod” and “formaction” are supported by all recent browsers.
Case 2: Form Elements Outside the Form Element
We have all learned that all the elements belonging to a given form would need to sit inside the “<form>” element itself. This led to minor flexibility in the design of these forms. Thanks to the new attribute “form” input or select elements no longer need to reside in the “form” element. Instead you are enabled to place parts of your form throughout the whole page. To still have the form functioning as intended we add an ID to the “<form>” element. Then this ID is used by the “form” attribute to attach the form areas outside the form element back to it.
1 2 3 4 5
<form id="MyForm"> <input type="text" name="email" /> </form> <input type="submit" form="MyForm" />
The “form” attribute is supported by all recent browsers. An exception is – you’ll guess it – the Internet Explorer.
Denis works as a freelance web designer since 2005.