Html 为什么我们需要一个字段集标记?

Html 为什么我们需要一个字段集标记?,html,fieldset,Html,Fieldset,为什么我们需要一个标签?不管它的用途是什么,它都可能是表单标记的一个子集 我查了一些关于W3学校的信息,上面写着: 标记用于将表单中的相关元素分组 标记在相关元素周围绘制一个框 对于那些把“它为什么存在于规范中”误认为“它做什么”的人,有更多的解释。 我认为绘图部分是不相关的,我不明白为什么我们需要一个特殊的标记来将表单中的一些相关元素分组 我发现它对于CSS样式和将标签与控件关联很方便。它可以很容易地在一组字段周围放置一个可视容器并对齐标签。Fieldset以逻辑方式组织表单中的项目,但它

为什么我们需要一个
标签?不管它的用途是什么,它都可能是表单标记的一个子集

我查了一些关于W3学校的信息,上面写着:

  • 标记用于将表单中的相关元素分组
  • 标记在相关元素周围绘制一个框
对于那些把“它为什么存在于规范中”误认为“它做什么”的人,有更多的解释。
我认为绘图部分是不相关的,我不明白为什么我们需要一个特殊的标记来将表单中的一些相关元素分组

我发现它对于CSS样式和将标签与控件关联很方便。它可以很容易地在一组字段周围放置一个可视容器并对齐标签。

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

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


颜色
红色
绿色
蓝色

如前所述,此标记的目的是为表单的组织提供清晰性,并允许设计师更容易地装饰表单元素。

这是可访问性所必需的

退房:

HTML 4元素
字段集
图例
允许您以逻辑方式布局和组织具有许多不同兴趣区域的大型表单,而无需使用表格。
字段集
标记可用于围绕选定元素创建框,而
图例
标记将为这些元素提供标题。通过这种方式,表单元素可以组合到一个确定的类别中


不同的浏览器可能以不同的方式显示默认的
字段集
边框。层叠样式表可用于删除边框或更改其外观。

我使用字段集对表单输入进行分组,当我有一个巨大的表单并希望在某种形式的表单向导中将其分解时


同样的问题也在SO上得到了回答。

我喜欢这样,当你用字段集包围你的收音机,并且你没有在单选按钮输入标签上加上id,那么字段集所代表的组就被添加到标签链中,就像它是一个单独的项目一样

这使您可以通过表单进行制表,当您到达字段集时,您可以使用箭头键更改选定的收音机,然后在完成后进行制表


另外,不要忘记可访问性。屏幕阅读器需要fieldset+legend来理解表单,并能够以某种自然的方式向用户读出表单。如果你不想让有视力的用户看到它,请随意将其消失。在跨浏览器(尤其是传统浏览器)中,使用CSS正确地布局和设置图例样式有时是危险的,因此我发现让屏幕阅读器用户看不到图例标记,并添加单独的aria hidden=“true”span为有视力的用户设计了一个标签样式,可以简化样式并保持可访问性。

fieldset的另一个功能是禁用它会禁用其中包含的所有字段


禁用字段
文本区
启用字段
文本区

仅总结一些优点:

HTML
元素用于按定义在web表单中对多个控件以及标签(
)进行分组

换句话说: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>

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

<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>


为什么我们需要任何标签?当我们可以从1px div创建背景色图像时,为什么需要img标签?请注意:与w3schools无关。不要参考w3schools。只要使用MDN:。@Madmartigan我知道。但W3C只给出了一个规范,我发现这个规范对回答我的问题没有多大用处。关于(不)使用W3C学校和使用更值得信赖的网站获取技术信息:我手头没有链接,但显然很多屏幕阅读器在字段集中的每个标签前都会阅读图例文本。@Madmartigan-这是一件好事,这意味着您知道您仍在处理同一组单选按钮。(这也是确保图例简洁的一个原因)。“辅助技术”非常有意义。此外,还可用于“禁用”分组元素。我希望还应该通过向标记添加'required'属性来指定是否需要一个组,不幸的是,这不起作用<代码>这使您可以通过表单进行制表,当您到达一个字段集时,您可以使用箭头键更改所选的收音机,然后在完成后进行制表。--这是收音机输入的默认行为,与字段集无关。默认情况下,复选框的行为会有所不同。当然,我们可以提出这样一个论点,即
禁用的
属性作为
字段集和表单控件的函数,也应该正确地为
表单
元素实现。这是有道理的,不是吗?HTML4中不存在字段集。它是HTML5的一个特性,出现在HTML4.0.1中-