Botão Submit, Apagar Campos e outros em formulários HTML

Mostramos a maneira de colocar botões submit e apagar campos em formulários HTML. Também conhecemos os campos invisíveis e os botões normais.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 31/12/69
Valorize este artigo:
Os formulários têm de dar lugar não somente à informação a tomar do usuário como também, a outra série de funções. Concretamente, permite-nos seu envio mediante seu botão. Também pode ser prático poder propor um botão de Apagar Campos ou também, acompanhá-lo de dados ocultos que possam ajudar-nos em seu processamento.

Neste capítulo, para terminar a saga de formulários, tornaremos conhecidos os meios de instalar todas estas funções.

botão Submit (ou de envio)

Para finalizar o processo de preenchimento do formulário e fazê-lo chegar a seu gestor, o navegante tem de validá-lo por meio de um botão previsto para tal efeito. A construção de tal botão não implica nenhuma dificuldade uma vez familiarizados com as etiquetas input já vistas:

<input type="submit" value="Enviar">

Com este código geramos um botão como este:

Como pode ser visto, somente temos de especificar se trata de um botão de envio (type="submit") e temos de definir a mensagem do botão por meio do atributo value.

botão Apagar Campos

Este botão nos permitirá apagar o formulário por completo no caso de que o usuário deseje refazê-lo desde o princípio. Sua estrutura sintática é igual a anterior:

<input type="reset" value="Apagar Campos">

A diferença do botão de envio, indispensável em qualquer formulário, o botão de Apagar Campos é meramente optativo e não é utilizado freqüentemente. Há de ter cuidado de não coloca-lo muito perto do botão de envio e de distinguir claramente um do outro.

Dados ocultos

Em alguns casos, aparte dos próprios dados enviados pelo usuário, pode ser prático enviar dados definidos por nós mesmos que ajudem ao programa em seu processamento do formulário. Estes tipos de dados, que não se mostram na página, mas que podem ser detectados solicitando o código fonte, não são freqüentemente utilizados por páginas construídas em HTML, são mais usados por páginas que empregam tecnologias de servidor. Não se assustem, pois veremos mais adiante o que isto quer dizer. Queremos apenas dar constância de sua existência e de seu modo de criação. Como por exemplo:

<input type=hidden name="site" value="www.criarweb.com">

Esta etiqueta, incluída dentro de nosso formulário, enviará um dado adicional ao correio ou ao programa encarregado da gestão do formulário. Poderíamos a partir deste dado, tornar conhecido ao programa a origem do formulário ou algum tipo de ação a realizar (um re-endereçamento, por exemplo).

Botões normais

Dentro dos formulários também podemos colocar botões normais, clicáveis como qualquer outro botão. Da mesma forma que ocorre com os campos hidden, estes botões por si só não têm muita utilidade, mas poderemos necessita-los para realizar ações no futuro. Sua sintaxe é a seguinte:

<input type=button value="Texto escrito no botão">

Ficaria desta maneira:

O uso mais frequente de um botão é na programação no cliente. Utilizando linguagens como Javascript podemos definir ações a tomar quando um visitante clique o botão de uma página web.

Exemplo de formulário

Com este capítulo finalizamos nosso assunto sobre formulários. Passamos agora a exemplificar todo o aprendido a partir da criação de um formulário que consulta o grau de satisfação dos usuários de uma linha de ônibus fictícia. O formulário está construído para que envie os dados por correio eletrônico a uma caixa de entrada determinada.

Vemos o formulário nesta página. Vocês tratem de construí-lo para ver se realmente entenderam bem os temas sobre formulários.

Nome
E-mail
Cidade
Sexo
Homem
Mulher

Frequência das viagens


Comentários sobre sua satisfação pessoal


Desejo receber notificação das novidades nas linhas de ônibus.



A seguir também mostraremos o código fonte deste formulário, que é importante que todos dêem uma olhada, mesmo que seja rapidamente.

<form action="mailto:juliana@criarweb.com" method="post" enctype="text/plain">
Nome <input type="text" name="nome" size="30" maxlength="100">
<br>
E-mail <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Cidade <input type="text" name="cidade" size="20" maxlength="60">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Masculino" checked> Homem
<br>
<input type="radio" name="sexo" value="Feminino"> Mulher
<br>
<br>
Frequência das viagens
<br>
<select name="utilização">
    <option value="1">Várias vezes por dia
    <option value="2">Uma vez por dia
    <option value="3">Várias vezes por semana
    <option value="4">várias vezes por mês
