How to use the HTML select tag with the multiple attribute

Introduction

The HTML form <select> element is a single selection element by default. When filling out a form, it prompts users to select a single option from a list of options provided.

What does this imply?

This simply means that that the <select> form element will only specify that you select and choose a single option. It does not ask you to select more than a single option from its option list.

However, situations may arise where you might need the user to select multiple choices from the <select> element, just like a <checkbox> element, which you might not want to use in that particular instance.

Then what can you do?

In such cases, all you have to do is use the <select> tag with the multiple attribute, and then the user will have to hold down the ctrl key on Windows, or its alternative for other OS, while making their selections. This is just like when you want to make multiple highlights and copies on your system.

The syntax is:

<select multiple>

Code example for multiple

Explanation

A form <select> element was created with a different options value, from which we want the users to make multiple selections. Unlike the normal select, which only lets you choose a single option, the output of the code above can make more than one selection.

To drive home the point about differences, let’s see the code for a simple <select>.

Code example for single

Free Resources