Como criar botões em HTML, de Reset (limpar) e Submit (enviar) em Formulários

Neste artigo vamos aprender como criar e usar um dos elementos mais importantes em formulários de HTML, os botões.

Veremos como criar botões genéricos, de qualquer tipo, e alguns especiais, como os de reset (para limpar ou resetar os campos do <form>) e os botões do tipo submit (submeter, para enviar os dados do formulário para o servidor ou script).

Certificado do Curso de HTML, clique aqui

Botões em sites HTML

Provavelmente, o tipo de campo de um formulário que é mais utilizado são os botões.

Após preencher um formulário, clicamos em um botão "enviar", para que os dados que inserimos sejam enviados para o banco de dados ou script que irá tratar essas informações.
Ao concluir alguma etapa ou ler algum texto, é comum clicarmos em "Continuar" ou "Voltar", e geralmente são botões.

Também usamos botões para fazer uma busca no Google, para enviar um comentário que fizemos em algum blog e o exemplo mais clássico: todo login temos que clicar num botão de 'entrar'.

Ou seja, falar da importância e uso dos botões é ser redundante.
Botões são famosos por serem simples de ser usados, além de serem altamente intuitivos.
Pode parecer bobagem, mas muito de seus leitores serão pessoas leigas, que pouco tiveram contato com sites, e é comum achar pessoas que se confundem e não usam direitos os Radio Buttons e Checkbox Lists, por exemplo.

Como criar Botões HTML: type="button"

Felizmente, como em quase todos os campos de um formulário HTML, para criar um botão vamos precisar apenas apenas alterar o valor do atributo type, da tag <input>.

Ou seja, criar um button em um site é algo bem simples.
A ação que ocorre quando se cria um botão é que é algo mais complexo, e para isso se exige alguma linguagem de programação, como o JavaScript.

Iremos sim, aprender JavaScript e até mesmo PHP, mas por hora devemos focar e aprender bem o HTML (que é o erro de muitos webmasters, que partem direto para essas linguagens, sem aprender o básico).

Assim, a simples sintaxe, portanto, para se criar um botão é:
<input type="button">

Cujo resultado é este botãozinho ao lado:

Porém, um botão assim não serve para nada, para começar a criar buttons mais úteis em seus sites, é necessário usar o atributo value, pois o que fornecermos de valor para este atributo, é o nome que vai aparecer no botão. E para deixar nosso código pronto para ser usado com um script de programação, vamos dar também um nome para nosso botão, através do atributo name.

Assim, o código HTML mais completo e correto do nosso botão fica:
<input type="button" name="botao-ok" value="Ok">

E o resultado é este:

Bem melhor, não?



O que faz um Botão ? O atributo onclick

Pode clicar a vontade nos botões que mostramos no exemplo passado, nada vai ocorrer.
Estranho, não?
Afinal, queremos que, quando o botão for clicado, algo ocorra.

Pode ser que queiramos enviar o formulário para um e-mail.
Algo clicar em um botão, pode ser necessário comparar o login e senha que o usuário forneceu com as informações de um banco de dados.

Talvez você queria que o usuário seja direcionado para alguma outra página ao clicar no botão, ou que abra uma janela (um pop-up).
Quem sabe você fez uma calculadora online e ao clicar em "=" você queria que seja exibido o resultado de alguma operação matemática feita nessa calculadora.

Enfim, há simplesmente infinitas possibilidades de ações que devem ser tomadas como resultado de um clique em sue botão.
Então, afinal, o que faz um botão ao ser clicado?

A resposta é simples: o que você quiser.
É você quem define, escolhe a ação que vai ocorrer.
Isso é geralmente feito usando a linguagem de programação JavaScript (que aconselhamos aprender após o término deste Curso de HTML).

Geralmente se passa para o atributo onclick um script, como em PHP, por exemplo, que saberá tratar, lidar com seu formulário.
Mas por hora, não se estresse, já já iremos aprender a programar em JavaScript e PHP.

O botão de submeter (enviar): type="submit"

Embora exista uma infinidade de possibilidades para os botões, em formulários em HTML, há duas aplicações especiais para os botões, e uma delas é o submit.

Esta maneira é tão comum e usada, que existe um valor que damos ao atributo type, para criar um tipo especial de button, o tipo submit, de envio, cuja sintaxe é:
<input type="submit">

E o resultado é o botão:

Sim, que não tenhamos definido o atributo value na tag input, ao dizer que este type é "submit", automaticamente o HTML já sabe que é um botão do tipo submit, para enviar os dados do formulário para o local indicado pelo atributo action, da tag principal do formulário, a <form>.

O botão de limpar (resetar): type="reset"

Por fim, para encerrar este tutorial de HTML de nossa apostila, sobre botões, vamos ensinar a usar o botão especial, do tipo reset, que vai resetar ou redefinir todos os campos do formulário para seus valores originais.

Sua sintaxe é:
<input type="reset">

E  o resultado é botão:

Porém, ele isolado assim não serve de muita coisa.
Vamos criar um campo do tipo caixa de texto, vazio.
Em seguida criamos o nosso botão de reset, e colocamos estes dois campos dentro de um mesmo formulário (ou seja, dentro da mesma tag <form>).

O código é:
<form>
	<input type="text" name="email">
	<input type="reset">
</form>

O resultado é:

Antes, experimente escrever algo na caixa de texto.
Depois clique no botão "Redefinir", verá que este botão fez com que o conteúdo da caixa de texto fosse apagado. Interessante, não?

Na verdade o botão não apaga, ele redefine, bota na caixa de texto o valor inicial dela.
Como inicialmente não tinha nada nela, ele bota "nada" depois.

Experimente criar uma caixa de texto com um valor inicial:
<form>
	<input type="text" name="email" value="Insira seu e-mail aqui...">
	<input type="reset">
</form>

7 comentários:

Unknown disse...

obrigado, me ajudou muito

Rafael Projetos disse...

esses códigos não funcionam do google sites.. como posso fazer? :)

ROSMARI DE SOUZA PEREIRA disse...

olá,
Poderia me dizer o que significa onClick="submit em um site?
Qual a função dessa expressão?

grata

Ruan disse...

preciso de um botão para avaliar um determinado item, e esse botão vai guardar o valor 1 para positivo e 2 para negativo.

Aluisio santos de faria disse...

Muito boa as matérias...

Anônimo disse...

Como faço para por cor no botão???

Consulte Operadora disse...

Excelente tutorial para inciantes na área