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.

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>

The <select> tag creates a dropdown list. You can't put html links inside a dropdown.

However, there are JavaScript libraries that provide similar functionality. Here is one example: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

I'm sure someone can make a better answer than this with Jquery where the change in the dropdown will lead to a new page (good for navigation control on a navbar).

<td><select name="forma" id='SelectOption'>
            <option value="Home"><a href="home.php">Home</a></option>
            <option value="Contact"><a href="contact.php">Contact</a></option>
            <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
        </select></td><td>

document.getElementById('SelectOption').addEventListener('change', function() {
  val = $( "#SelectOption" ).val();
    
  console.log(val)
  if(val === 'Home') {
    window.open('home.php','_blank');
    }
  if(val === 'Contact') {
    window.open('contact.php', '_blank');
  }
  if (val === 'Sitemap') {
    window.open('sitemap.php', '_blank');
  }
});