How to use “form=form_id” attribute in html5 input

Question

I'm trying to use "form" attribute for html5 input as described here:

[1] http://www.w3schools.com/html5/att_input_form.asp

[2] http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_input_form

The description of the attribute says that form attribute: "Specifies a space-separated list of id's to one or more forms the element belongs to"

I'm testing this by using the code below in W3C's TryIt editor (link 2 above)

<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>

<form action="demo_form.asp" id="form2">
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>

Last name: <input type="text" name="lname" form="form1 form2" />

I supplied "string_for_form2" in form2 and "lastname" in the lname field. I'm getting the output as:

fname=string_for_form2

instead of

fname=string_for_form2&lname=lastname

Any ideas why the result is not as expected ? I've tried on Firefox 17 and Chrome 23.

Thanks

Answer 1

use javascript and name form on submit

<form action="demo_form.asp" onsubmit= 'this.id="form1"'>
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>

<form action="demo_form.asp" onsubmit= 'this.id="form1"'>
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>

Last name: <input type="text" name="lname" form="form1" />

Answer 2

Because you're trying to assign two form owners.

"A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this."

http://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms

This attribute just allows markup flexibility, it doesn't change the form ownership paradigm from the previous spec.

Answer 3

I could not find anything in the W3C HTML5 specification to support the statement on the www.w3schools.com site that input element can belong to 2 or more forms. The input element's owner is always mentioned in singular and never as a list. Furthermore on developer.mozilla.org there is explicit statement about the input association with one form only. The description of the form attribute states:

form: A string indicating which element this input is part of. An input can only be in one form.

Answer 4

An input field can only be on one form. It is better to include it within the form scope, for clarity.

Use also name instead of only id on your forms. Although html5 supports it, what with older browsers? What with IE?

<form action="demo_form.asp" name="form1" id="form1">

<form action="demo_form.asp" name="form2" id="form2">