HTML input field OUTSIDE of a form
In HTML5, you can use the form
attribute:
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Example:
<form id="myform">
<input id="something" type="text">
</form>
<button form="myform" type="submit">Submit that form over there</button>
You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.
<input type="text" form="myform" />
worked for me.
Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).
I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.