html - 使用它们进行交互是否违反输入标签语义？

Question

我一直在忙着做一个 interactive tab layout只使用 CSS，有人告诉我这不是 <input> 的预期语义。标签。现在，我知道 HTML5 比以前的 HTML 版本更注重语义，所以我想知道，是否有一些东西对输入语义做了类似以下的事情:

<label for="toggleTab" class="togglelabel">Toggle tab</label>
<input type="checkbox" id="toggleTab" class="toggleinput">
<div class="toggletab">Look at this thing hide and show</div>

CSS:

.toggletab, .togglelabel {border:1px solid #AAA;display:block;}
.toggleinput, .toggletab {display:none;}
.toggleinput:checked + .toggletab {display:block;}

( demo )

标准 ^{[1] [2]} 两者说的是同一件事:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

所以对我来说，这似乎确实违背了输入标签的用途(因为这与数据无关，而只是向用户显示或不显示某些内容)。

当然，我的后续问题是，如果根据标准这确实不是应该使用的输入标签，那么违反语义标准是否不好？

Answer 1

从结构上来说，这将是相当困难的。 Input 需要放在 form 元素中，如果你打算在整个页面中使用这些，你的大部分页面将被包装成一个巨大的 form ，可能会嵌套 form，用于搜索栏、用户输入等。

正如您的引述所说:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

您建议的控件不是用于编辑数据的控件，它用于添加图形用户功能。如果您要将输入绑定(bind)到表单，无论是通过将输入内嵌到表单中，还是按照您的评论建议使用 @form 属性，那么该 表单的语义到底是什么？如果没有任何操作，它将没有可发布到的站点，并且如果可访问的浏览器尝试以不同的方式呈现该表单的元素，它将没有语义内容。

对于那种隐藏/显示切换功能，我建议改为使用 a 链接并挂起一些 javascript。如前所述:

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

在此上下文中，超链接不排除使用 javascript 作为页面上的作用力，如果这样做，大多数页面将不符合规范。 definition of hyperlink 中建议的第一种链接支持这一点。建议该链接可以“用于扩充当前文档”。

作为旁注，在可访问的浏览器中，像这样的输入可能会以与您期望的不同的方式呈现或呈现。每个表单都可能被拉出到可能的数据编辑选项列表中，这不符合用户可能期望的语义。