字段集表单属性的真正作用是什么

Question

我不确定fieldsetform属性的含义。MDN说：

此属性采用<form>元素的id属性值，您希望<fieldset>成为的部分，即使它不在表单中。请注意，此属性的用法令人困惑——如果您希望<fieldset>中的元素与表单关联，则需要直接在这些元素上使用表单属性。

这意味着fieldset的字段不会自动包含在form中(如果希望的话，必须在每个字段上加上form属性)，但fieldset是表单的部分。这到底意味着什么？

说明书上写着：

form属性用于显式地将fieldset元素与其表单所有者关联。

并且表单所有者链接到票据

与表单相关的元素可以与表单元素有关系，表单元素被称为元素的表单所有者。

它的结尾没有任何解释关系应该是什么。如果你是fieldset，你能用明确的术语描述与form的关系是什么感觉吗？

验证代码

<form id="myform">
<input name="happy" value="happy">
<button>Send</button>
</form>
<fieldset form="myform">
<input name="unhappy" value="unhappy">
</fieldset>

unhappy输入不与表单一起发送。

Answer 1

我同意，这很令人困惑。我做了一个聚乙烯填充物。欢迎提出意见和建议。

function control() {
var items = document.querySelectorAll("FIELDSET[form]");

var getter = function () {
return this.getAttribute("form"); 
};
for(var i = 0; i < items.length; i++) {
var nameForm = items[i].getAttribute("form");
var subs = items[i].children;
for(var j = 0; j < subs.length; j++) {
if(subs[j].tagName == 'BUTTON' || subs[j].tagName == 'INPUT' || subs[j].tagName == 'FIELDSET' || subs[j].tagName == 'OUTPUT' || subs[j].tagName == 'SELECT' || subs[j].tagName == 'TEXTAREA') { 
subs[j].setAttribute("form",nameForm);
}
}
Object.defineProperty(items[i], 'form', {
get: getter
});
}
}
window.addEventListener("load",control,true);