如何为语义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 =“复选框”而感到困惑。它可能更符合逻辑 是name =“drink”和type =复选框。

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

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