How to Create a List Box in HTML


In this tutorial, we will show you how you can create a list box using HTML.

Below is a list box, which is very common in forms on the web, such as when a user needs to select one or more options from a list of options.


The HTML Code to create a list box is:

To create a list box, the select tag is used. The select tag contains 2 attributes, name and size. The name attribute is the any name that you decide to call the list box. So, for example, if it is a list box holding credit card options, the name attribute might be "credit_cards". The other attribute is the size attribute. This is a numerical value which shows how many options the list box will contain. In the above example, there are 3 choices, Visa, Mastercard, and American Express. Therefore, the size attribute is 3.


The HTML code to create the list box above is,

How to Create a List Box Where a User Can Select Multiple Options

The type of list box which we have created above can only have one option selected at once, but it is very easy to modify it to allow for mulitiple options to be selected, if that is what is desired.

To create a list box that can have multiple options selected, we add the line multiple="multiple" to the select tag. We also change the name attribute to an array by adding [ ] to the end of the name.

Example of List Box Where Multiple Options Can Be Selected

This is the same list box as above, except now multiple options can be selected and chosen instead of only one.

HTML Comment Box is loading comments...