Diferencia entre <input type = 'submit' /> y <button type = 'submit'> text </button>

149

Hay muchas leyendas sobre ellos. Quiero saber la verdad. ¿Cuáles son las diferencias entre los dos siguientes ejemplos?

<input type='submit' value='text' />
<button type='submit'>text</button>

html button

— James
fuente

¿Quieres decir <input type="submit">y <button type="submit">?

— kennytm

Posible duplicado de la diferencia entre <input type = 'button' /> y <input type = 'submit' />

— Hakan Fıstık

inputEs un elemento vacío. No usar <input />, solo usar <input>.

— CDT

@ HakanFıstık, no es un duplicado de eso, he estado allí, eso es (más o menos sutilmente) diferente, por ejemplo, type=submitporque buttonni siquiera era una preocupación allí (probablemente porque ni siquiera era parte de la norma en ese entonces (AFAIK), cuando se hizo esa otra pregunta).

— Sz.

Respuestas:

121

No estoy seguro de dónde sacas tus leyendas pero:

Enviar botón con `<button>`

Al igual que con:

<button type="submit">(html content)</button>

IE6 enviará todo el texto para este botón entre las etiquetas, otros navegadores solo enviarán el valor. El uso <button>le brinda más libertad de diseño sobre el diseño del botón. En todos sus intentos y propósitos, parecía excelente al principio, pero varias peculiaridades del navegador hacen que sea difícil de usar a veces.

En su ejemplo, IE6 enviará textal servidor, mientras que la mayoría de los otros navegadores no enviarán nada. Para que sea compatible con varios navegadores, use <button type="submit" value="text">text</button>. Mejor aún: no use el valor, porque si agrega HTML se vuelve bastante complicado lo que se recibe en el lado del servidor. En cambio, si debe enviar un valor adicional, use un campo oculto.

Botón con `<input>`

Al igual que con:

<input type="button" />

Por defecto, esto no hace casi nada. Ni siquiera enviará su formulario. Solo puede colocar texto en el botón y asignarle un tamaño y un borde mediante CSS. Su intención original (y actual) era ejecutar un script sin la necesidad de enviar el formulario al servidor.

Botón de envío normal con `<input>`

Al igual que con:

<input type="submit" />

Como el primero, pero en realidad presenta el formulario circundante.

Botón de enviar imagen con `<input>`

Al igual que con:

<input type="image" />

Al igual que el anterior (enviar), también enviará un formulario, pero puede usar cualquier imagen. Esta solía ser la forma preferida de usar imágenes como botones cuando se necesitaba enviar un formulario. Para un mayor control, <button>ahora se utiliza. Esto también se puede usar para mapas de imágenes del lado del servidor, pero eso es una rareza en estos días. Cuando usa el usemapatributo -y (con o sin ese atributo), el navegador enviará las coordenadas X / Y del puntero del mouse al servidor (más precisamente, la ubicación del puntero del mouse dentro del botón en el momento en que hace clic en él). Si simplemente ignora estos extras, no es más que un botón de enviar disfrazado de imagen.

Existen algunas diferencias sutiles entre los navegadores, pero todas enviarán el atributo de valor, excepto la <button>etiqueta como se explicó anteriormente.

— Abel
fuente

Como has estado editando de todos modos, el punto sobre IE6 sigue siendo cierto con IE11 en modo peculiar. (Otra razón más para no usar el modo peculiaridades). Arreglado en Edge sin embargo. Ah, y hay más diferencias entre <input> y <button>: <input> tiene white-space:prepor defecto, <button> no. Esto se hace evidente cuando se intenta hacer un botón más ancho que la ventana gráfica.

— Sr. Lister el

Con <button>, puede usar etiquetas img, etc. donde el texto es

<button type='submit'> text -- can be img etc.  </button>

con <input>tipo, estás limitado a texto

— Chispeante
fuente

con <input type="image" />usted no se limita al texto y también realiza un envío.

— Abel

@Abel: eso es más para crear un mapa de imagen que a su vez envía la posición del puntero del ratón como name.xy name.yparámetros (nota que el nameparámetro no está presente!). Prefiero usar <input type="submit">con un fondo CSS si el único propósito es tener un botón con una imagen de fondo.

— BalusC

@BalusC: Cierto, pero su propósito, al momento de escribir el estándar HTML 2.0, cuando no había CSS, era, como se describe, usar una imagen como un botón o como un mapa de imagen del lado del servidor. Pero, de hecho, puede (ab) usar un botón normal con una imagen de fondo para hacer lo mismo con CSS y HTML.

— Abel

@Abel: Esa nunca fue la intención de input type="image". Para eso <button type="submit">se pretende.

— BalusC

@BalusC: quizás entendemos el estándar de manera diferente, pero esto está en el texto original de Lee para el estándar HTML 2.0: " TYPE=IMAGE' implies TIPO = ENVIAR 'procesamiento; es decir, cuando se elige un píxel, se envía el formulario como un todo". . Haz de él lo que crees que es la verdadera intención :)

— Abel

En resumen :

<input type="submit">

<button type="submit"> Submit </button>

Ambos, de forma predeterminada, dibujarán visualmente un botón que realiza la misma acción (envíe el formulario).

Sin embargo, se recomienda su uso <button type="submit">porque tiene una mejor semántica, mejor soporte ARIA y es más fácil de diseñar.

— Juanma Menéndez
fuente

Diferencia entre <input type = 'submit' /> y <button type = 'submit'> text </button>

Enviar botón con <button>

Botón con <input>

Botón de envío normal con <input>

Botón de enviar imagen con <input>

Enviar botón con `<button>`

Botón con `<input>`

Botón de envío normal con `<input>`

Botón de enviar imagen con `<input>`