usando links href dentro da tag <option>

Eu tenho o seguinte código HTML:

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

Como posso criar valores de Início , Contato e Sitemap como links? Usei o seguinte código e, como esperava, não funcionou:

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

ATUALIZAÇÃO (novembro de 2015): hoje em dia, se você quiser ter um menu suspenso, existem muitas maneiras indiscutivelmente melhores de implementar um. Esta resposta é uma resposta direta a uma pergunta direta, mas eu não defendo esse método para sites públicos.

ATUALIZAÇÃO (maio de 2020): Alguém perguntou nos comentários por que eu não defendia essa solução. Eu acho que é uma questão de semântica. Prefiro que meus usuários naveguem usando <a>e sejam mantidos <select>para fazer seleções de formulário, porque os elementos HTML têm reunião semântica e têm um propósito, anchorslevam você a lugares, <select>servem para escolher itens das listas.

Considere que, se você estiver visualizando uma página com um navegador não tradicional (um navegador não gráfico ou leitor de tela ou a página for acessada de forma programática ou o JavaScript estiver desativado), qual é o "significado" ou a "intenção" deste documento <select>? usado para navegação? Está dizendo "escolha um nome de página" e não muito mais, certamente nada sobre navegação. A resposta fácil para isso é, well i know that my users will be using IE or whatever so shrugmas isso meio que perde o ponto de importância semântica.

Enquanto um elemento de interface do usuário suspenso e descolado, feito de elementos de layout adequados (e alguns js) contendo algumas âncoras regulares, ainda mantém a intenção, mesmo se o elemento de layout for perdido, "esses são vários links, selecione um e navegaremos lá" .

Aqui está um artigo sobre o uso indevido e abuso de<select> .

Você não pode usar tags href dentro das tags de opção. Você precisará de javascript para fazer isso.

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

Use um menu suspenso real: uma lista ( ul, li) e links. Nunca use elementos de formulário como links.

Os leitores com leitores de tela geralmente examinam uma lista de links gerada automaticamente - eles perderão essas informações importantes. Muitos sistemas de navegação por teclado (por exemplo, JAWS, Opera) oferecem atalhos de teclado diferentes para links e elementos de formulário.

Se você ainda não pode abandonar a ideia de a select, não use onchangepelo menos o manipulador. Isso é uma verdadeira dor de cabeça para os usuários de teclado, pois torna seu terceiro item quase inacessível.

A solução aceita parece boa, mas há um caso que não pode ser resolvido:

O evento "onchange" não será acionado quando a mesma opção for selecionada novamente. Então, eu vim com a seguinte melhoria:

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);
});

(Não tenho reputação suficiente para comentar a resposta de toscho.)

Não tenho experiência com leitores de tela e tenho certeza de que seus pontos são válidos.

No entanto, quanto ao uso de um teclado para manipular seleções, é trivial selecionar qualquer opção usando o teclado:

TAB para o controle

ESPAÇO para abrir a lista de seleção

Setas PARA CIMA ou PARA BAIXO para rolar até o item da lista desejado

ENTER para selecionar o item desejado

Somente em ENTER o evento onchange ou (JQuery .change ()) é acionado.

Embora eu pessoalmente não usasse um controle de formulário para menus simples, existem muitos aplicativos da Web que usam controles de formulário para alterar a apresentação da página (por exemplo, ordem de classificação.) Eles podem ser implementados pelo AJAX para carregar novo conteúdo no página, ou, em implementações mais antigas, acionando novos carregamentos de página, que é essencialmente um link de página.

IMHO, esses são usos válidos de um controle de formulário.

A <select>tag cria uma lista suspensa. Você não pode colocar links html em uma lista suspensa.

No entanto, existem bibliotecas JavaScript que fornecem funcionalidade semelhante. Aqui está um exemplo: 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>

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