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:
<buttontype="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:
<inputtype="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:
<inputtype="submit"/>
Como el primero, pero en realidad presenta el formulario circundante.
Botón de enviar imagen con <input>
Al igual que con:
<inputtype="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.
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
19
Con <button>, puede usar etiquetas img, etc. donde el texto es
<buttontype='submit'> text -- can be img etc. </button>
con <input type="image" />usted no se limita al texto y también realiza un envío.
Abel
2
@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
1
@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 :)
<input type="submit">y<button type="submit">?inputEs un elemento vacío. No usar<input />, solo usar<input>.type=submitporquebuttonni 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).Respuestas:
No estoy seguro de dónde sacas tus leyendas pero:
Enviar botón con
<button>Al igual que con:
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:
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:
Como el primero, pero en realidad presenta el formulario circundante.
Botón de enviar imagen con
<input>Al igual que con:
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 elusemapatributo -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.fuente
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.Con
<button>, puede usar etiquetas img, etc. donde el texto escon
<input>tipo, estás limitado a textofuente
<input type="image" />usted no se limita al texto y también realiza un envío.name.xyname.yparámetros (nota que elnamepará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.input type="image". Para eso<button type="submit">se pretende.TYPE=IMAGE' impliesTIPO = 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 :)En resumen :
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.fuente