web-dev-qa-db-fra.com

utilisation de liens href dans la balise <option>

J'ai le code HTML suivant:

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

Comment créer des valeurs de Accueil, Contact et Plan du site? J'ai utilisé le code suivant et comme prévu, cela n'a pas fonctionné:

<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>
htmlformstagsanchoroption
120
makmour
<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): De nos jours, si vous voulez avoir un menu déroulant, il y a beaucoup de choses à dire sans doute de meilleures façons de mettre en œuvre one. Cette réponse est une réponse directe à une question directe, mais je ne préconise pas cette méthode pour les sites Web destinés au public.

243
gingerbreadboy

Vous ne pouvez pas utiliser les balises href dans les balises option. Vous aurez besoin de javascript pour le faire.

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

Utilisez plutôt un véritable menu déroulant: une liste (ul, li) et des liens. Ne jamais abuser des éléments de forme en tant que liens.

Les lecteurs équipés de lecteurs d’écran parcourent généralement une liste de liens générée automatiquement - ces informations importantes sont manquantes. De nombreux systèmes de navigation à clavier (par exemple, JAWS, Opera) offrent différents raccourcis clavier pour les liens et les éléments de formulaire.

Si vous ne pouvez toujours pas abandonner l'idée d'un select n'utilisez pas au moins le gestionnaire onchange. C'est une vraie douleur pour les utilisateurs de clavier, cela rend votre troisième élément presque inaccessible.

12
fuxia

La solution acceptée semble bonne, mais il y a un cas qu'elle ne peut pas gérer:

L'événement "onchange" ne sera pas déclenché lorsque la même option sera resélectionnée. Donc, je suis venu avec l'amélioration suivante:

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

(Je n'ai pas assez de réputation pour commenter la réponse de toscho.)

Je n'ai aucune expérience avec les lecteurs d'écran et je suis sûr que vos points sont valables.

Cependant, en ce qui concerne l'utilisation d'un clavier pour manipuler les sélections, il est facile de sélectionner une option à l'aide du clavier:

TAB au contrôle

ESPACE pour ouvrir la liste de sélection

Flèches HAUT ou BAS pour faire défiler jusqu'à l'élément de la liste souhaité

ENTER pour sélectionner l'élément souhaité

L'événement onchange ou l'événement (JQuery .change ()) n'est déclenché que sur ENTREE.

Personnellement, je n'utiliserais personnellement pas de contrôle de formulaire pour les menus simples, mais de nombreuses applications Web utilisent des contrôles de formulaire pour modifier la présentation de la page (par exemple, l'ordre de tri). Celles-ci peuvent être implémentées soit par AJAX pour charger un nouveau contenu dans la page ou, dans les implémentations plus anciennes, en déclenchant de nouveaux chargements de page, qui est essentiellement un lien de page.

IMHO ce sont des utilisations valides d'un contrôle de formulaire.

5
Rich Cloutier

La balise <select> crée une liste déroulante. Vous ne pouvez pas mettre de liens HTML dans une liste déroulante.

Cependant, certaines bibliothèques JavaScript offrent des fonctionnalités similaires. Voici un exemple: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3
danben
    <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>
2
azkhawaja