web-dev-qa-db-fra.com

Pourquoi un élément <button> ne peut-il pas contenir de <div>?

Mon entreprise construit un site Web et nous avons eu quelques problèmes avec une bibliothèque JavaScript qui ne remplaçait pas quelque chose. Nous avons décidé de jeter notre code HTML dans le validateur W3C et il nous a informés qu'il était illégal d'avoir un <div> tag dans un <button> tag.

<button class="button" type="submit">
    <div class="buttonNormalLargeLeft"><!--#--></div>
    <div class="buttonNormalLargeCenter">Search Flights</div>
    <div class="buttonNormalLargeRight"><!--#--></div>
</button>

Résulte en:

Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

Edit: Pour clarifier ce que nous essayons de faire ici. Nous voulons créer un bouton aux coins arrondis qui ne repose pas sur box-radius. Nous avons fait 3 divisions dans l'élément bouton, chacun a son propre Sprite pour le faire apparaître arrondi et permettre différentes largeurs. D'autres ressources indiquent que l'élément de bouton a été créé pour les utilisateurs qui voulaient qu'un bouton contienne des sous-éléments tels que des images, mais les divs semblent invalides pour une raison quelconque.

Pourquoi les divs ne sont-ils pas autorisés à l'intérieur des éléments de bouton?

Quelle est la solution souhaitée à ce problème?

Edit2:

Pourquoi ne pas utiliser d'entrée? Parce que les entrées ne peuvent pas avoir la disposition souhaitée

Pourquoi ne pas utiliser des divs? Parce que les utilisateurs sans JavaScript ne pourront pas envoyer le formulaire.

htmlw3c-validation
18
TFennis

Si vous souhaitez utiliser un bouton personnalisé, vous devrez remplacer la balise du bouton par un div ou une entrée. On dirait qu'un div est ce que vous voulez dans ce cas. Vous n'aurez qu'à ajouter tous les gestionnaires d'événements nécessaires (pour votre soumission).

This pourrait aider à clarifier un peu les choses.

2
Jlange

Bon j'ai posté un commentaire mais pas d'amour.

Vous pouvez obtenir un bouton valide W3C en plaçant simplement une image à l'intérieur du bouton.

Violon

Certes, vous devrez créer vos images et y ajouter le texte. Mais puisque vous avez déjà créé des images pour les coins, cela ne devrait pas être trop dur.

Aussi sprites d'image sont une grande chose.

.test {
  width: 258px;
  height: 48px;
  background: none;
  border: 1px solid transparent;
}
.test:active {
  outline: 0;
}
.test > img {
  width: 258px;
  height: 45px;
  opacity: 1;
  background: url('http://www.copygirlonline.com/wp-content/plugins/maxblogpress-subscribers-magnet/lib/include/popup1/images/btn/blue-button.png');
  background-position: -3px 0px;
}
.test > img:hover {
  background-position: -3px -50px;
}
<button class="test">
  <img src="http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png" />
</button>

Si vous souhaitez vous en tenir à 3 images, voici une version mise à jour.

button {
  margin: 0;
  padding: 0;
  border: none;
}
<button>
  <img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" />
</button>

De plus, sans CSS supplémentaire, il semble que vous devez conserver tous les <img /> balise sur la même ligne ou traite les images comme ayant un espace entre elles.

2
Wild Beard

Si vous utilisez un formulaire, vous pouvez remplacer le bouton par un div cliquable. Par exemple:

<div role="button" onclick="$(this).closest('form').submit()">
    <!-- your child content here -->
</div>

Alternativement, si vous connaissez le nom ou l'ID du formulaire, vous pouvez remplacer le javascript en ligne par quelque chose comme document.getElementById("form-id").submit()

0
Jonathan