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.
HTML Code
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.
HTML Code
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.