Utilisation de liens href dans la balise <option>.

Question

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 puis-je faire Inicio , Contact y Plan du site en tant que liens ? J'ai utilisé le code suivant et comme je m'y attendais, 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>

Answer 1

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

MISE À JOUR (novembre 2015) : De nos jours, si vous voulez avoir un menu déroulant, il existe de nombreux arguments. de meilleures façons de les mettre en œuvre. 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.

MISE À JOUR (mai 2020) : Quelqu'un a demandé dans les commentaires pourquoi je ne préconise pas cette solution. Je suppose que c'est une question de sémantique. Je préfère que mes utilisateurs naviguent en utilisant <a> et a gardé <select> pour effectuer des sélections de formulaires, car les éléments HTML ont une rencontre sémantique et ont un but, anchors vous emmènent partout, <select> servent à sélectionner des éléments dans des listes.

Si vous consultez une page avec un navigateur non traditionnel (un navigateur non graphique ou un lecteur d'écran, ou si la page est accessible par programme, ou si JavaScript est désactivé), quel est le "sens" ou l'"intention" de cette page ? <select> que vous avez utilisé pour la navigation ? Il est dit "veuillez choisir un nom de page" et pas grand chose d'autre, certainement rien sur la navigation. La réponse facile à cette question est well i know that my users will be using IE or whatever so shrug mais cela ne tient pas compte de l'importance sémantique.

Alors qu'un élément d'interface utilisateur en forme de liste déroulante, composé d'éléments de mise en page appropriés (et d'un peu de js) contenant des ancres normales, conserve son intention même si l'élément de mise en page est perdu : "Voici un tas de liens, sélectionnez-en un et nous y naviguerons".

Voici un article sur le mauvais usage et l'abus de <select> .

Answer 2

Vous ne pouvez pas utiliser les balises href dans les balises d'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>

Answer 3

Utilisez plutôt un vrai menu déroulant : une liste ( ul , li ) et des liens. N'utilisez jamais à tort des éléments de formulaire comme liens.

Les lecteurs d'écran parcourent généralement une liste de liens générée automatiquement - ils manqueront ces informations importantes. De nombreux systèmes de navigation par clavier (par exemple, JAWS, Opera) proposent 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 le onchange manipulateur au moins. C'est une véritable plaie pour les utilisateurs de claviers, cela rend votre troisième élément presque inaccessible.

Answer 4

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

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

Cependant, en ce qui concerne l'utilisation du clavier pour manipuler les sélections, il est trivial de sélectionner n'importe quelle option à l'aide du clavier :

TAB au contrôle

ESPACE pour ouvrir la liste de sélection

Flèches vers le haut ou vers le bas pour faire défiler les éléments de la liste souhaitée.

ENTER pour sélectionner l'élément désiré

Ce n'est qu'à l'entrée que l'événement onchange ou (JQuery .change()) se déclenche.

Si, personnellement, je n'utiliserais pas de contrôle de formulaire pour de simples menus, il existe de nombreuses applications Web qui utilisent des contrôles de formulaire pour modifier la présentation de la page (par exemple, l'ordre de tri). Ces contrôles peuvent être mis en œuvre soit par AJAX pour charger un nouveau contenu dans la page, soit, dans les anciennes mises en œuvre, en déclenchant de nouveaux chargements de page, ce qui est essentiellement un lien de page.

À mon avis, ce sont des utilisations valables d'un contrôle de formulaire.

Answer 5

El <select> crée une liste déroulante. Vous ne pouvez pas placer de liens html à l'intérieur d'une liste déroulante.

Cependant, il existe des bibliothèques JavaScript qui offrent une fonctionnalité similaire. En voici un exemple : http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm