Botón HTML para NO enviar formulario

Question

Tengo un formulario. Fuera de ese formulario, tengo un botón. Un botón simple, como este:

<button>My Button</button> 

Sin embargo, cuando hago clic en él, envía el formulario. Aquí está el código:

<form id="myform"> 
    <input /> 
</form> 
<button>My Button</button> 

Todo lo que este botón debe hacer es un poco de JavaScript. Pero incluso cuando se ve como en el código anterior, envía el formulario. Cuando cambio el botón de etiqueta para abarcar, funciona perfectamente. Pero desafortunadamente, tiene que ser un botón. ¿Hay alguna forma de bloquear ese botón para que no envíe el formulario? Como e. gramo.

Answer 1

Creo que esta es la pequeña peculiaridad más molesta de HTML ... Ese botón debe ser de tipo "botón" para no enviar.

<button type="button">My Button</button> 

Answer 2

return false; al final del controlador onclick hará el trabajo. Sin embargo, es mejor simplemente agregar type="button" al <button> - de esa manera se comporta correctamente incluso sin JavaScript.

Answer 3

Se recomienda no utilizar la etiqueta <Button>. Use la etiqueta <Input type='Button' onclick='return false;'> en su lugar. (El uso del "return false" debe de hecho no envía el formulario.)

Algunos reference material

Answer 4

de Dave Markle es correcta. De W3School's website:

Especifique siempre el tipo de atributo para el botón. El tipo predeterminado para Internet Explorer es "botón", mientras que en otros navegadores (y en la especificación W3C ) es "enviar".

En otras palabras, el navegador que está utilizando sigue las especificaciones del W3C.

Answer 5

De forma predeterminada, los botones html envían un formulario.

Esto es debido al hecho de que incluso los botones situados fuera de una forma actúan como peticionarios (véase el sitio web W3Schools: http://www.w3schools.com/tags/att_button_form.asp)

En otras palabras, el tipo de botón es "submit" por defecto

<button type="submit">Button Text</button> 

lo tanto una manera fácil de evitar esto es usar el botón tipo.

<button type="button">Button Text</button> 

Otras opciones incluyen volviendo falsa al final de la onclick o cualquier otro controlador para cuando el botón se hace clic, o para el uso de un> etiqueta < entrada en lugar

Para obtener más información, consulte la información de Mozilla Developer Network en los botones: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

Answer 6

Para accesibilidad r eason, no pude llevarlo a cabo con múltiples botones type=submit. La única forma de trabajar de forma nativa con form con varios botones pero SOLO puede enviar el formulario al presionar la tecla Enter para asegurarse de que solo uno de ellos sea de type=submit, mientras que otros estén en otro tipo, como type=button. De esta manera, puede beneficiarse de la mejor experiencia de usuario al tratar con un formulario en un navegador en términos de compatibilidad con el teclado.