usando enlaces href dentro de la etiqueta <option>

Tengo el siguiente código HTML:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

¿Cómo puedo hacer que los valores de Inicio , Contacto y Sitemap sean enlaces? Usé el siguiente código y, como esperaba, no funcionó:

<select name="forma">
    <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>

<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>

ACTUALIZACIÓN (noviembre de 2015): en la actualidad, si desea tener un menú desplegable, hay muchas formas posiblemente mejores de implementar uno. Esta respuesta es una respuesta directa a una pregunta directa, pero no defiendo este método para los sitios web públicos.

ACTUALIZACIÓN (mayo de 2020): alguien preguntó en los comentarios por qué no abogaría por esta solución. Supongo que es una cuestión de semántica. Prefiero que mis usuarios naveguen <a>y utilicen <select>para realizar selecciones de formularios porque los elementos HTML tienen una reunión semántica y tienen un propósito, anchorsllevarlos a lugares, <select>son para elegir cosas de las listas.

Considere, si está viendo una página con un navegador no tradicional (un navegador no gráfico o lector de pantalla o se accede a la página mediante programación, o JavaScript está deshabilitado), ¿cuál es el "significado" o la "intención" de esto <select>que tiene? utilizado para la navegación? Dice "elija un nombre de página" y no mucho más, ciertamente nada sobre navegar. La respuesta fácil a esto es, well i know that my users will be using IE or whatever so shrugpero esto pierde un poco el punto de importancia semántica.

Mientras que un elemento UI desplegable funky hecho de elementos de diseño adecuados (y algunos js) que contienen algunos anclajes regulares aún conserva su intención incluso si el elemento de diseño se pierde, "estos son un montón de enlaces, seleccione uno y navegaremos allí" .

Aquí hay un artículo sobre el mal uso y abuso de<select> .

No puede usar etiquetas href dentro de etiquetas opcionales. Necesitará javascript para hacerlo.

<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>

Utilice un menú desplegable real en su lugar: una lista ( ul, li) y enlaces. Nunca use mal los elementos de formulario como enlaces.

Los lectores con lectores de pantalla generalmente escanean a través de una lista de enlaces generada automáticamente, se perderán esta información importante. Muchos sistemas de navegación por teclado (por ejemplo, JAWS, Opera) ofrecen diferentes atajos de teclado para enlaces y elementos de formulario.

Si aún no puede abandonar la idea de un selectno utilice el onchangecontrolador al menos. Esto es un verdadero dolor para los usuarios de teclado, hace que su tercer elemento sea casi inaccesible.

La solución aceptada se ve bien, pero hay un caso que no puede manejar:

El evento "onchange" no se activará cuando se vuelva a seleccionar la misma opción. Entonces, se me ocurrió la siguiente mejora:

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

(No tengo suficiente reputación para comentar la respuesta de toscho).

No tengo experiencia con lectores de pantalla y estoy seguro de que sus puntos son válidos.

Sin embargo, en cuanto al uso de un teclado para manipular selecciones, es trivial seleccionar cualquier opción usando el teclado:

TAB al control

ESPACIO para abrir la lista de selección

Flechas ARRIBA o ABAJO para desplazarse al elemento de lista deseado

ENTER para seleccionar el elemento deseado

Solo en ENTER se activa el evento onchange o (JQuery .change ()).

Si bien personalmente no usaría un control de formulario para menús simples, hay muchas aplicaciones web que usan controles de formulario para cambiar la presentación de la página (por ejemplo, el orden de clasificación). AJAX puede implementarlos para cargar contenido nuevo en el página o, en implementaciones anteriores, activando nuevas cargas de página, que es esencialmente un enlace de página.

En mi humilde opinión, estos son usos válidos de un control de formulario.

La <select>etiqueta crea una lista desplegable. No puede poner enlaces html dentro de un menú desplegable.

Sin embargo, hay bibliotecas de JavaScript que proporcionan una funcionalidad similar. Aquí hay un ejemplo: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

Prueba este código

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>