Jul 31 2014

HTML5: More Flexibility in Form Design

Advertisement

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…

form_formmethod_formaction

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>

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.

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.

(dpe)

About the Author

Denis works as a freelance web designer since 2005.

Homepage

Comments and Discussions
  • Mahendher, 01 August 2014

    HTML 5 made my life, It has come up with the great features and made my work simple.

  • Teelah, 05 August 2014

    This has been so great, transforming those boring forms to something beautiful. It really helps with call to actions. I assume that Just having a visually awesome form could bring up leads on your site. I didn’t know that IE didn’t support though, interesting but not surprising.

  • Anirudh Pulikonda, 06 October 2014

    HTML5 is the Best Language For Web Development. HTML is the only Language which I’ve learned on my own

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description