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.
What is the HTML select element?
In HTML, the select element is a form element that creates a dropdown list of options, from which the user can select one (or multiple if allowed). The select element is usually implemented inside HTML forms for gathering user submissions, and is best for selecting one option out of many while preserving space on the page.
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:
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:
The autocomplete attribute enables a browser’s autofill function to select an option from the dropdown for the user.
If the autofocus attribute is included in a <select> tag, the user’s browser will automatically focus on the select element on page load.
When added to the <select> tag, the disabled attribute turns off the whole dropdown. The user cannot interact with it or select a response.
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.
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.
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.
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.
When the required attribute is included in <select>, users must select a response from the dropdown list before submitting the form.
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.
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.
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.
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:
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.
Originally published Jun 9, 2021 7:00:00 AM, updated June 09 2021