HTML5: More Flexibility in Form Design

Forms have grown more versatile with HTML5. The input element is now able to contain email addresses and dates and marking input fields as mandatory or prepopulating them with content is no longer a case for JavaScript – just to name a few of the most valuable additions. But then, there’s even more to it. Did you know you can now have more than one “submit” button and did you know that you can now have input and select element living outside your form element? We’ll walk you through this…

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.

<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.

<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>

As you can see, each “submit” targets a different url and we didn’t have to even think about JavaScript to achieve this.

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.

<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.

(dpe)

Photo by Greg Rakozy on Unsplash