Puis-je imbriquer un élément dans un en utilisant HTML5?

Je fais ce qui suit:

   

Cela fonctionne bien mais je reçois une erreur de validation HTML5 qui dit que le bouton “Élément” ne doit pas être nested dans l’élément “a button”.

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

Non , le HTML5 Spec Document du W3C ne valide pas HTML5:

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

L’élément a peut être entouré de paragraphes entiers, de listes, de tableaux, etc., même de sections entières, tant qu’il n’y a pas de contenu interactif (par exemple, des boutons ou d’autres liens).

En d’autres termes, vous pouvez imbriquer n’importe quel élément dans un sauf les suivants:

  • (si l’atsortingbut de contrôle est présent)

  • (si l’atsortingbut usemap est présent)

  • (si l’atsortingbut type n’est pas à l’état caché )

  • (si l’atsortingbut type est dans l’état de la barre d’outils )

  • (si l’atsortingbut usemap est présent)

  • (si l’atsortingbut de contrôle est présent)


Si vous essayez d’avoir un bouton qui se lie à quelque chose, placez ce bouton dans une

tant que telle:

 

Cependant, si votre est stylée avec CSS et ne ressemble pas au widget du système … Faites-vous une faveur, créez une nouvelle classe pour votre balise et donnez-lui un style identique.

Si vous utilisez Bootstrap 3 , cela fonctionne plutôt bien

 Primary link Link 

Ce serait vraiment bizarre si c’était valide, et je m’attendrais à ce que ce soit invalide. Qu’est-ce que cela signifie d’avoir un élément cliquable à l’intérieur d’un autre élément cliquable? Qui est-ce – un bouton ou un lien?

Je viens juste de me lancer dans le même problème et je l’ai résolu en substituant la balise «bouton» à la balise «span». Dans mon cas, j’utilise le bootstrap. C’est à ça que ça ressemble:

   Subscribe   

Non.

La solution suivante repose sur JavaScript.

  

Si le bouton doit être placé dans un

existant avec method="post" , assurez-vous que le bouton a l’atsortingbut type="button" sinon le bouton soumettra l’opération POST. De cette façon, vous pouvez avoir un

qui contient un mélange de boutons d’opération GET et POST.

Une autre option consiste à utiliser l’atsortingbut onclick du bouton:

  

Cela fonctionne, cependant, l’utilisateur ne verra pas le lien affiché en vol stationnaire comme il le ferait s’il était à l’intérieur de l’élément.

Ces jours-ci, même si la spécification ne le permet pas, cela “semble” toujours fonctionner pour intégrer le bouton dans une , FWIW …

Vous pouvez append une classe au bouton et placer un script pour le redirect.

Je le fais de cette façon:

   

pourquoi pas..vous pouvez aussi incorporer la photo sur le bouton aussi

 

Explication et solution de travail ici: Howto: div avec onclick dans une autre div avec javascript onclick

en exécutant ce script dans votre gestionnaire de clics interne:

  if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); 

Il est illégal en HTML5 d’intégrer un élément de bouton à l’intérieur d’un lien.

Mieux vaut utiliser CSS sur les valeurs par défaut et: active (pressée) indique:

 body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */ a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none} a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF} a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF} 
 

Click me

J’essaie vos solutions javascript mais, pour le travail, je dois insérer le e.preventDefault(); dans ma fonction javascript

      

Utiliser l’atsortingbut formaction à l’intérieur du bouton

PS! Cela ne fonctionne que si votre bouton type = “submit”