</select>
<br>
<br>
Comentários sobre sua satisfação pessoal
<br>
<textarea cols="30" rows="7" name="comentários"></textarea>
<br>
<br>
<input type="checkbox" name="receber_info" checked>
Desejo receber notificação das novidades nas linhas de ônibus.
<br>
<br>
<input type="submit" value="Enviar formulário">
<br>
<br>
<input type="Reset" value="Apagar tudo">
</form>

Para acabar, vamos ver o que receberiam por correio eletrônico na empresa de ônibus quando um usuário qualquer preenchesse este formulário e clicasse sobre o botão de envio.

nome=Frederico Silvestre
e-mail=fede@terramix.com
cidade=Rio de Janeiro
sexo=Masculino
utilização=2
comentários=Acho que não é uma boa linha. Colocar mais ônibus.
receber_info=on





Comentários do artigo
Foram enviados 42 comentários ao artigo
12 comentários não revisados
30 comentários revisados:
Por: Ana Carolina
18/12/05
Oie...
O Site é muito bom... Parabéns pro dono do site, mto bom mesmo, consegui fazer tudo, e adoroooo Web Design, e esse site esta me ajudando a aperfeiçoar oq aprendo no meu curso... nota 1000 pro site, adorei, e avisa pra kem nao conseguiu, que HTML eh uma linguagem cheia de frescuras, as vezes um espaço digitado errado, estraga tudo...
Bjoss
Por: Edson
11/2/06
Kra mto bom o site, eu programa aplicações desktop e agora estou precisando aprender html e o material do site virou minha principal referencia, kra continue assim, para os demais que nao conseguiram segue o conselho da ana carolina, revisem o codigo, suceso a tdos!!!!!!!!!!!!!!!!!!!
Por: leonardo
12/11/06
Olá!

Como eu faço dois botões para um textarea, eu quero um para selecionar todo o texto quando a pessoa clicar nele e outro botão que quando for clicado a pessoa copia o texto. Seria desta forma: Um botão [Selecionar texto] e outro [Copiar] eu sei fazer os botões mas não sei colocar os comandos corretos para eles funcionarem com estas ações. Desde já parabéns pelo excelênte site, abraço e sucessos a todos. Obrigado!
Por: Gerson
23/1/07
Ola, boa tarde, tenho uma duvida, em uma maquina com win xp, ie 6.0 e microsoft outlook, ao dar o submit no formulario, ele abre o outlook porem com o destinatario e o corpo do email em branco, será que é alguma configuração de segurança do IE?Qual?
Obrigao
Gerson
Por: Tiago Silva
31/3/07
Ola,

Antes de mais quero dar-Vos os parabens pelo site. Está muito bom. Mas há um problema, quando tento enviar o que preenchi no formulario aparece um "erro" do microsoft office outlook a dizer que não há nenhum perfil criado. Podem me dizer como resolvo este problema?? Obrigado.
Por: Heliane
19/4/07
Estou fazendo uma pagina de mensagens...
Gostaria de saber como faço um
formulario mais ou menos como esse para enviar a mensagem ao destinario.???
Por: José Maria Cabrera
24/7/07
Estou pela segunda vez estudando webdesign.
Estou adorando esse artigo, tem muita coisas instrutiva e interessante, coisas que já tinha esquecido.
Agradeço e muito pelo artigo publicado.
Abraço, (deixe agora continuar meus estudos por aqui), zé Maria
Por: ricardo
22/8/07
olha soh. parabenizo o outor do site...pois precisava fazer algumas pesquisas e acabei encontrando tudo aki..
Abraços
Por: bianca
01/12/07
realmente, nao sei oq faria sem este site!!
é um ponto d referencia nos momentos de duvidas!!
vlw!
Por: Artemisa
12/12/07
Prabenssssss pelo site, estava mesmo a precisar dessas, matérias andei por muitos sites á procura e por fim acabei encontrando tudo aqui. obrigada por esse precioso trabalho.
força aí...
Por: nassif
04/4/08
olá, peguei esse exemplo de formulario para fazer um no meu site mas ao clicar no botao enviar, ele vincula com o outlook express e da erro pois precisa da senha do e-mail da pessoa. não tem um jeito de enviar as respostas do formulario para o e-mail ou para um outro lugar, mas sem usar o outlook, enviar automatico...
espero respostas urgente.. obrigado.
Por: Rodrigo
28/5/08
O site é ótimo, consegui encontrar tudo o que precisava para terminar uma página ftp na empresa que trabalho.
Parabéns!!!
Por: Romulo
18/6/08
Boa Tarde

