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.
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.
Take this quiz to get offers and scholarships from top bootcamps and online schools!
See your matchesFor 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:
<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.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Read more