Question

好的，我知道fieldset / legend在HTML中是如何运作的。假设您有一个包含某些字段的表单：

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

我应该将legend用于什么？它显示为标题，但在语义上不是传说内容的解释？在我看来，最好你做这样的事情：

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

但这并不能解决字段集的呈现方式。这只是HTML中的一个暧昧命名，还是我对英文单词'legend'的误解？

编辑：修正了一些错误; - ）

Answer 1

是的，命名含糊不清。最好将其视为字段集的标题。

如果您还没有，请参阅the HTML spec on FIELDSET and LEGEND elements：

LEGEND元素允许作者为FIELDSET分配标题。当FIELDSET以非视觉方式呈现时，图例可以改善可访问性。

Answer 2

我想你打算写

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

但你是对的。 “图例”这个词有几个含义，包括

随附的说明性标题一个例证。
解释表格或符号列表出现在地图或图表上。

所以它实际上可能意味着两者。

Answer 3

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

我同意传奇与标题不同......我不一定认为传说是“* =必需”之类的东西（这对用户来说似乎只是一个警示信息，不是对字段集本身的解释。

毕竟，一个图例可以被定义为一个标题或附图的简短描述（通常;在这种情况下是图像以外的东西）。

就其如何显示而言，CSS再次为您提供了使其显示（或不显示）的能力。

Answer 4

将图例视为组合框的标题。您可以使用它将相似的表单元素组合在一起。您可以在一个字段集中包含传送地址的所有输入字段，其中包含“送货地址”图例，以及另一个带有“帐单地址”图例的字段集中的帐单邮寄地址的所有输入字段集。

以下是一个例子：

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

通过CSS设置样式可能很棘手（因为Internet Explorer错误地显示了字段集的背景。Our IE stylesheet有一些很好的例子;请查看“#content form fieldset”部分。

Answer 5

<legend>元素是<fieldset>包含的表单控件组的“标题”或“标题”的语义等价物。

FIELDSET元素允许作者对主题相关的控件进行分组

这意味着fieldset应该将几个表单控件组合在一起 - 而不只是一对<input>和<legend>。

事实上，<div>，<p>或<li> s非常适合<input> + <legend>对的容器。

场地集和传说

5 个答案: