先看這個例子
「標題」欄放在 form workshop 內；「筆記」欄在外，卻用 form="workshop" 連回同一份表單。兩個都是本地原生控制項，沒有提交按鈕、提交程式或網絡動作。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 內層標題 | 查看 title.form.id | workshop |
| 外面的筆記 | 查看 extra.form.id | 靠明確 form 屬性，仍是 workshop |
| 表單控制項 | 查看 workshop.elements | 兩個 input，按文件次序為 title、extra |
瀏覽器怎樣處理
可關聯表單的 input，可用 form 屬性按同文件的 id 指定 form 元素，毋須一定放在其標記內。input 的 name 用來識別日後表單資料項，form 則指定所屬。兩者都不會令本例自行提交或儲存。
畫面放得近，不等於同屬一份表單
反例把外面的筆記緊接 form 放置，卻沒有 form 屬性；因此它在這份原始碼內沒有 form 所屬。
<form id="workshop"><label>標題 <input id="title" name="title" value="HTML 結構"></label></form><label>筆記 <input id="extra" name="note" value="本地示範"></label>extra.form 為 null，workshop.elements 只有一個 input。正例明確連好後才包括兩個。
試着修正
把 form 的 id 改成 lesson-form，外面筆記欄的哪項屬性也要改？
查看參考答案
外面 input 的 form 屬性也改成 lesson-form。name="note" 可以照留；欄位名稱不是用來指定 form 所屬。
- input.form、form.elements 和真正 DOM 父元素分開查。
- 例子保持無程式，核對沒有提交或網絡請求。