Allow Form reset on elements with form attribute

[ins0]

This PR:

• allows to reset forms where the element itself isn't placed inside an enclosed form tag

form-Attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#htmlattrdefform

[ins0]

@bluebill1049 may have a look please 😃

[leapful]

@ins0 Could you please explain more detail about the context of this pull request ? In what use case input element should be outside the form tag ?

Following the HTML specs:

The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

Referrer: https://www.w3.org/TR/html401/interact/forms.html#h-17.2.1

Meaning if the control element is not included in the form, its value should not be included when submitting form too.

While react-hook-form is trying to follow default standard and semantic, it would be better to handle this specific case outside the library as an implementation inside your application.

@bluebill1049 What do you think about this case ?

[bluebill1049]

Sorry for the late reply, was too busy resolving issues and roll out features. Personally, I prefer to skip this PR and the rationale is pretty much the same as what @leapful has stated.

[ins0]

The main goal in using the form attribute is, that were able to run multiple "nested" forms within our application. Which is the main reason why the form tag was introduced in html5. that said, the lib works great with "nested" forms but lacks only on the reset where it is required that the form element is somewhere outside of the given input.

https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-formelements-form

[ins0]

@bluebill1049 @leapful

[stale]

Thank you for your contributions! This Pull Request has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs. Best, RHF Team ❤️

[jaronimo]

This is currently an issue for me. I would prefer you address this PR. We have a site-wide side sheet that gets pulled outside the form in certain cases. In those cases, we have to use the form attribute for the inputs. This works great for populating the inputs with defaultValues, but does not allow reset to operate properly. unless we unmount the whole control set. Makes this page unusable.

Reference: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#association-of-controls-and-forms

[matthewmatician]

Following the HTML specs:
Referrer: https://www.w3.org/TR/html401/interact/forms.html#h-17.2.1

Meaning if the control element is not included in the form, its value should not be included when submitting form too.

I don't think the browsers are interpreting associated form elements as unsuccessful. Using the following form:

<form id="id" method="post">
  <input name="inside" type="text" value="inside" />
  <button type="submit">Submit</button>
</form>

<input name="outside" type="text" value="outside" form="id" />

If I hit the submit button, the form data includes the value from both fields. It behaves consistently between Firefox, Chrome, and Safari.

[stale]

Thank you for your contributions! This Pull Request has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs. Best, RHF Team ❤️

[stale]

Thank you for your contributions! This Pull Request is being closed because it has not had any recent activity. Feel free to re-open the issue and begin work again! Best, RHF Team ❤️