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

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.

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

Acrescentar um comentário ao artigo

Outros elementos de formulários

Mapas de imagens com HTML

Acrescentar um comentário ao artigo

Foram enviados 29 comentários ao artigo
10 comentários não revisados
19 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

Ver outros 10 comentários ainda não revisados
Acrescentar um comentário ao artigo