usando i collegamenti href all'interno del tag <option>

Ho il seguente codice HTML:

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

Come posso rendere i valori Home , Contatti e Sitemap come link? Ho usato il seguente codice e come previsto non funzionava:

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

AGGIORNAMENTO (Nov 2015): Al giorno d'oggi, se vuoi avere un menu a discesa, ci sono molti modi probabilmente migliori per implementarlo. Questa risposta è una risposta diretta a una domanda diretta, ma non sostengo questo metodo per i siti Web pubblici.

AGGIORNAMENTO (maggio 2020): Qualcuno ha chiesto nei commenti perché non avrei sostenuto questa soluzione. Immagino sia una questione di semantica. Preferirei che i miei utenti navigassero <a>e continuassero <select>a fare selezioni di moduli perché gli elementi HTML hanno una riunione semantica e hanno uno scopo, anchorsti prendono posto, <select>sono per scegliere cose dagli elenchi.

Considera, se stai visualizzando una pagina con un browser non tradizionale (un browser non grafico o uno screen reader o la pagina è accessibile a livello di codice o JavaScript è disabilitato) qual è allora il "significato" o "l'intento" di ciò <select>che hai utilizzato per la navigazione? Sta dicendo "per favore, scegli il nome di una pagina" e non molto altro, sicuramente nulla sulla navigazione. La facile risposta a questo è, well i know that my users will be using IE or whatever so shrugma questo genere manca il punto di importanza semantica.

Considerando che un elemento dell'interfaccia utente a discesa funky costituito da elementi di layout adeguati (e alcuni js) contenenti alcuni ancoraggi regolari mantiene ancora intento anche se l'elemento di layout viene perso, "questi sono un gruppo di collegamenti, selezionarne uno e ci navigheremo" .

Ecco un articolo sull'abuso e l'abuso di<select> .

Non è possibile utilizzare tag href con tag opzione. Per farlo, avrai bisogno di JavaScript.

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

Utilizzare invece un vero menu a discesa: un elenco ( ul, li) e collegamenti. Non abusare mai degli elementi del modulo come collegamenti.

I lettori con screen reader di solito scansionano un elenco di collegamenti generati automagicamente: perderanno queste informazioni importanti. Molti sistemi di navigazione da tastiera (ad es. JAWS, Opera) offrono scorciatoie da tastiera diverse per collegamenti ed elementi del modulo.

Se non riesci ancora a perdere l'idea di selectnon usare onchangealmeno il gestore. Questo è un vero dolore per gli utenti di tastiera, rende il tuo terzo elemento quasi inaccessibile.

La soluzione accettata sembra buona, ma c'è un caso che non può gestire:

L'evento "onchange" non verrà attivato quando viene selezionata nuovamente la stessa opzione. Quindi, ho trovato il seguente miglioramento:

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

(Non ho abbastanza reputazione per commentare la risposta di toscho.)

Non ho esperienza con gli screen reader e sono sicuro che i tuoi punti siano validi.

Tuttavia, per quanto riguarda l'utilizzo di una tastiera per manipolare le selezioni, è banale selezionare qualsiasi opzione utilizzando la tastiera:

TAB al controllo

SPAZIO per aprire l'elenco di selezione

Frecce SU o GIÙ per scorrere fino all'elenco desiderato

INVIO per selezionare l'elemento desiderato

Solo su INVIO viene attivato l'evento onchange o (JQuery .change ()).

Sebbene personalmente non utilizzerei un controllo modulo per menu semplici, esistono molte applicazioni Web che utilizzano i controlli modulo per modificare la presentazione della pagina (ad es. Ordinamento). Questi possono essere implementati da AJAX per caricare nuovi contenuti nel pagina o, nelle implementazioni precedenti, attivando nuovi caricamenti di pagina, che è essenzialmente un collegamento di pagina.

IMHO questi sono usi validi di un controllo modulo.

Il <select>tag crea un elenco a discesa. Non è possibile inserire collegamenti HTML in un menu a discesa.

Tuttavia, ci sono librerie JavaScript che forniscono funzionalità simili. Ecco un esempio: 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>

Prova questo codice

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