para - etiqueta button html

¿Por qué un elemento<button> no puede contener un<div>?

Question

Mi compañía está construyendo un sitio web y tuvimos algunos problemas con una biblioteca de JavaScript que no reemplaza algo. Decidimos incluir nuestro código HTML en el validador W3C y nos informó que es ilegal tener una etiqueta <div> dentro de una etiqueta <button> .

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

Resultados en:

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

Edit: para aclarar lo que estamos tratando de hacer aquí. Queremos hacer un botón con esquinas redondeadas que no dependa box-radius . Hicimos 3 divs en el elemento de botón, cada uno tiene su propio sprite para que aparezca redondeado y permita diferentes anchos. Otros recursos indican que el elemento de botón se creó para los usuarios que querían que un botón contenga subelementos, como imágenes, pero los divs parecen no ser válidos por algún motivo.

¿Por qué no se permiten divs dentro de los elementos de botón?

¿Cuál es la solución deseada para este problema?

Edit2:

¿Por qué no usar la entrada? Porque las entradas no pueden tener el diseño deseado.

¿Por qué no usar divs? Porque los usuarios sin JavaScript no podrán enviar el formulario.

Answer 1

Bueno he publicado un comentario pero no hay amor.

Puede lograr un botón W3C válido simplemente colocando una imagen dentro del botón.

Fiddle

Concedido, tendrás que crear tus imágenes y agregarles el texto. Pero como ya has creado imágenes para las esquinas, eso no debería ser demasiado difícil.

También los sprites de imágenes son una gran cosa.

.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 quieres quedarte con 3 imágenes aquí hay una versión actualizada.

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>

Además, sin CSS adicional, parece que necesita mantener todas las <img /> en la misma línea o trata las imágenes como si tuvieran espacio entre ellas.

Answer 2

Si desea utilizar un botón personalizado, tendrá que reemplazar la etiqueta del botón con un div o una entrada. Parece que un div es lo que quieres en este caso. Solo tendrá que agregar los controladores de eventos necesarios (para su envío).

This podría ayudar a aclarar las cosas un poco.

Answer 3

Si está utilizando un formulario, puede cambiar el botón para que sea un div en el que se pueda hacer clic. Por ejemplo:

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

Alternativamente, si conoce el nombre o la ID del formulario, puede cambiar el javascript en línea a algo como document.getElementById("form-id").submit()