Puis-je imbriquer un <button>élément dans un <a>fichier HTML5?</a></button>

Question

Je fais ce qui suit:

  <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  
 

Cela fonctionne bien, mais je reçois une erreur de validation HTML5 qui indique que "L'élément" bouton "ne doit pas être imbriqué dans l'élément" un bouton ".

Quelqu'un peut-il me donner des conseils sur ce que je devrais faire?

Answer 1

Non, il n'est pas valide HTML5 selon la Spec HTML5 Document du W3C:

Modèle de contenu: Transparent, mais il doit y avoir pas de contenu interactif descendant.

L'élément peut être enroulé autour de l'ensemble des paragraphes, des listes, des tableaux, et ainsi de suite, même des sections entières, tant qu'il n'y a pas de contenu interactif à l'intérieur (par exemple, de boutons ou d'autres liens).

En d'autres termes, vous pouvez imbriquer des éléments à l'intérieur d'un <a> sauf dans les cas suivants:

• <a>

• <audio> (si le contrôle de l'attribut est présent)

• <button>

• <details>

• <embed>

• <iframe>

• <img> (si le usemap attribut est présent)

• <input> (si le type de l'attribut n'est pas dans le caché de l'état)

• <keygen>

• <label>

• <menu> (si le type de l'attribut est dans la barre d' état)

• <object> (si le usemap attribut est présent)

• <select>

• <textarea>

• <video> (si le contrôle de l'attribut est présent)

---

Si vous essayez d'avoir un bouton qui permet d'accéder à quelque part, d'envelopper ce bouton à l'intérieur d'un <form> balise en tant que tel:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

Toutefois, si votre <button> balise est de style à l'aide de CSS et qui ne ressemble pas au système de widget... Faites-vous une faveur, de créer une nouvelle classe pour votre <a> balise et le style de la même manière.

Answer 2

Je viens juste de sauter dans le même problème et je l'ai résolu en substituant les balises 'button' à 'span'. Dans mon cas, j'utilise bootstrap. C'est à ça que ça ressemble:

 <a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 
 

Answer 3

Ce serait vraiment bizarre si cela était valable, et je m'attendrais à ce que ce soit invalide. Que devrait signifier avoir un élément cliquable à l'intérieur d'un autre élément cliquable? De quoi s'agit-il - d'un bouton ou d'un lien?

Answer 4

Utiliser l'attribut formaction à l'intérieur du bouton

PS! Cela ne fonctionne que si votre type de bouton = "submit"

 <button type="submit" formaction="www.youraddress.com">Submit</button>