如何爲語義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 =複選框。

在上述情況下，您有多個同名的複選框。 當多個複選框具有相同的名稱時，表單將向請求中的服務器發送值爲 的組。注意：只有 複選框的值將被髮送到服務器。

理想情況下，這些用於允許多個選擇問題，其中允許多於一個答案的 。與單選按鈕相反，其中只有 答案是允許的選項之一。