Selection boxes are an important part of many web forms. Selection boxes allow you to accept user input and limit the options a user can choose to those you have specified.
The HTML <select> tag allows you to create a form element that provides a list of options from which the user can select one or multiple. The <option> element is used to specify the options which appear in a selection box.
Take this quiz to get offers and scholarships from top bootcamps and online schools!
This tutorial will discuss, with reference, the basics of the HTML <select> tag, and how you can use it to create selection boxes. By the end of this tutorial, you’ll be an expert at using the <select> tag to create selection boxes in HTML.
HTML Forms
Forms are an essential part of many websites, and allow you to accept data from a user which you can process on your website.
For instance, if you’re designing a website for a coffee shop, you may want to create a form that accepts feedback from customers. Or if you’re designing a website for a local bakery, you may want to create a form that allows the bakery to accept online orders from its customers.
In HTML, the <form> tag is used to declare a form. Then, you can use HTML elements like <input> and select to define the data the form will collect. For this tutorial, we’re going to focus on the <select> tag, and how it can be used to collect data in a form.
To learn more about HTML forms, read our beginner’s guide to HTML forms.
HTML <select> Tag
The <select> tag defines a selection list from which a user can choose one or more items.
The <select> tag creates a form field which, when clicked, displays a drop-down list with options from which a user can choose. Using a <select> tag is beneficial when you want to restrict the values a user can enter into a form field.
The basic syntax for the <select> tag is as follows:
<select></select>
By itself, the <select> tag has no options. That’s because we need to use another tag, <option>, to define the options that appear in a <select> tag. Here’s the syntax for the <option> tag:
<select> <option value="optionOne">Option One</option> </select>
The <option> tag appears in a <select> tag. In this example, we also specified the value attribute with our <select> tag. This is used to store the data value that will be submitted to the server if the user selects a particular option. In this case, if a user selects Option One from the list, optionOne will be sent to the server.
Each <option> tag should have a specified value attribute.
The HTML <select> tag is supported by all major modern browsers.
HTML <select> Example
Now we’re familiar with the syntax of the <select> tag, we can start exploring an example of the <select> tag in action.
Suppose we are creating a web form for a local bakery. We’ve been asked to create a form that allows a user to order bread. This form should present a drop-down list of breads from which a user can choose a bread. The options that should appear are:
- Plain White
- Plain Brown
- Whole Grain
- Sourdough
By default, Plain White should be selected.
To create this drop down menu, we could use the following code:
FREE Python Fundamentals Workshop
Use the calendar below to reserve your seat.
Demand for people who know Python is soaring! In this free online workshop, learn the fundamentals of Python and meet other Career Karma members who are building with Python.
<select name="breadType"> <option value="plainWhite" selected>Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
Our code returns:
Let’s break down our code. First, we use a <select> tag to define our selection list. We specify the name attribute, which specifies the name of the select form control, and we assign the attribute the value breadType.
Next, we use four <option> tags to create the list of options that should be presented to the user. Each of these <option> tags has a value attribute specified, which stores the value of the option that will be submitted to the server when the user submits the form. The first <option> tag—whose label text displays Plain White—also has a selected attribute specified. This makes Plain White the default selected option.
HTML <select> Tag Attributes
The <select> tag has a few specific HTML attributes which can be applied to the tag. These are as follows:
| Attribute | Value | Description |
| autofocus | autofocus | Gives the drop-down list focus when the document is loaded. |
| disabled | disabled | Indicates that the drop-down list is disabled (so a user cannot submit a value using the list) |
| form | form_id | Specifies the form with which a <select> element is tied. |
| multiple | multiple | Allows users to select multiple options. |
| name | name | Specifies the name for the element. |
| required | required | Indicates that the form field must be filled out before being submitted. |
| size | number | Specifies the number of options that should be shown to the user. |
Conclusion
The HTML <select> element allows you to create a form field that displays a list of default values from which a user can choose one or multiple. <select> fields are useful when you want a user to select a value from a predefined list of potential values.
This tutorial discussed, with reference to an example, the basics of the <select> and <option> tags and how you can use these tags to create a drop-down list form field in HTML. Now you’re ready to start using the HTML <select> and <option> tags like an expert.
