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

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