Optgroup, the forgotten tag

Many web designers can forget about some more infrequently used html notation; however this notation still has a purpose and can be quite useful. I have seen some go through extra effort to try and achieve what can be done with one simple tag. Dropdown option groups are one of these sort of things.

There are those who will toil to add spaces, dashes, special styles to try and group their items in a dropdown. When all they really needed to do was surround each group of options with an optgroup tag.

The syntax is simple:

Type:
<select>
<optgroup label="Admin">

<option>Editor</option>
<option>Publisher</option>

</optgroup>
<optgroup label="User">

<option>Expert</option>
<option>Fan</option>

</optgroup>
</select>

Using the above, you will see the output in your browser:

optgroup result

It is as simple as that.

Comments

Be the first to leave a comment on this post.

Leave a comment

To leave a comment, please log in / sign up