Passo 1 de 5
Identificar o envio causado por um botão sem tipo
Reconheça botões que podem enviar um formulário por falta de type e declare explicitamente o tipo do botão destinado ao envio.
Trilha de aprendizado · Nível 6 · Tutorial 3
Ao concluir, você poderá definir o comportamento de cada botão de um formulário e evitar ações inesperadas de envio ou restauração de valores.
Identificar o envio causado por um botão sem tipo
Reconheça botões que podem enviar um formulário por falta de type e declare explicitamente o tipo do botão destinado ao envio. 2 min
Separar ações personalizadas do envio
Use type="button" para ações que não devem enviar o formulário e diferencie o texto do botão do comportamento que ainda precisa ser implementado. 2 min
Entender o que um botão de restauração faz
Preveja os valores após uma restauração e decida quando omitir esse botão para preservar o preenchimento do usuário. 2 min
Reconhecer o envio pela tecla Enter
Identifique quando Enter pode enviar um formulário e por que type="button" não bloqueia esse caminho. 2 min
Revisar os botões de um formulário
Corrija os botões de um formulário e confira o que muda — e o que não muda — com essa revisão. 3 min
Passo 1 de 5
Reconheça botões que podem enviar um formulário por falta de type e declare explicitamente o tipo do botão destinado ao envio.
Dentro de um formulário comum, um <button> sem o atributo type assume o comportamento de envio. Isso vale mesmo quando o texto do botão sugere outra ação.
<form>
<button>Ver prévia</button>
</form>Exemplo
Ao clicar em “Ver prévia”, o usuário pode provocar um envio inesperado. Esse texto não anula o comportamento padrão causado pela ausência de type.
<form>
<button>Ver resumo</button>
<button type="submit">Enviar pedido</button>
</form>A intenção é enviar somente ao clicar em “Enviar pedido”. Qual botão pode causar um envio indesejado por não declarar seu tipo?
No botão destinado ao envio, declare type="submit", que você já conhece. Assim, o envio não depende da omissão do tipo, e a intenção fica clara no código.
<form>
<button type="submit">Enviar pedido</button>
</form>Dica
Declarar o tipo do botão de envio não corrige outros botões sem type no mesmo formulário. Revise cada botão conforme sua finalidade.
Este botão está dentro de um formulário e deve enviá-lo. Complete apenas o valor de type para tornar essa intenção explícita:
<button type="____">Enviar inscrição</button>
Passo 2 de 5
Use type="button" para ações que não devem enviar o formulário e diferencie o texto do botão do comportamento que ainda precisa ser implementado.
Para um botão de ação personalizada que não deve enviar o formulário, use type="button". Por comportamento nativo, esse botão não envia nem restaura os valores do formulário.
No trecho abaixo, apenas “Enviar mensagem” tem a função nativa de envio. “Gerar prévia” indica uma ação que ainda precisa ser implementada.
<button type="button">Gerar prévia</button>
<button type="submit">Enviar mensagem</button>O botão “Calcular total” ficará dentro de um formulário, mas não deve enviá-lo. Complete apenas o valor de type:
<button type="____">Calcular total</button>
O atributo type define o comportamento nativo do botão. O texto visível comunica ao usuário a ação esperada.
Prefira “Gerar prévia” a um texto genérico como “Executar”: ele deixa a finalidade mais clara. Mas escrever “Gerar prévia” não faz o navegador montar uma prévia.
Dica
Gerar uma prévia ou calcular um total exige comportamento adicional, geralmente implementado com JavaScript. Sem isso, o botão aparece, mas não realiza a ação personalizada. Neste tutorial, vamos definir o tipo e o texto, sem implementar essa ação.
Você definiu type="button" para um botão destinado à prévia de uma mensagem. Nenhum comportamento adicional foi implementado. Qual opção combina um texto claro com uma previsão correta?
Passo 3 de 5
Preveja os valores após uma restauração e decida quando omitir esse botão para preservar o preenchimento do usuário.
Dentro de um formulário, type="reset" restaura os valores iniciais dos campos, sem enviar os dados. Um campo que começou preenchido volta a esse conteúdo; um que começou vazio volta a ficar vazio.
Observe os valores iniciais deste exemplo:
<form>
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" value="Ana">
<label for="cidade">Cidade</label>
<input id="cidade" name="cidade" type="text" value="">
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem">Olá!</textarea>
<button type="reset">Restaurar valores iniciais</button>
</form>O usuário alterou os três campos e clicou em “Restaurar valores iniciais”. Associe cada situação ao conteúdo que o campo terá após o clique.
Toque em um item e depois no par correspondente.
Atenção
A restauração descarta as alterações feitas durante o preenchimento. Uma mensagem longa, por exemplo, pode ser substituída pelo texto inicial. Se não houver uma necessidade clara de restaurar os campos, prefira omitir o botão.
Exemplo
Prefira um texto como “Restaurar valores iniciais”. No formulário do exemplo, “Limpar campos” seria uma promessa enganosa: Nome e Mensagem voltariam preenchidos.
Em um formulário de contato, a tarefa é apenas escrever uma mensagem e enviá-la. Não há necessidade de voltar aos valores iniciais, mas existe um botão type="reset" chamado “Limpar campos”.
Você manteria ou removeria esse botão? Justifique pensando no trabalho do usuário.
Escreva pelo menos 25 caracteres (0/25).
Passo 4 de 5
Identifique quando Enter pode enviar um formulário e por que type="button" não bloqueia esse caminho.
Com o cursor em um campo de uma linha, pressionar Enter pode enviar o formulário sem clicar no botão de envio. Esse comportamento é chamado de envio implícito e depende da configuração do formulário e do navegador.
Exemplo
Imagine um formulário com um único campo de texto e apenas o botão abaixo. Mesmo sem um botão de envio, pressionar Enter no campo pode enviar o formulário.
<button type="button">Gerar prévia</button>No exemplo anterior, definir type="button" no único botão desativa também o envio por Enter no campo de texto.
Em uma textarea, Enter normalmente insere uma quebra de linha. Em um input de uma linha, Enter pode acionar o envio. Observe onde está o cursor antes de interpretar o resultado.
Exemplo
No ambiente de prática, mantenha o destino já disponibilizado e use dados fictícios. Prepare um formulário com um único input de texto e uma textarea, sem botão de envio.
Dica
Se Enter não enviar em um teste, não conclua que isso nunca acontecerá: o resultado pode mudar conforme o formulário e o navegador.
Em um formulário comum, sem comportamento personalizado, qual previsão está correta?
Passo 5 de 5
Corrija os botões de um formulário e confira o que muda — e o que não muda — com essa revisão.
Neste formulário de prática, o primeiro botão deve gerar uma prévia e o segundo deve enviar a mensagem. A prévia ainda não foi implementada. Não há necessidade de restaurar o preenchimento.
Leia o código e identifique o que precisa mudar nos botões.
<form method="post">
<label for="mensagem">Mensagem</label>
<input type="text" id="mensagem" name="mensagem" value="Olá, equipe!">
<button>OK</button>
<button>Enviar</button>
<button type="reset">Limpar</button>
</form>Reescreva os botões que devem permanecer, com tipos explícitos e textos claros.
Depois, explique:
Escreva pelo menos 30 caracteres (0/30).
Após a revisão, “Gerar prévia” usa type="button" e “Enviar mensagem” usa type="submit". O que pode acontecer ao pressionar Enter no campo Mensagem?
Resumo
Parabéns! Você concluiu: Evitar envios acidentais com tipos de botão
Tutorial concluído! Ao revisar seus formulários, confira o tipo, o texto e a necessidade de cada botão — e os limites do que essa correção resolve.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
