HTML select tag

The select in HTML is the way to show users pre-defined values in a dropdown. For example, giving a user option to select a title from the Mr, Miss, Mrs etc. options. The HTML dropdown is used in forms.

The tag used to create dropdown in HTML is <select> with <option>. So basically, you are enabling visitors to select from the available options. The basic syntax of creating HTML dropdown is:

<select>

 <option value=”some value”>Visible text</option>

<option value=”some value”>Visible text</option>

……..

</select>

Note: The select tag is supported by all major browsers.

A few examples with code of select option

A select selected example

HTML dropdown with disabled attribute example

CSS styled select dropdown

Basic example of using HTML select-option

The example below shows how to create a dropdown with <select> and <option> tags.

Experience this online

Select tag attributes

The HTML select has a few attributes as follows:

  • name: Sets the name of the dropdown to identify it
  • required: is used to make it mandatory before submitting a form. This is HTML 5 attribute.
  • multiple: To allows users selecting multiple values, use the multiple attribute (see example below).
  • disabled: To disable a dropdown
  • autofocus: To make dropdown focused as the webpage loads, use autofocus attribute.

HTML option tag

The option tag is used with the <select> tag. The <option> adds available options in HTML dropdown. After the <select> tag, you have to use the <option> to create a selectable value. The <option> tag has a few important attributes as follows:

  • value: As such the select tag is used in forms that are submitted with the given information. You can get the value of selected option in dropdown by using value attribute in server or client side script.
  • selected: The selected attribute sets the default option visible as a web page is loads. See example below.
  • disabled: Disables the option in a dropdown list (see example below)

HTML select selected example

You may need to show an option in select as selected as the web page loads, which is not the first option. The HTML select default value is the first option as web page loads. In order to make an option as selected, use the selected attribute of the <option> tag as shown below:

Experience this online

As you can see, the Red which is the third option in the dropdown is pre-selected.

HTML dropdown with disabled attribute example

The example below shows using the disabled attribute of the <option> tag. The disabled option is not selectable by the user, though visible.

Experience this online

The Yellow is visible but not selectable.

An example of using multiple attribute

By default, a user can select only one option in a dropdown list. In order to enable users select multiple options, you can use multiple attribute of the <select> tag. To select multiple values, users has to hold the Ctrl key in windows. See the following example:

Experience this online

Styling select with CSS

You can apply the power of CSS to style dropdown to blend it with the other form or web page elements. You can apply the class(es) of CSS to the <select> tag. You can also use <style> attribute in the <select> tag to apply CSS properties. The CSS also applies to options. See both examples below.

CSS select example with class name

The following example uses CSS class to specify the style of a dropdown.

Experience this online

Select CSS example with style attribute

The following example applies CSS properties by using Style attribute in the <select> tag.

Experience this online

Also see HTML Forms