javascript - ¿Puedo hacer que un <button> no envíe un formulario?

Tengo un formulario, con 2 botones

<a href="index.html"><button>Cancel changes</button></a>

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

También uso el botón de jQuery UI en ellos, simplemente así

$('button').button();

Sin embargo, el primer botón también envía el formulario. Habría pensado que si no tuviera el type="submit", no lo haría.

Obviamente podría hacer esto

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

¿Pero hay alguna manera de evitar que ese botón de retroceso envíe el formulario sin la intervención de JavaScript?

Para ser honesto, usé un botón solo para poder estilizarlo con jQuery UI. Intenté llamar a button() en el enlace y no funcionó como esperaba (¡se veía bastante feo!).

Respuesta #1

El valor predeterminado del atributo type de los elementos button es "submit". Establécelo como type="button" para producir un botón que no envíe el formulario.

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

En palabras del Estándar HTML: "No hace nada."

Respuesta #2

El elemento button tiene un tipo predeterminado de submit.

Puedes hacer que no haga nada configurando un tipo de button:

<button type="button">Cancel changes</button>

Respuesta #3

Simplemente usa el buen HTML de siempre:

<input type="button" value="Submit" />

Envuélvelo como el sujeto de un enlace, si así lo deseas:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

O si decides que quieres que JavaScript proporcione alguna otra funcionalidad:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

Respuesta #4

Sí, puedes hacer que un botón no envíe un formulario agregando un atributo de tipo con el valor button:

<button type="button"><button>