Formulários HTML
Até agora vimos a forma na qual o HTML providencia e mostra a informação,
essencialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar
informações com nosso visitante. Desde então, este novo aspecto é primordial para a
grande quantidade de ações que se podem realizar mediante o Web: Comprara um artigo,
preencher uma enquete, enviar um comentário ao autor...
Vimos anteriormente que poderíamos, mediante os links, entrar em contato diretamente
com um correio eletrônico. Entretanto, esta opção pode ser em alguns casos pouco versátil
se o que desejamos é que o navegante nos envie uma informação bem precisa. É através
dele, o HTML que propõem outra solução muito mais ampla: Os formulários.
Os formulários são estas famosas caixas de texto e botões que podemos encontrar em
muitas páginas web. São muito utilizados para realizar buscar ou também para introduzir
dados pessoais, por exemplo, em sites de comércios eletrônico. Os dados que o usuário
introduz nestes campos são enviados ao correio eletrônico do administrador do formulário
ou também, em um programa que se encarrega de processá-lo automaticamente.
Usando HTML podemos unicamente enviar o formulário a um correio eletrônico. Se
quisermos processar o formulário mediante um programa, a coisa pode ser um pouco mais
complexa, já que teremos que empregar outras linguagens mais sofisticadas. Neste caso, a
solução mais simples é utilizar os programas pré-desenhados que nos propõem um grande
número de servidores de hospedagem e que nos permitem armazenar e processar os dados
em forma de arquivo ou outros formatos. Se sua página es ta hospedada em um servidor
que não lhe propõem estes tipos de vantagens, você sempre poderá recorrer a servidores
de terceiros que oferecem este ou outros tipos de serviços gratuitos para webs. É claro que
também existe outra alternativa que é a de aprender linguagens como ASP ou PHP que nos
permitirá, entre outras coisas, o tratamento de formulários.
Os formulários são definidos por meio das etiquetas <form> e </form>. Entre estas duas
etiquetas colocaremos todos os campos e botões que compõem o formulário. Dentro desta
etiqueta <form> devemos especificar alguns atributos.:
Action
Define o tipo de ação a realizar com o formulário. Como já dissemos, existem duas
possibilidades:
O formulário é enviado a um endereço de correio eletrônico
O formulário é enviado a um programa ou script que processa seu conteúdo.
No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio eletrônico
especificada por meio de uma sintaxe deste tipo:
<form action="[Link]
Se o que queremos é que o formulário seja processado por um programa, temos de
especificar o endereço do arquivo que contem o tal programa. A etiqueta ficaria neste caso
da seguinte forma:
<form action="endereço do arquivo"...>
Method
Este atributo se encarrega de especificar a forma na qual o formulário é enviado. Os dois
valores possíveis que este atributo pode tomar são post e get. A efeitos práticos e salvo se
lhe disserem o contrário, daremos sempre o valor post.
Enctype
Utiliza-se para indicar a forma na qual viajará a informação que for mandada pelo
formulário. No caso mais corrente, enviar o formulário por correio eletrônico, o valor deste
atributo deve ser "text/plain". Assim, conseguimos que o conteúdo do formulário seja
enviado como texto plano dentro do e-mail.
Se quisermos que o formulário se processe automaticamente por um programa, geralmente
não utilizaremos este atributo, de forma que tome seu valor padrão, ou seja, não
incluiremos enctype dentro da etiqueta <form>.
Exemplo de etiqueta <form> completa
Assim, para o caso mais habitual - o envio do formulário por correio - a etiqueta de criação
do formulário terá o seguiente aspecto:
<form action="[Link] (ou o nome do arquivo de processo)"
method="post" enctype="text/plain">
Entre esta etiqueta e seu fechamento, colocaremos o resto de etiquetas que darão forma ao
nosso formulário, as quais serão vistas nos próximos capítulos.
Elementos de formulários. Campos de texto.
O HTML nos propõem uma grande diversidade de alternativas na hora de criar nossos
formulários. Estas vão desde a clássica caixa de texto até a lista de opções passando pelas
caixas de validação.
Veremos em que consiste cada una destas modalidades e como podemos implementá-las
em nosso formulário.
Texto curto
As caixas de texto são colocadas por meio da etiqueta <input>. Dentro desta etiqueta
temos de especificar o valor de dois atributos: type e name.
A etiqueta é da seguinte forma:
<input type="text" name="nome">
Deste modo expressamos nosso desejo de criar uma caixa de texto cujo conteúdo será
chamado nome (por exemplo). O aspecto deste tipo de caixas é conhecido, como pode ser
visto aqui:
O nome do elemento do formulário é de grande importância para poder identificá-lo em
nosso programa de processamento ou no e-mail recebido. Por outro lado, é importante
indicar o atributo type, já que, como veremos, existem outras modalidades de formulário
que usam esta mesma etiqueta.
O emprego destas caixas está fundamentalmente destinado à tomada de dados breves:
palavras ou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante
que existe outra forma de tomar textos mais longos a partir de outra etiqueta.
Além destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta,
existem outra série de atributos que podem ser de utilidade, mas que não são
imprescindíveis.
size
Define o tamanho da caixa em número de caracteres. Se ao escrever o usuário chega ao
final da caixa, o texto irá desfilando à medida que se escreve fazendo desaparecer a parte
de texto que fica à esquerda.
maxlength
Indica o tamanho máximo do texto que pode ser tomado pelo formulário. É importante não
confundí-lo com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de
texto, maxlength indica o tamanho máximo real do texto que pode ser escrito. Podemos ter
uma caixa de texto com um tamanho aparente (size) que é menor do que o tamanho
máximo (maxlength). O que ocorrerá neste caso é que, ao escrever, o texto irá desfilando
dentro da caixa até que cheguemos ao seu tamanho máximo definido por maxlength,
momento no qual será impossível continuar escrevendo.
value
Em alguns casos pode ser interessante atribuir um valor definido ao campo em questão.
Isto pode ajudar ao usuário a preencher mais rapidamente o formulário ou a dar alguma
idéia sobre a natureza de dados que se requerem. Este valor inicial do campo pode ser
expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples:
<input type="text" name="nome" value="Perico Palotes">
Gera um campo deste tipo:
Josefa Palot
Nota: estamos obrigados a utilizar a etiqueta <form>
Para que fique mais claro este conteúdo, ressaltamos: Quando queremos utilizar em qualquer situação
elementos de formulário devemos escrevê-los sempre entre as etiquetas <form> y </form>. Caso
contrário, os elementos serão vistos perfeitamente no Explorer, mas não no Netscape.
Com outras palavras, no Netscape não se visualizam os elementos de formulário a não ser que estejam
colocados entre as correspondentes etiquetas de início e fim de formulário.
É por isso que para mostrar um campo de texto não adianta colocar a etiqueta <input>, e sim, coloca-
la dentro de um formulário. Assim:
<form>
<input type="text" name="nome" value="Josefa Palotes">
</form>
Veremos posteriormente que este atributo pode ser relevante em determinadas situações.
Texto oculto
Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa
confiabilidade. Este tipos de campos são análogos aos de texto com somente uma
diferença: deslocando o atributo type="text" por type="password":
<input type="password" name="nome">
Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto serão
vistos asteriscos.
Estes campos são ideais para a introdução de dados confidenciais, principalmente códigos
de acesso. Isto pode ser visto em funcionamento a seguir:
Texto longo
Se desejarmos colocar à disposição do usuário um campo de texto onde possa escrever
comodamente sobre um espaço composto de várias linhas, temos de convocar uma nova
etiqueta: <textarea> e seu fechamento correspondente.
Estes tipos de campos são práticos quando o conteúdo a enviar não é um nome, telefone ou
qualquer outro dado breve, e sim, um comentário, opinião, etc.
Dentro da etiqueta textarea deveremos indicar como para o caso visto anteriormente, o
atributo name para associar o conteúdo a um nome que será semelhante a uma variável
nos programas de processo. Além disso, podemos definir as dimensões do campo a partir
dos seguintes atributos:
rows
Define o número de linhas do campo de texto.
cols
Define o número de colunas do campo de texto.
A etiqueta fica portanto, desta forma:
<textarea name="comentário" rows="10" cols="40"></textarea>
O resultado é o seguinte:
Mesmo assim, é possível definir o conteúdo do campo. Para isso, não usaremos o atributo
value e sim, que escreveremos dentro da etiqueta o conteúdo que lhe desejamos atribuir.
Vejamos:
<textarea name="comentário" rows="10" cols="40">Escreva seu comentário....</textarea>
Terá como resultado:
Escreva seu comentário....
Outros elementos de formulários
Efetivamente, os textos são uma maneira muito prática de fazer chegar a informação do
navegante. Porém, em muitos casos, os texto são dificilmente adaptáveis a programas que
possam processá-los devidamente ou também pode ser que seu conteúdo não se ajuste ao
tipo de informação que requeremos. É por isso que, em determinados casos, pode ser mais
efetivo propor uma escolha ao navegante a partir da exposição de uma série de opções.
Este é o caso de, por exemplo, oferecer uma lista de países, o tipo de cartão de crédito para
um pagamento, etc.
Listas de opções
As listas de opções são esse tipo de menus desdobráveis que nos permite escolher uma (ou
várias) das múltiplas opções que nos propõem. Para construí-las utilizaremos uma etiqueta
com seu respectivo fechamento: <select>
Como para os casos já vistos, dentro desta etiqueta definiremos seu nome por meio do
atributo name. Cada opção será incluída em uma linha precedida da etiqueta <option>.
Podemos ver, a partir destas diretrizes, a forma mais típica e simples desta etiqueta:
<select name="estação">
<option>Primavera</option>
<option>Verão</option>
<option>Outono</option>
<option>Inverno</option>
</select>
O resultado é:
Primavera
Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos:
size
Indica o número de valores mostrados da lista. O resto pode ser visto por meio da barra
lateral de deslocamento.
multiple
Permite a seleção de mais vários elementos da lista. A escolha de mais de um elemento se
faz como com o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se
expressa sem valor algum, ou seja, não se utiliza com o igual: simplesmente se coloca para
conseguir o efeito, ou não se coloca se quisermos uma lista desdobrável comum.
Conselho: Se for possível, não utilize multiple
Não recomendamos especialmente a prática desta opção já que o manejo das teclas ctrl ou shift para
escolher várias opções pode ser desconhecido para o navegante. Evidentemente, sempre cabe a
possibilidade de explicar como funciona a pesar de ser uma complicação a mais para o visitante.
Vejamos qual é o efeito produzido por estes dois atributos mudando a linha:
<select name="estação">
por:
<select name="estação" size="3" multiple>
A lista ficará desta forma:
Primavera
Verão
Outono
A etiqueta <option> ainda pode ser precisada por meio de outros atributos.
selected
Da mesma forma que multiple, este atributo não toma nenhum valor senão que
simplesmente indica que a opção que apresenta está escolhida por padrão.
Assim, se mudamos a linha do código anterior:
<option>Outono</option>
por:
<option selected>Outono</option>
O resultado será:
Outono
value
Define o valor da opção que será enviada ao programa ou ao correio eletrônico se o usuário
escolhe essa opção. Este atributo pode ser muito útil se o formulário for enviado a um
programa visto que a cada opção se pode associar um número ou letra, o qual torna-se
mais facilmente manipulável que uma palavra ou texto. Poderíamos assim escrever linhas
do tipo:
<option value="1">Primavera</option>
Deste modo, se o usuário escolhe primavera, o que chegará ao programa (ou ao correio) é
uma variável chamada estação que terá com valor 1. No correio eletrônico receberíamos:
estação=1
Botões de radio
Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a
escolher unicamente uma das opções que lhe propõem.
A etiqueta empregada neste caso é <input> na qual teremos a atributo type que temos de
tomar o valor radio. Vejamos um exemplo:
<input type="radio" name="estação" value="1">Primavera
<br>
<input type="radio" name="estação" value="2">Verão
<br>
<input type="radio" name="estação" value="3">Outono
<br>
<input type="radio" name="estação" value="4">Inverno
Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para clicar na
página. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos com o
correspondente texto no código da página e com as etiquetas HTML que necessitarmos.
O resultado é o seguinte:
Primavera
Verão
Outono
Inverno
Como podemos ver, a cada uma das opções se atribui uma etiqueta input dentro da qual
atribuimos o mesmo nome (name) para todas as opções e um valor (value) distinto. Se o
usuário escolhe supostamente Outono, receberemos em nosso correio uma linha tal como
esta:
estação=3
Cabe assinalar que é possível pré-selecionar por padrão uma das opções. Isto se pode
conseguir por meio do atributo checked:
<input type="radio" name="estação" value="2" checked>Verão
Vejamos o efeito:
Primavera
Verão
Outono
Inverno
Caixas de validação
Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples
clique sobre a caixa em questão. A sintaxe utilizada é muita parecida com as vistas
anteriormente:
<input type="checkbox" name="paella">Adoro uma feijoada
O efeito:
Adoro uma feijoada
A única diferença fundamental é o valor adotado pelo atributo type.
Da mesma forma que para os botões de radio, podemos ativar a caixa por meio do atributo
checked.
O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo:
feijoada=on (ou off dependendo se tiver sido ativada ou não)
Botão Submit, Apagar Campos e outros em formulários
HTML
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:
Enviar
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:
site"
value="[Link]">
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 necessitá-los para realizar ações no futuro. Sua
sintaxe é a seguinte:
<input type=button value="Texto escrito no botão">
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
Comentários sobre sua satisfação pessoal
Desejo receber notificação das novidades nas linhas de ônibus.
Enviar formulário
Apagar tudo
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="[Link] 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@[Link]
cidade=Rio de Janeiro
sexo=Masculino
utilização=2
comentários=Acho que não é uma boa linha. Colocar mais ônibus.
receber_info=on
