如何在语义 html 中为搜索结果设置过滤器选项

Question

有没有人有在搜索结果旁边设置语义上有意义的过滤器选项的经验？ 我的意思是：

<ol>
<li>
    <label for=""><input type="checkbox" name="filter-by-name" value="pete"> Pete</label>
</li>
<li>
    <label for=""><input type="checkbox" name="filter-by-name" value="Jakov">Jakov</label>
</li>

或者我应该按照以下方式做更多的事情：

<ol role="filter">
<li>
    <label for=""><input type="checkbox" name="filter-by-name" value="pete"> Pete</label>
</li>

Answer 1

由于它们是表单控件，因此要具有语义，它们需要使用正确的标记。

基于w3.org上的分组控制部分

<fieldset>
    <legend>I want to receive</legend>
    <div>
        <input type="checkbox" name="newsletter" id="check_1">
        <label for="check_1">The weekly newsletter</label>
    </div>
    […]
</fieldset>

你的例子应该是：

<fieldset>
    <legend>Filter by:</legend>
    <div>
        <input type="checkbox" name="newsletter" id="pete">
        <label for="pete">Pete</label>
    </div>
    […]
</fieldset>

关于name 属性，这是您的偏好，来自What is the purpose of the name attribute in a checkbox input element? 上的答案

不要因为 name="checkbox" 而感到困惑。它可以更合乎逻辑 是 name="drink" 和 type=checkbox。

在上述情况下，您有多个具有相同名称的复选框。 当多个复选框名称相同时，表单将发送一个组 请求中向服务器发送的值。注意：只有值 选中的复选框将被发送到服务器。

理想情况下，这些用于允许选择题，其中更多 一个答案是允许的。与单选按钮相反，只有 选项中允许有一个答案。