Skip to main content

select (HTML element)

By Adam Roberts

HTML & CSS

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Description

The select form control is a container for a series of option elements that display in the browser as a pull-down menu (that is, a drop-down list). Unless you use the multiple attribute, the control will allow the user to pick just one item from the list of options that’s generated by the contents of the nested option elements. The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser). If there isn’t enough room on the page for the list to display below the control, it will open up above it. The below image shows and expanded select list in Firefox.

select-expanded

Example

This example shows a
very simple select element:

<form>
  <label for="favoritefood">Favorite food</label>
  <select name="favoritefood" id="favoritefood">
    <option>Cheese</option>
    <option>Egg</option>
    <option>Cabbage</option>
    ⋮
  </select>
</form>

Use This For…

This element is used to allow visitors to make selections from a long list of items. The alternative approach would involve the use of radio input selections, but this would require all the options to be displayed on the page at once; select controls generally display in a smaller amount of page real estate.

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!


Google, Netflix and ILM are Python users. Maybe you should too?