HTML5 form attribute

February 22 2019

I’ve been doing web development professionally for over a decade now and every now and again I learn something new that pleasantly surpises me. The HTML5 form attribute whilst being very simple, is one of those things.

In a nutshell it enables a form control outside the form to act as if it’s inside by virtue of tying them together with an ID and a corresponding form attribute.

I’ve put together a quick example below to show how this can be particularly useful when it comes to submitting a form from somewhere else on the page without the need of any JavaScript. Suppose we have a generic wizard component and we want to split up the UI in such a way that the wizard navigation step actions are separate from the form contained inside of each step. By creating an input with the same ID as the form, once clicked it actually submits the form for us - how cool is that!