Botão HTML para NÃO enviar formulário

370

Eu tenho um formulário. Fora desse formulário, tenho um botão. Um botão simples, como este:

<button>My Button</button>

No entanto, quando clico, ele envia o formulário. Aqui está o código:

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

Tudo o que este botão deve fazer é algum JavaScript. Mas mesmo quando se parece com o código acima, ele envia o formulário. Quando mudo o botão de marcação para abranger, ele funciona perfeitamente. Mas, infelizmente, ele precisa ser um botão. Existe alguma maneira de impedir que esse botão envie o formulário? Como por exemplo

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
javascript html arik
fonte
3
Esse problema não é reproduzível em navegadores modernos e o problema pode ter resultado originalmente de um mal-entendido. Enquanto o padrão buttonfor type=submit, não há formulário a ser enviado quando o buttonelemento estiver fora de qualquer formulário. A menos que uma demonstração real (um exemplo de documento, identificação de um navegador e descrição das observações que mostram que algum formulário seja enviado) possa ser fornecida, essa pergunta deve ser encerrada como não reproduzível. Usar type=buttoné uma boa prática, mas isso não torna o problema real.
Jukka K. Korpela

Respostas:

895

Eu acho que essa é a pequena peculiaridade mais irritante do HTML ... Esse botão precisa ser do tipo "botão" para não enviar. 

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

Atualização 5 de fevereiro de 2019: Conforme o HTML Living Standard (e também a especificação do HTML 5 ):

O valor ausente padrão e o valor inválido padrão são o estado do botão Enviar.

Dave Markle
fonte
9
@Powerslave qualquer motivo para não fazê-lo #to use <button>
Sandip Pingle
4
@SandipPingle Não há razão para usá-lo, a menos que você precise de um estilo muito complexo. Além disso, o IE6 e o ​​IE7 (felizmente eliminados) tratam <button>s incorretamente em alguns casos. Além disso, <button>não é 100% compatível com vários navegadores, pois navegadores diferentes podem enviar valores diferentes para o mesmo <button>quando usados ​​em um formulário.
Powerslave
35
Essa é uma ótima resposta, mas não é uma peculiaridade . O valor padrão do typeatributo em uma <button>tag é submit. Quando alterado para type=button, <button>não é fornecido nenhum comportamento padrão. Veja o typeatributo aqui: developer.mozilla.org/pt-BR/docs/Web/HTML/Element/button
Michael Benjamin
11
Então, qual é a idéia de <button type='submit'>Isso é muito difícil para mim, haha. De qualquer forma, sua resposta funciona muito bem!
DivHelper11 /
2
O comportamento padrão (e, portanto, implícito) de um elemento não específico da forma é acionar uma funcionalidade específica da forma potencialmente destrutiva. Como isso não é uma decisão de design peculiar para a especificação HTML?
HonoredMule 25/01
36

return false;no final do manipulador onclick fará o trabalho. No entanto, é melhor simplesmente adicionar type="button"ao <button>- desse modo que ele se comporte corretamente, mesmo sem nenhum JavaScript.

ThiefMaster
fonte
11
Os botões que não enviam formulários são úteis apenas com o JavaScript ativado de qualquer maneira ... Concordo que type = "button" é mais limpo.
ThiefMaster 9/09/10
2
return false;não funciona em todos os cenários, enquanto type="Button"funciona. Mesmo com o JavaScript ativado.
brejoc
15

Dave Markle está correto. No site do W3School :

Sempre especifique o atributo type para o botão. O tipo padrão para o Internet Explorer é "botão", enquanto em outros navegadores (e na especificação W3C) é "enviar".

Em outras palavras, o navegador que você está usando está seguindo as especificações do W3C.

Gert Grenander
fonte
15

Por padrão, os botões html enviam um formulário.

Isso se deve ao fato de que mesmo botões localizados fora de um formulário atuam como remetentes (consulte o site W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

Em outras palavras, o tipo de botão é "enviar" por padrão

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

Portanto, uma maneira fácil de contornar isso é usar o tipo de botão .

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

Outras opções incluem retornar false no final do onclick ou qualquer outro manipulador para quando o botão é clicado ou usar uma tag <input>

Para saber mais, consulte as informações da Mozilla Developer Network nos botões: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

GJZ
fonte
3

É recomendável não usar a <Button>tag. Use a <Input type='Button' onclick='return false;'>tag. (Usar o "retorno falso" não deve realmente enviar o formulário.)

Algum material de referência

Tim
fonte
2
É o suficiente para usar <input type="button" />, e é suficiente para return false;- não há necessidade de fazer as duas coisas.
Tom
Não concordo que seja recomendável não usar a tag button. Se você não o usar, perderá alguns recursos de acessibilidade que obteria automaticamente com a tag button. Eu diria que a tag button é realmente recomendada para elementos que atuam como botões.
CookieMonster
de acordo com a observação no material de referência que você vinculou: "Enquanto os elementos <input> do botão de tipo ainda são perfeitamente válidos em HTML, o elemento <button> mais recente agora é a maneira preferida de criar botões". Então é exatamente o contrário que você afirmou.
jedzej
1

Por motivos de acessibilidade, não consegui executá-lo com vários type=submitbotões. A única maneira de trabalhar nativamente com a formcom vários botões, mas SOMENTE é possível enviar o formulário ao pressionar a Entertecla, é garantir que apenas um deles seja type=submitenquanto outros estão em outro tipo, como type=button. Dessa forma, você pode se beneficiar da melhor experiência do usuário ao lidar com um formulário em um navegador em termos de suporte ao teclado.

motss
fonte
0

Outra opção que funcionou para mim foi adicionar onsubmit = "return false;" para a tag do formulário.

<form onsubmit="return false;">

Semanticamente, provavelmente não é uma solução tão boa quanto os métodos acima para alterar o tipo de botão, mas parece ser uma opção se você deseja apenas um elemento de formulário que não será enviado.

kk64738
fonte