Placing form fields outside the form tag

16 June 2011

I had had numerous encounters with the problem that I needed to place a form element outside a form, but still submit it within this form. In HTML 5 there now is a solution for this problem!

Earlier today I found an article on this subject via Smashing Magazine's twitter account on the Impressive Webs website.

In short, it says that you can use input elements, submit buttons, etc. outside a <form> tag, and still submit this within the form. This is done by giving the <form> tag an id (nothing new here) and telling the lonesome submit button (for example) he belongs to that one form. Like this:

<form id="contact_form" method="get">  
 
    <label>Name:</label>  
    <input type="text" id="name" name="name">  
 
    <label>Email:</label>  
    <input type="email" id="email" name="email">  
</form>

<input type="submit" form="contact_form" value="send form" />


Very nice if you'd like to place elements somewhere on the page, outside the form, but there are downsides:

1. Support isn't very good yet:
Opera 9.5+ (full support)
Safari 5.1+ (according to Elliot; not sure of level of support)
Firefox 4+ (buggy or partial support)
Chrome 10+ (buggy or partial support)
IE (no support)

2. And it's more likely to "loose" input fields in complex pages. The readability of the code degrades.

Read more about this topic in the original article.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    David

    10 November 2012

    Works perfectly :) Like your design, i may have a job for you if you drop me a mail.