使用它们进行交互是否反对输入标记语义？

Question

我一直在忙着使用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;}

(演示)

标准^{[1] [2]}都说同样的话:

该input元素表示类型化的数据字段中,通常用表单控件以允许用户编辑的数据.

所以对我而言,这似乎确实与输入标签应该用于什么(因为这与数据无关,而只是向用户显示某些事物).

然后当然我的后续问题是,如果确实不是根据标准应该使用什么输入标签,那么违背语义标准是不是很糟糕？

Answer 1

从结构上来说，这将是相当困难的。Inputs 需要进入元素内部form，如果您要在整个页面上使用这些元素，则页面的大部分内容将被包装为一个巨大的 s form，可能会嵌套forms ，用于搜索栏、用户输入等。

正如你的引言所说：

该input元素表示一个类型化的数据字段，通常带有一个表单控件以允许用户编辑数据。

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

对于隐藏/显示切换功能，我建议使用链接a并在其上挂一些 JavaScript。就像声明的那样：

如果 a 元素具有 href 属性，则它表示由其内容标记的超链接（超文本锚点）。

在这种情况下，超链接并不排除使用 javascript 作为页面上的作用力，如果这样做，大多数页面将不符合规范。这得到了超链接定义中建议的第一种链接的支持，表明该链接可以“用于扩充当前文档”。

附带说明一下，在可访问的浏览器中，input类似的内容可能会以与您期望的方式不同的方式呈现或呈现。每个表单都可能被拉出到可能的数据编辑选项列表中，这不符合用户可能期望的语义。