HTML Select: A How-To Guide

The HTML <select> tag creates a list from which a user can select one or multiple options. A <select> tag should contain one or more <option> tags which represent the choices from which a user can select.

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 creates a form element that provides a list of options from which the user can select one or multiple. The <option> element specifies the options which appear in a selection box.

This tutorial will discuss how to use the HTML <select> tag. We’ll refer to an example to help you get started using this tag.

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.

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 HTML <select> tag creates a list from which a user can select one or multiple options. An <option> element states an individual option in the <select> tag.

The <select> tag creates a form field which, when clicked, displays a drop-down list with options from which a user can choose.

The syntax for the <select> tag is as follows:

<select></select>

By itself, the <select> tag has no options. We need to use the <option> tag 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.

Why Should You Use the <select> HTML Tag?

Using a <select> tag is beneficial when you want to restrict the values a user can enter into a form field. Here are a few examples where the <select> tag may be useful to:

• Provide a user a list of countries from which to select.
• Give a user a list of colors available for a product from which to select.
• To allow a user to select the quantity of a product they want to buy (i.e. between 1 and 10).

In these cases, the options are limited. Using a dropdown menu means you can get a response that makes sense to your code. This is because the user cannot input any value they want, like they could on a select field, which you may not anticipate.

HTML <select> Example

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 HTML 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:

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. This attribute 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.

We can let our user select multiple options in the list using the multiple attribute:

<select name="breadType" multiple>
  	<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>

The multiple attribute is a keyword. This means you do not need to use an equals sign to assign a value to the attribute.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

To select multiple values, hold down the Ctrl button on Windows or the Cmd button on Mac.

HTML <select> Tag Attributes

The <select> tag has a few specific HTML attributes which can be applied to the tag. These are as follows:

Conclusion

The HTML <select> element creates a form field that displays a list of default values. A user can choose one or multiple values from the list. <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, how you can use the <select> tag to create a drop-down list form field in HTML.

Do you want to learn more about HTML programming? Check out our How to Learn HTML guide. This guide contains top tips on how to learn HTML and a list of learning resources to help you build your knowledge.