HTML 5 drop down menus. Awesome example in 2021

The HTML 5 drop down menus lists is another way to give the user the opportunity to choose just one of a series of choices. When would you use the HTML 5 drop down menus list? As the first item on the list is normally the default choice, using the drop down list can be a good choice when you know that a specific option is often chosen over the other options. The drop down list should only be used when the user has to choose between the options as the HTML 5 drop down menus list does not give the user opportunity not to choose anything (such as radio-buttons do).

The drop down lists are defined by the <select> element and the values being sent to you (either via email or to your database) are defined by the value attribute.

<form method="post">
	<select name="Icecream Flavours">
		<option value="double chocolate">Double Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry">Strawberry</option>
		<option value="caramel">Caramel</option>
	</select>
</form>

If you want another item to be selected instead of the first one on the list, you use the selected attribute. HTML5 allows you to shorten your markup when using the selected attribute, so instead of writing

HTML 5 drop down menus

<option value="strawberry" selected="selected">Strawberry</option>

You can write it like this:

<form>
	<select name="Icecream Flavours">
		<option value="double chocolate">Double Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry" selected>Strawberry</option>
		<option value="caramel">Caramel</option>
	</select>
</form>
HTML 5 drop down menus
HTML 5 drop down menus

Example

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Definition and Usage

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

The id attribute is needed to associate the drop-down list with a label.

The <option> tags inside the <select> element defines the available options in the drop-down list.

Tip: Always add the <label> tag for best accessibility practices!

Attributes

AttributeValueDescription
autofocusautofocusSpecifies that the drop-down list should automatically get focus when the page loads
disableddisabledSpecifies that a drop-down list should be disabled
formform_idDefines which form the drop-down list belongs to
multiplemultipleSpecifies that multiple options can be selected at once
namenameDefines a name for the drop-down list
requiredrequiredSpecifies that the user is required to select a value before submitting the form
sizenumberDefines the number of visible options in a drop-down list

Global Attributes

The <select> tag also supports the Global Attributes in HTML.

Event Attributes

The <select> tag also supports the Event Attributes in HTML.

More Examples

Use <select> with <optgroup> tags:

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

The drop-down we`re going to build is hided and revealed on hover using only CSS. Using the new CSS3 transitions features, HTML 5 drop down menus we`ll animate the hover states and drop-downs. These effects act exactly like the javascript effects you`re used to use. The structure of the files is simple. You need an index.html and a style.css file in which to store the CSS styles.

Pure CSS3 drop-down menu with no JavaScript code can also be found here if you want to keep the whole website code to minimal. Long dropdown menus can break the user experience so i would suggest to stick with simple and small designs if you are a startup business. A dropdown list to scroll through huge amount of categories, HTML 5 drop down menus tags, products are also available for free in this compilation of freebie downloads. A basic knowledge on HTML will let you easily implement these code snippets on your new website without much hassle.

Now the menu is stylized and the developing process if finished. The menu is ready to be used in your own projects. Making use of CSS3, there are, of course, IE compatibility issues with the menu. The smooth effects implemented with CSS3 transitions doesn`t work in IE, but the menu is still functional and can be a reliable alternative to javascript menus.

Leave a Reply