为什么我们需要现场设置标签？

为什么我们需要 <fieldset>标签? 无论它的用途是什么，它都可能是表单标签的一个子集。

我查了一些 W3Schools 的信息，上面写着:

  • <fieldset>标记用于将表单中的相关元素分组。
  • <fieldset>标记在相关元素周围绘制一个框。

对于那些把“为什么它存在于规范中”误解为“它是做什么的”的人，更多的解释。 我认为绘图部分是不相关的，我不明白为什么我们需要一个特殊的标签，只是组织一些相关的元素在一个形式。

100085 次浏览
小开

我发现它方便的 CSS 样式和关联标签的控件。它使得在一组字段周围放置一个可视化容器并对齐标签变得非常容易。

小开

Fieldset 以逻辑方式组织表单中的项目，但它也改善了那些使用听觉浏览器的人的可访问性。 Fieldset 非常方便，因此它在过去的许多应用程序中非常流行，所以他们也在 html 中实现它。

小开
最佳答案

最明显、最实际的例子是:

<fieldset>
<legend>Colour</legend>


<input type="radio" name="colour" value="red" id="colour_red">
<label for="colour_red">Red</label>


<input type="radio" name="colour" value="green" id="colour_green">
<label for="colour_green">Green</label>


<input type="radio" name="colour" value="blue" id="colour_blue">
<label for="colour_blue">Blue</label>


</fieldset>

这使得每个单选按钮都可以被标记，同时也为整个组提供了一个标签。在使用辅具(例如屏幕阅读器)的情况下，这一点尤其重要，因为视觉显示无法暗示控件及其图例之间的关联。

小开

如 给你所述，此标记的目的是为了使表单的组织更加清晰，并允许设计人员更容易地访问表单元素。

小开

为了方便使用。

检查: Http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML4元素 fieldset和 legend允许您在不使用表的情况下，以逻辑方式布局和组织具有许多不同感兴趣区域的大型表单。fieldset标记可以用来围绕选定的元素创建框，而 legend标记将为这些元素提供标题。通过这种方式，表单元素可以组合在一起，成为已识别的类别。

不同的浏览器可能以不同的方式显示默认的 fieldset边框。层叠样式表可用来移除边框或改变其外观。

小开

我使用字段集对表单输入进行分组，当我有一个巨大的表单并希望将其分解为一种表单向导时。

同样的问题也在这里得到了回答。

小开

我喜欢当你用 fieldset 包围你的收音机时，你不会在你的单选按钮输入标签上加上 id，然后 fieldset 表示的组就会被添加到 tabchain 中，就好像它是一个单独的条目一样。

这使您可以通过表单制表符，当您到达字段集时，您可以使用箭头键来更改选定的单选，然后在完成后再制表。

还有，别忘了可达性。屏幕阅读器需要字段集 + 图例，以便理解您的表单，并能够以某种自然的方式读给用户。如果你不想让有视力的用户看到这个图例，你可以随意消失。使用 CSS 来布局和设计图例有时候是很冒险的，尤其是在使用传统浏览器的情况下，所以我发现让图例标签对于屏幕阅读器用户来说是不可见的，并且添加一个独立的，aria-hide = “ true”span 样式的标签，就像一个为有视力的用户设计的标签一样，使得图例的设计变得简单，并且可以访问。

小开

Fieldset 的另一个特性是禁用它将禁用其中包含的所有字段。

<fieldset disabled>
<legend>Disabled Fields</legend>
<input type="text" value="Sample">
<textarea>Text Area</textarea>
</fieldset>


<fieldset>
<legend>Enabled Fields</legend>
<input type="text" value="Sample">
<textarea>Text Area</textarea>
</fieldset>

小开

只是总结一些优势:

HTML <fieldset>元素用于在一个由 MDN定义的 web 表单中对多个控件和标签(<label>)进行分组。

换句话说: Fieldset 标记允许您对字段集进行逻辑分组，以使表单更具描述性。, 一组表单控件，可以选择按照一个公共名称分组。

<fieldset>
<legend>Choose your favorite animal</legend>


<input type="radio" id="dog" name="animal">
<label for="dog">Dog</label><br/>


<input type="radio" id="cat" name="animal">
<label for="cat">Cat</label><br/>
</fieldset>

使用字段集的“ 优点”是:

  • 它们允许您以最 语义上的可用的方式标记数据(在这种情况下是表单)。考虑到在字段集中放置字段比在 div 中放置字段更具描述性。Div 没有告诉您字段之间的关系，字段集告诉您存在关系。
  • 通过使用 残疾人士，它允许您一次性禁用所有内容。
  • 对 无障碍环境有帮助
小开

对于我来说，<fieldset>...</fieldset>元素的最大优点之一是能够保留 <form>...</form>上下文，即使 <fieldset>...</fieldset>不在表单中。

例如，以下表格:

<div class="header">
<form id="myForm">
<input type="text" name="someInput">
</form>
</div>


<div class="footer">
<fieldset form="myForm">
<input type="text" name="someInput1">
</fieldset>
</div>

在语义上与下列形式相同:

<form>
<input type="text" name="someInput">
<input type="text" name="someInput1">
</form>
小开

字段集用于 无障碍环境、 组织起来，并且具有 < strong > clear 表格。

在收音机中，收音机的标题是用户选择的数据库字段(在 国家下面的例子中) ，但是在 textarea这样的字段中，收音机的标题非常方便。

这是因为我不会放置标签，而是使用标签作为 title/label。

下面是 纯 CSS的一个非常简单的例子

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">


<div class="pure-g" style="    position: relative;
top: 50%;
left: 50%;
transform: translate(-18%);
}">
<div class="pure-u-5-5">
<form class="pure-form" method="get" action="#">


<fieldset name="field-set-main">
<legend>Create A Project</legend>
<input type="text" placeholder="Name" />
<div>
<input type="datetime-local" placeholder="Date Start" />
<input type="datetime-local" placeholder="Date End" />
</div>
</fieldset>


<fieldset name="field-set-state">
<legend>State</legend>
<span>
<input type="radio" id="stateDraft" name="state" value="draft" checked>
<label for="stateDraft">Draft</label>
</span>
<span>
<input type="radio" id="stateProgress" name="state" value="in_progress">
<label for="stateProgress">In Progress</label>
</span>
<span>
<input type="radio" id="stateDone" name="state" value="done">
<label for="done">Done</label>
</span>
<span>
<input type="radio" id="stateDiscarded" name="state" value="discarded">
<label for="discarded">Discarded</label>
</span>
</fieldset>


<fieldset name="field-set-description">
<legend>Description</legend>
<textarea id="story" name="description"
rows="5" cols="30" placeholder="Write Description here.." style="width=100;">


</textarea>
</fieldset>


<fieldset name="field-set-control">
<legend>Action</legend>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
<button type="submit" class="pure-button pure-button-danger">Cancel</button>
</fieldset>
</form>
</div>
</div>


提交答案