using href links inside <option> tag
UPDATE 2022: This answer is fine but really in 2022 we shouldn't be doing this anymore!
UPDATE (May 2020): Someone asked in the comments why I wouldn't advocate this solution. I guess it's a question of semantics. I'd rather my users navigate using <a>
and kept <select>
for making form selections because HTML elements have semantic meeting and they have a purpose, anchors
take you places, <select>
are for picking things from lists.
Consider, if you are viewing a page with a non-traditional browser (a non graphical browser or screen reader or the page is accessed programmatically, or JavaScript is disabled) what then is the "meaning" or the "intent" of this <select>
you have used for navigation? It is saying "please pick a page name" and not a lot else, certainly nothing about navigating. The easy response to this is well i know that my users will be using IE or whatever so shrug
but this kinda misses the point of semantic importance.
Whereas a funky drop-down UI element made of suitable layout elements (and some js) containing some regular anchors still retains it intent even if the layout element is lost, "these are a bunch of links, select one and we will navigate there".
Here is an article on the misuse and abuse of <select>
.
ORIGINAL ANSWER
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
UPDATE (Nov 2015): In this day and age if you want to have a drop menu there are plenty of arguably better ways to implement one. This answer is a direct answer to a direct question, but I don't advocate this method for public facing web sites.
Use a real dropdown menu instead: a list (ul
, li
) and links. Never misuse form elements as links.
Readers with screen readers usually scan through a automagically generated list of links – the’ll miss these important information. Many keyboard navigation systems (e.g. JAWS, Opera) offer different keyboard shortcuts for links and form elements.
If you still cannot drop the idea of a select
don’t use the onchange
handler at least. This is a real pain for keyboard users, it makes your third item nearly inaccessible.
You cant use href tags within option tags. You will need javascript to do so.
<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>
<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>