w3schools specify: "Definition and Usage: The form attribute specifies one or more forms the element belongs to." at http://www.w3schools.com/tags/att_input_form.asp
and "Tip: To refer to more than one form, use a space-separated list of form ids." at http://www.w3schools.com/html/html5_form_attributes.asp
while developer.mozilla.org states: "An input can only be associated with one form." at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
Who is right here?
There is no definite affirmative answer. It seams that we can only say that, since nowhere in the w3 consortium specs it is stated that an input can be associated with multiple forms, it implies that it cannot; (and also a conclusion that w3schools info should be taken with a grain of salt as CBroe noted).
When I tested it - using two forms with ids "form1" and "form2", and an 'outside' input element with form-attribute set to form="form1 form2" - this input did not submit with neither of forms. Meaning that, since form-attribute is not exactly set to one form id, it doesn't connect it to any form.
Further in the test I have added a third form with form id="form1 form2". This resulted in input element (which is outside of all of the forms, with form-attribute set to form="form1 form2") to get submitted with this form, but not with form with id="form1" nor with form with id="form2".
Therefore, with my limited knowledge, I dare to make a conclusion:
One input element cannot be associated with multiple forms by specifying space-delimited ids for its form-attribute (or by any other means most likely).
This question is a duplicate of Multiple form ID's in HTML5's input form attribute, but there is a bit more detailed explanation here.
The official specifiaction is almost clear in this point - it is NOT possible to connect one input with more then one form:
https://www.w3.org/TR/2012/WD-html-markup-20120315/input.text.html#input.text.attrs.form
The valid value of attribute form
is an "ID reference", not a "list of ID references"
You could do some little hacks like this one:
<style> {
input[type="submit"] {display: none;}
label { ...button-layout-css...}
</style>
<form...>
<input name="f1" type="text" />
<input name="f2" type="text" />
<label for="btn1">...</label><input id="btn1" type="submit" name="fields" value="[f1]" />
<label for="btn2">...</label><input id="btn2" type="submit" name="fields" value="[f2]" />
<label for="btn3">...</label><input id="btn3" type="submit" name="fields" value="[f1,f2]" />
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With