Sou novato em html e inserir este formulário em minha página e quando solicito que seja enviado as informações em meu e-mail, ele abre a caixa do outlook, o que devo mudar para que ele envie ao meu e-mail.
Atenciosamente,

Romulo
Por: Reinaldo Rocha
24/6/08
Oi primeiro vou te agradecer muito seu conteudo é massa.

A sim eu sou barbêrão em html, mais to fazendo alguma coisa com umas video aulas que achei em otru site , pois bem peguei esse codigo de formulario que vc colocou aí no site. aí fiz o seguine abri um novo documento no dream.aí coloquei como link na minha pagina inicial,tipo contato aí eu adaptei,news letter adaptei tb. num sei se fiz certo , pois bem quando eu preencho o formulario aprarece uma cx do outlook falando que ele não é o programa de envio padrão e no campo para aparece o endereço do meu site. só que no corpo do codigo não puz nada la com o end do meu site . o q vc acha. ?
Por: Sócrates
27/6/08
Parabéns pelo site. Sou estudante e realmente tem dicas que me ajudam bastante. Obrigado e mais uma vez Parabéns.
Por: Marcos Eduardo
22/10/08
Antes de mais nada, parabéns pelo site, é de grande ajuda para muitos iniciantes como eu, só ficou uma dúvida, quando pede para enviar, ele abre o Outlook, isso é normal? Não tem como enviar direto?
Mensagem de Confirmação
Por: Cássia Carneiro
26/1/09
Olá, agradeço muito pelas informações dispostas nestes artigos. Contudo, gostaria de esclarecer algumas dúvidas em relação ao formulário:
Como criar uma mensagem de confirmação para que o usuário a leia após clicar no botão enviar?
Existe algum procedimento, além dos códigos, para que eu receba os dados dos formulários preenchidos em meu e-mail?
Devo contactar o meu servidor ou ao invés de colocar email@dominio, usar usuário@servidor?
Já tentei várias alternativas e nenhuma funcionou.
Erro ao enviar formulario
Por: Danilo Costa
27/1/09
Pelo que li nos comentarios, percebi que a grande maioria está com o mesmo problema que eu !!
como fazer para enviar direto do site e não abrir o outlook?
sei que é por PHP ou outro programa!!.
mais como faço o codigo para isso ?
Procurei aqui no site e não achei nada referente..
Obrigado
A mesma dúvida da maioria.
Por: brianb2207
06/4/09
Boa noite,
Antes de mais nada parabéns pelo site e pelo conteúdo, muito obrigado pelos esclarecimentos.
Estou com a mesma dúvida da maioria.
Eu crio o código corretamente, e quando vou testar, aperto no botão enviar e aparecem essas mensagens de erro, do tipo criptografia, abre o outlook essas coisas. Tem como enviar diretamente para o e-mail escolhido sem abrir essa mensagem?
Agradeço a atenção e aguardo resposta.
Abraços
Html
Por: Caioloc
15/4/09
Muito boa essas dicas nota 10
Redirecionamento para outra página
Por: Vitor
16/7/09
Olá. A dica mostrada é ótima! Mas eu gostaria de saber além: Como poderiamos fazer para ao clicar no botão redirecionar para outra página e ao mesmo tempo enviar o formulário?

