HTML input field OUTSIDE of a form

I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it conv开发者_如何学Goenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.

Is there some way we can assign a "form id" to the inputs?

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.

<input class="checkbox" id="staff_recruiting" name="company_type" 
    value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input"> 

$('#search-keyword').keyup(function() { 
    $('#search-keyword-input').val($(this).val());
});

Your problem will be solved bro:

1. Add a hidden input field in your form.
2. Using jQuery or JS to change that hidden input field value with that outside input box.
3. Your page will refresh and your outside box value will be grabbed.