How to Create Multi-Select Select Box in HTML?

In HTML, the <select> element is used for selecting a single option in a list of options:

<select>
    <option value="rock" selected>Rock</option>
    <option value="pop" selected>Pop</option>
    <option value="country">Country</option>
    <option value="hip-hop">Hip-Hop</option>
    <!-- ... -->
</select>

However, if you specify the "multiple" attribute on the HTML <select> element, then it will create a multi-select options list:

<select multiple>
    <option value="rock" selected>Rock</option>
    <option value="pop" selected>Pop</option>
    <option value="country">Country</option>
    <option value="hip-hop">Hip-Hop</option>
    <!-- ... -->
</select>

With the multiple attribute specified on the <select> element, users will be allowed to select multiple options. For example, on a desktop browser, this is typically doable by holding down the SHIFT, CTRL or CMD key on the keyboard and selecting multiple options, while on mobile the same is achieved by tapping on multiple values.

Please note that some server-side languages might require that you suffix the name attribute of the multi-select element with square brackets ([]). This is so that they're able to pick up all selected values of the multi-select on the server-side, when they're submitted.