What Is the HTML Select Element? [+ How to Make One]

If you run a business website, you’ll probably want to collect visitor responses through forms. Forms are an excellent way to gather feedback, order information, personal information, or any other type of data your visitors can provide.

Forms are so useful that HTML even has a collection of special elements for collecting responses on the front-end. So, if you’re building a site from scratch or designing a custom feedback page, you can build forms to your exact specifications.

One form element you’ll encounter often is the HTML “select” element, which adds a dropdown form field to a page. There’s a good chance you’ve encountered a select element on a website recently — they’re intuitive, accessible, and a staple of form design. In this post, we’ll show you how to make one in HTML.

The HTML select element consists of an opening and closing <select> tag. Nested in this tag is at least one <option> tag, which represents an option in the dropdown. Here’s what a select element looks like in HTML:

See the Pen HTML Select Example by Christina Perricone (@hubspot) on CodePen.

As you can see, this code creates a simple HTML dropdown menu. By default, the first option in the menu appears selected, and clicking the element reveals all options. Let’s go through each part of this code example in more detail.

First, we have a <label> element containing text to introduce the select element. While the <label> tag isn’t technically required (you could just as easily use a <p> or a heading tag for this purpose) it’s recommended for good accessibility. The <label> element tells assistive technologies that the text inside should be associated with the proceeding dropdown. <label> contains one attribute, for, whose value should be the id of the associated <select> element.

Next is the <select> element itself, whose opening tag contains two attributes. First, the name attribute names the dropdown element, which is necessary for collecting submissions. When the user’s form response is sent to the collecting server, the value of name will be paired with the response that the user selects. Second, the id attribute inside <select> pairs the select element with the prior label element.

We have three <option> tags nested in the <select> tag, one for each list item. Each <option> has a value attribute, which specifies the value sent to the collecting server when the form is submitted. For example, if you choose “Blue” from the list above, the page will send the value “shirts=blue” (remember that shirts is the name of the select element).

HTML Select Attributes

The select element accepts HTML global attributes, and also has several of its own attributes to change how it works. These attributes are:

autocomplete

The autocomplete attribute enables a browser’s autofill function to select an option from the dropdown for the user.

autofocus

If the autofocus attribute is included in a <select> tag, the user’s browser will automatically focus on the select element on page load.

disabled

When added to the <select> tag, the disabled attribute turns off the whole dropdown. The user cannot interact with it or select a response.

See the Pen HTML Select: disabled by Christina Perricone (@hubspot) on CodePen.

The disabled attribute can also be put inside an <option> tag to turn off an item in the dropdown.

See the Pen HTML Select: disabled attribute by Christina Perricone (@hubspot) on CodePen.

form

The form attribute associates a <select> tag with a <form> element on the page. This attribute is useful for placing a <select> tag outside of a <form> in the HTML. The value of the form attribute is the id of the form it belongs to.

multiple

By default, the select element only allows one option to be selected. The multiple attribute lets the user select multiple items. It also displays all options in a scrollable list rather than a dropdown.

To select multiple items, click your items while holding the ctrl or shift key on Windows, or the command or shift key on macOS.

See the Pen HTML Select: multiple attribute by Christina Perricone (@hubspot) on CodePen.

Note that this interface choice might not be the most intuitive for all users and has a relatively high interaction cost (as users must click while holding down a key to choose multiple responses). A better alternative would be to use checkboxes when letting users select one or multiple items from a list.

name

As mentioned, the name attribute assigns the dropdown a name that is sent to the server on form submission. If you don’t include this attribute, users’ responses won’t be sent to the server.

required

When the required attribute is included in <select>, users must select a response from the dropdown list before submitting the form.

size

If your <select> allows for multiple responses, the size attribute sets how many rows of responses are visible without scrolling. Here, I’ve set three rows to be displayed.

See the Pen HTML Select: size attribute by Christina Perricone (@hubspot) on CodePen.

This video recaps everything you need to know about the HTML select element.

Other HTML select Tricks

Beyond attributes, here are some other ways you can customize your dropdowns in ways you’ve probably seen before.

Change the HTML select Default Option

<input> automatically selects the first <option> nested inside it. If you want to set a different item as the default option, add the selected attribute to the desired <option> tag. Below, I’ve made the second option the default response.

See the Pen HTML Select: selected attribute by Christina Perricone (@hubspot) on CodePen.

Add Placeholder Text to HTML select

A placeholder prevents a list item from being selected by default — instead, you can make the display text a prompt, such as “Choose one…”, etc.

To add a placeholder, write your placeholder text as an <option> element, and add both the disabled and selected attributes to this element.

See the Pen HTML Select: placeholder by Christina Perricone (@hubspot) on CodePen.

Group HTML select Items

You can also separate response items into groups, which comes in handy for particularly large dropdowns. Nest <optgroup> (option group) tags inside your main <select> tag, one for each group. Assign a label attribute to each <optgroup> for the group name. Then, nest <option> tags inside your <optgroup> tags.

See the Pen HTML Select: groups by Christina Perricone (@hubspot) on CodePen.

How to Use HTML Select in a Form

The select element is meant to be used inside an HTML form element, which lets users enter and submit responses on the front-end of your site. <select> tags nested inside the <form> tag are included in the form, and responses are sent when the user clicks the submit button. Here’s what an HTML form containing a submit element looks like:

See the Pen HTML Select: forms 1 by Christina Perricone (@hubspot) on CodePen.

You can also place a <select> element outside of a <form> tag and associate it with that form using the form attribute, like so:

See the Pen HTML Select: forms 2 by Christina Perricone (@hubspot) on CodePen.

HTML Select: An Easy Solution for Dropdowns

When you want to present options as a dropdown menu, use select — it handles all necessary functionality for you, and you can customize them with simple attributes. This element also saves space on your forms, making it great for lengthy lists (e.g., “Which country do you live in?”). Best of all, it’s easy to use, so you can start collecting responses in minutes.