Inspect the working example
The Title input is nested inside form workshop. The Note input is outside, but form="workshop" associates it with that form. Both are local native controls, with no submit button, submission handler or network action.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Nested title | Inspect title.form.id | workshop |
| Outside note | Inspect extra.form.id | workshop through explicit form attribute |
| Form controls | Inspect workshop.elements | Two inputs, in document order: title then extra |
Follow the browser mechanism
A form-associated input can use its form attribute to identify a form element by ID in the same document. This can differ from DOM nesting. An input’s name labels its entry for later form data; its form attribute identifies its owner. Neither property makes this fixture submit or save anything.
Visual proximity does not create form ownership
The external note is placed immediately after the form but has no form attribute. It therefore has no form owner in this source.
<form id="workshop"><label>Title <input id="title" name="title" value="Markup"></label></form><label>Note <input id="extra" name="note" value="Local sample"></label>extra.form is null and workshop.elements contains only one input. The working explicit association includes both.
Try the repair
You rename the form ID to lesson-form. Which attribute on the outside note must change?
Show the worked answer
Change the outside input’s form attribute to lesson-form. Its name="note" can remain; the field name does not identify the owning form.
- Inspect input.form, form.elements and actual DOM parentage separately.
- Keep the example script-free and verify that no submission or network request occurs.