🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML select Tag

Reading time 3 min
Published Jun 29, 2017
Updated Sep 11, 2019

HTML select: Main Tips

  • HTML select tags define a select element - a form control with a menu of options.
  • Each option is wrapped in <option> tags.
  • You must include both starting and ending select tags.
  • Not only HTML select tags have eight tag-specific attributes, they also support global ones.

Usage of HTML select Tags

Wrapping content with HTML select tags creates a dropdown list with one or more options to select:

Example
<select name="housepets">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="llama">Llama</option>
  <option value="rabbit">Rabbit</option>
  <option value="animal">Animal</option>
</select>

It is mostly used within a <form> element to collect user input.

HTML select element contains <option> elements that define menu options. Each of them should have their own value as an attribute. If it is not included, the text content of the element is taken as the value.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Mostly Used select Tag Attributes

There are eight tag-specific attributes commonly used with HTML select tags.

autocomplete specifies if the browser can autofill field values:

Example
<select name="holiday_destination" autocomplete="off">
  <option value="bra">Sao Paulo</option>
  <option value="cub">Havana</option>
  <option value="fji">Suva</option>
  <option value="jam">Kingston</option>
  <option value="mdv">Male</option>
</select>

autofocus focuses the drop-down list automatically when the page loads:

Example
<select name="vehicles" autofocus>
  <option value="car">Car</option>
  <option value="bike">Bike</option>
  <option value="bicycle">Bicycle</option>
</select>

Note: only one form element can have autofocus in a single page.

disabled disables the drop-down list:

Example
<select name="mediatype" disabled>
  <option value="mp4">MP4</option>
  <option value="mov">MOV</option>
  <option value="flv">FLV</option>
</select>

form links the selected element to one or more forms:

Example
<form action="process.php" id="language">
  Primary Language: <input type="text" name="lang">
  <input type="submit">
</form>

<select name="expertise" form="language">
  <option value="speakwrite">Speak/Write</option>
  <option value="speak">Speak</option>
  <option value="write">Write</option>
</select>

multiple enables selection of multiple options at once:

Example
<select name="languages" multiple>
  <option value="english">English</option>
  <option value="french">French</option>
  <option value="russian">Russian</option>
  <option value="tamil">Tamil</option>
  <option value="spanish">Spanish</option>
</select>

Note: most browsers will replace the dropdown menu with a scrolling list box if you enable multiple.

name defines the name for the HTML dropdown menu:

Example
<select name="department">
  <option value="parks">Parks</option>
  <option value="rnd">R&D</option>
  <option value="finance">Finance</option>
  <option value="rec">Recreational</option>
  <option value="purchasing">Purchasing</option>
</select>

required makes the selection of an option within a list mandatory before submitting the form:

Example
<select name="pet" required>
  <option value="lama">Lama</option>
  <option value="racoon">Racoon</option>
  <option value="mouse">Mouse</option>
<input type="submit">
</select>

If the menu is presented by the browser as a scrolling list box, size defines the number of options to be displayed:

Example
<select name="meals" size="2">
  <option value="eggs">Eggs</option>
  <option value="salad">Salad</option>
  <option value="bread">Bread</option>
  <option value="ham">Ham</option>
</select>

Default Option vs. Placeholder

In the examples we reviewed, one option was always shown from the start. When using HTML select, default option is usually the first of the selection. If you wish to choose a different option as HTML select default value, you need to add the selected keyword:

Example
<select name="lunch">
  <option value="chic">Chicken pot pie</option>
  <option value="beef">Beef stew</option>
  <option value="pizza" selected>Pepperoni pizza</option>
  <option value="jelly">Jelly beans</option>
</select>

If you don't want any of the options to show as default, you can also create an HTML select placeholder. To do that, use both selected and disabled on an option that has no value:

Example
<select name="dessert">
  <option value="" disabled selected>Please choose one</option>
  <option value="choc">Chocolate cake</option>
  <option value="mango">Mango sorbet</option>
  <option value="car">Caramel pudding</option>
  <option value="pick">Pickles</option>
</select>

Browser Support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile Browser Support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All