How to set up filter options for search results in semantic html

Question

does anyone have experience setting up semantically meaningful filter option alongside search results? I mean something like:

<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>

or should I do something more along the lines of:

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

score 2 · Answer 1 · edited May 23 '17 at 12:15

As they are form controls, to be semantic they would need to use the correct markup.

Based on the Grouping Controls section on 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>

Your example should be:

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

In regards to the name attribute this is your preference, from an answer on What is the purpose of the name attribute in a checkbox input element?

Dont be confused because of name="checkbox". It could more logically be name="drink" and type=checkbox.

In the above case, you have multiple checkboxes with the same name. When several checkboxes have the same name, the form will send a group of values to the server in the request. Note: only the values of the checked checkboxes will be sent to the server.

Ideally these are used to allow multiple choice questions where more than one answer is allowed. As opposed to radio buttons, where only one answer is allowed among the options.

How to set up filter options for search results in semantic html

1 Answers1