代码之家 › 专栏 › 技术社区 › Erik van Brakel scottrakes

字段集和图例

fieldset html

5

Erik van Brakel scottrakes · 技术社区 · 17 年前

fieldset / legend

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

传奇 对于它被显示为一个标题 ,但图例在语义上不是对内容的解释吗?在我看来,你最好这样做:

<form>
    <fieldset>
        <legend>* = required</legend>
        <label for="input1">input 1 *</label><input id="input1" name="input1" />
    </fieldset>
</form>

编辑:修复了一些错误;-)

5 回复 | 直到 11 年前

1

8

Rory O'Kane Erce 12 年前

是的,命名不明确。最好把它视为字段集的标题。

看见 the HTML spec on FIELDSET and LEGEND elements 如果您尚未:

这个 LEGEND 元素允许作者将标题分配给 FIELDSET . 图例可在以下情况下提高可访问性: 字段集 以非视觉方式呈现。

2

1

Dan Maharry 17 年前

我猜你是想写信

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

插图。
解释符号表或列表

因此,它实际上可能意味着两者。

3

1

FOR 17 年前

当您说图例“它正在显示为标题”时。。显然,这取决于所涉及的CSS。当您自己不指定CSS时,每个浏览器都使用自己的内置样式,这可能是最好的,也可能不是最好的。

我同意传奇不同于头衔。。。我不一定认为图例是“*=required”(这似乎只是对用户的一条警告信息,而不是对字段集本身的解释)之类的内容的正确位置。

至于它的显示方式,CSS再次为您提供了使其按您认为合适的方式显示(或不显示)的能力。

4

1

Nicholas Piasecki 17 年前

可以将图例视为groupbox的标题。您可以使用它将相似的表单元素组合在一起。您可以在一个字段集中包含发货地址的所有输入字段,该字段集的图例为“发货地址”,在另一个字段集中包含账单地址的所有输入字段集的图例为“账单地址”。

Fieldsets in Skiviez Checkout http://piasecki.name/fieldset-legend-example.jpg

通过CSS对它们进行样式设置可能会很棘手(因为Internet Explorer不正确地显示字段集的背景)。 Our IE stylesheet 有一些好的例子;查看“#内容表单字段集”部分。

5

1

Már Örlygsson 17 年前

<legend> 元素在语义上等同于包含的一组表单控件的“headline”或“title” <fieldset> .

也就是说 fieldset 孩子们应该聚在一起表单控件--不仅仅是一对 <input> <图例>

事实上 <div> s <p> <li> s是非常适合的容器 <输入> + < 对。