菲尔德塞特，这个陌生人。
字段？什么？没错，它依然存在，只是似乎没人记得它了。这家伙是一个活生生的标准表单元素，用来表示表单内的一组元素，或者将相关元素（例如标签、输入框、计量器、段落等等）分组……而且它的功能远不止于此，它还可以嵌套，并包含任何类型的元素。
你还感兴趣吗？那我再告诉你两件事：它还可以接受三个非常有用的 HTML 属性，帮助你创建漂亮的表单；而且……它可不只是用来包裹单选按钮的！😱
规格
fieldset 元素表示一组组合在一起的表单控件（或其他内容），可以选择性地添加标题。标题由fieldset 元素的第一个子元素legend （如果有）提供。
— WHATWG
这个元素的用途和使用时机非常明确。如上所述，它还可以接受三个属性：form，name和disabled。
形式
此属性允许您将一组输入项关联到特定的表单元素，该元素不能是其父元素。这意味着您可以解决表单无法嵌套的问题。
姓名
要在form.elements API中使用的组的名称
已禁用
这是按钮和输入框中使用的全局属性，它会立即禁用所有子元素。
用例
我们来看一个实际的例子，创建一个带有复选框控制的禁用部分的表单。在这个表单中，我们将使用标签、输入框和输出元素，并且可以通过充分利用字段集属性和一些 JavaScript 代码来构建它。
<form id="calculatorForm">
<fieldset>
<input type="checkbox" id="enableCalc">
<label for="enableCalc">Enable calc</label>
</fieldset>
<fieldset name="calculator" disabled>
<!-- Default formula -->
<fieldset name="defaultcalc">
<input type="checkbox" id="default" checked>
<label for="default">Use default calculation</label>
</fieldset>
<!-- Custom formula -->
<fieldset name="customcalc" disabled>
<label>Use custom calculation</label>
<input type="number" value="50" id="c">+
<input type="number" value="50" id="d">=
<output id="x" for="c d">100</output>
</fieldset>
</fieldset>
</form>
在这个例子中，我们有一个名为“calculator”的表单，该字段集默认处于禁用状态。选中复选框后，enableCalc计算器区域将被启用。以下是实时演示。
抛开 JavaScript 集成不谈，重点在于fieldset元素本身。它是实时的、标准的，而且非常实用。
来自……的“糟糕”例子
以下示例既非错误也非正确，但为什么不打破这种“不太好的做法”的循环，开始像我们不断改进 JavaScript 代码一样改进我们的代码呢？
Twitter Bootstrap
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput">
</div>
ZURB基金会
<div class="input-group">
<input class="input-group-field" type="url">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
材料设计组件
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
...
</div>
</div>
<label for="my-checkbox">This is my checkbox</label>
</div>
Tailwind CSS
<div class="mb-4">
<label class="block text-grey-darker" for="username">Username</label>
<input id="username" type="text" placeholder="Username">
</div>
正如你所见，许多流行的框架并没有使用 fieldset（Bootstrap 提到过，但仅此而已）作为表单元素容器，这真的很奇怪，因为 HTML 已经包含了构建网页和应用程序所需的所有工具。我们不应该重复创建平台已经提供的功能，而应该学习它，并最终学习如何扩展它，例如使用Web 组件。
文章来源：https://dev.to/equinusocio/fieldset-this-stranger-55pf