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.
表格是如此有用，以至于HTMLeven 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 closingtag. Nested in this tag is at least onetag, which represents an option in the dropdown. Here’s what a select element looks like in HTML:
See the PenHTML Select Exampleby Christina Perricone (@hubspot) onCodePen.
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 aelement containing text to introduce the select element. While thetag isn’t technically required (you could just as easily use aor aheading tagfor this purpose) it’s recommended for good accessibility. Theelement tells assistive technologies that the text inside should be associated with the proceeding dropdown.contains one attribute,for, whose value should be theidof the associatedelement.
Next is theelement itself, whose opening tag contains two attributes. First, thenameattribute names the dropdown element, which is necessary for collecting submissions. When the user’s form response is sent to the collecting server, the value ofnamewill be paired with the response that the user selects. Second, theid attributeinsidepairs the select element with the prior label element.
We have threetags nested in thetag, one for each list item. Eachhas avalueattribute, 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 thatshirtsis thenameof the select element).
HTML Select Attributes
The select element acceptsHTML global attributes, and also has several of its own attributes to change how it works. These attributes are:
autocomplete
Theautocomplete attributeenables a browser’s autofill function to select an option from the dropdown for the user.
autofocus
If theautofocusattribute is included in atag, the user’s browser will automatically focus on the select element on page load.
disabled
When added to thetag, thedisabled属性关闭整个下拉。用户cannot interact with it or select a response.
See the PenHTML Select: disabledby Christina Perricone (@hubspot) onCodePen.
Thedisabledattribute can also be put inside antag to turn off an item in the dropdown.
See the PenHTML Select: disabled attributeby Christina Perricone (@hubspot) onCodePen.
form
Theformattribute associates atag with a页面上的元素。此属性对于放置一个很有用tag outside of ain the HTML. The value of theformattribute is theidof the form it belongs to.
multiple
By default, the select element only allows one option to be selected. Themultipleattribute 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 thectrlorshiftkey on Windows, or thecommandorshiftkey on macOS.
See the PenHTML Select: multiple attributeby Christina Perricone (@hubspot) onCodePen.
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, thename属性分配发送下拉一个名称to the server on form submission. If you don’t include this attribute, users’ responses won’t be sent to the server.
required
When therequiredattribute is included in, users must select a response from the dropdown list before submitting the form.
size
If yourallows for multiple responses, thesizeattribute sets how many rows of responses are visible without scrolling. Here, I’ve set three rows to be displayed.
See the PenHTML Select: size attributeby Christina Perricone (@hubspot) onCodePen.
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
automatically selects the firstnested inside it. If you want to set a different item as the default option, add theselectedattribute to the desiredtag. Below, I’ve made the second option the default response.
See the PenHTML Select: selected attributeby Christina Perricone (@hubspot) onCodePen.
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 anelement, and add both thedisabledandselectedattributes to this element.
See the PenHTML Select: placeholderby Christina Perricone (@hubspot) onCodePen.
Group HTML select Items
You can also separate response items into groups, which comes in handy for particularly large dropdowns. Nest(option group) tags inside your maintag, one for each group. Assign alabelattribute to eachfor the group name. Then, nesttags inside yourtags.
See the PenHTML Select: groupsby Christina Perricone (@hubspot) onCodePen.
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.tags nested inside thetag 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 PenHTML Select: forms 1by Christina Perricone (@hubspot) onCodePen.
You can also place aelement outside of atag and associate it with that form using theformattribute, like so:
See the PenHTML Select: forms 2by Christina Perricone (@hubspot) onCodePen.
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.
Originally published Jun 9, 2021 7:00:00 AM, updated August 23 2021
Topics:
HTMLRelated Articles
![How to Make a Checkbox in HTML [+Examples]](http://www.eigoj.com/hubfs/Junior%20developer%20adding%20HTML%20checkboxes%20to%20web%20forms.jpg)