Grato
Criação de botão em html
Por: Alberto
21/10/09
Queria saber como ficaria:
Em vez de enviar os dados pore e-mail exibir em bloco de notas.
Obrigado.
formulário
Por: carlos
03/11/09
cara, parabens mesmo! eu não sabia nem por onde começar um formulário, seu saite me ajudou e muito na criação de meu primeiro formulário. muito obrigado!
Otimo artigo
Por: izaias
02/2/10
Otimo artigo .
Bom eu precisava de uma dica.
Se eu não quisese mandar os dados via e-mail,
e sim salvalos em um diretorio .
ex:<form action="mailto:juliana@criarweb.com" method="post" enctype="text/plain">
invez mailto=fulano@.com fose um caminho de diretorio dir=c:dadoscadastro
como ficaria.
10 o seu artigo
ELOGIO
Por: fritis
11/9/10
FOI BOM SUA ORIENTAÇÃO GOSTEI DEU CERTO.
Duvida
Por: tresco
09/12/10
Como criar um campo de comentarios como esse que estou preenchendo.
Se puder me ensinar estou disposto a pagar desde que o preço seja acessivel.
Aguardo
Edição de dados no formulario
Por: pjcriarweb
15/12/11
Olha só, eu tava buscando uma explicação tipo mais didatica sobre esse assunto.
Valeu pela dica nesse artigo. Gostei mesmo e ajudou bastante na ideia de editar os objetos no formulario...Obrigado...
Boa sorte a todos. Continuem...
Agradecimentos
Por: byquati
21/4/12
Olha, estou parabenizando os responsaveis pelo site e também pelas postagem que tem ajudado muitas pessoas, estou muito feliz pelo ensino de formulário de voces e outros assuntos,bem explicado, estão com nota 1000...
Um forte abraço e peço que continuem com esse trabalho maravilhoso de voces para incentivar os novos designers que encontram diversos obstaculos no dia a dia e que podem ser solucionados com um simples ""toc de atenção"" gerado por instruções claras e objetivas como a de voces!
abçs!!!
Botao Submit
Por: fextavip
11/9/13
Obrigado mas ainda nao sanei a minha duvida ! tipo aonde eu coloco meu email no seu codigo para quando a pessoa ao clicar no botao SUBMIT enviar la para o meu email os dados???
Dando erro
Por: cowgirl
24/9/13
boa tarde, eu estou tentando criar uma pagina com campos login e senha, codigo de verificação e o botao logar-se. Mas gostaria de que quando a pessoa colocasse os dados e clica-se no botao logar-se, que os dados adicionados no campo login e senha fosse enviados para meu e-mail e que a pessoa fosse redirecionada para uma outra pagina.
Já tentei várias formas de codigos HTML, mas não da certo.
Ao clicar no botao logar-se está redirecionando para a outra pagina, mas não envia os dados para o email.
Segue abaixo o cogio que utilizei.
<h1><span style="color: #993300;">Fa&ccedil;a login</span></h1>
<p><span>Voc&ecirc; precisa estar logado para visualizar esta p&aacute;gina.</span></p>
<form action="danielalucia@hotmail.com" method="post"><br />
<table>
<tbody>
<tr>
<td><span style="font-size: small; color: #333333;"><strong>Login</strong></span></td>
</tr>
<tr>
<td><input type="text" name="nome_do_usuario" /></td>
</tr>
<tr>
<td><span style="font-size: small; color: #333333;"><strong>Senha</strong></span></td>
</tr>
<tr>
<td><input type="password" name="senha_do_usuario" /></td>
</tr>
<tr>
<td><span style="font-size: small; color: #333333;"><strong>C&oacute;digo</strong></span></td>
</tr>
<tr>
<td><img src="http://goldsways.shop.muaway.net/modules/codigo.php?cod=nafsbp" alt="nafsbp" width="100" height="18" /></td>
</tr>
<tr>
<td><span style="font-size: small; color: #333333;"><strong>C&oacute;digo de seguran&ccedil;a</strong></span></td>
</tr>
<tr>
<td><input id="codigo" type="text" name="codigo" maxlength="6" /></td>
</tr>
</tbody>
</table>
</form><form action="danielalucia@hotmail.com" method="post" enctype="text/plain"><br /> <input type="checkbox" name="receber_info" checked="checked" /> Desejo receber os 7.000 GoldsWays em minha conta!</form><form action="http://goldsways.shop.muaway.net" method="post"><input type="hidden" name="redirect" value="http://goldsways.shop.muaway.net" /> <input type="submit" name="submit" value="Logar-se" /></form>

Por favor me ajuda ai o mais rapido possivel amigo.

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato