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
Várias vezes por dia Uma vez por dia Várias vezes por semana várias vezes por mês

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