a linguagem html também permite que o visitante interaja com o servidor,
preenchendo campos, clicando em botões e passando informações.
por exemplo, um livro de visitas (formulário) como o do criandosite, possui
informações que devem ser tratadas por programas, denominados scripts,
que podem armazená-las para uma posterior utilização. os scripts podem
ainda retornar um outro documento html, uma url, ou algum outro tipo de
dado para o visitante.
o elemento <form>, da linguagem html, é justamente o responsável por tal
interação. ele provê uma maneira agradável e familiar para coletar dados do
visitante através da criação de formulários com janelas de entrada de textos,
botões, etc. além do <form>, existem diversas tags que constroem os
diversos tipos de elementos de formulário. todos ficam envolvidos pelas tags
<form> e </form>.
é preciso ter em mente que o <form> coleta dados, mas não os processa.
são os scripts que entendem os dados, e é aí que entra a necessidade da
interface cgi. tal interface, permite que o servidor comunique-se com o script
que vai atuar sobre essas informações, retornando os resultados para o
navegador.
construindo formulários com form
para fazer um formulário, você tem que colocar as tags <form> e </form>.
todos os outros comandos, devem ficar dentro dessas tags.
atributos da tag <form>
a tag </form> pode conter dois atributos que determinarão para onde será
mandada a entrada do formulário. vejam quais são:
· action: esse atributo indica a localização do script que irá processar os
dados do formulário;
· method: define como os dados são enviados do formulário para o
programa que irá processá-los.
existem dois valores possíveis para o atributo method:
· get: esse atributo indica totalmente como o dado é passado para o script
ou programa definido no atributo action;
· post: passa os dados para a entrada padrão do sistema operacional.
por exemplo: a tag input
a tag <input> especifica uma variedade de campos editáveis dentro de um
formulário. ele pode receber diversos atributos que definem o tipo de
mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável
associada com o dado da entrada, o alinhamento e o campo do valor
mostrado.
o atributo mais importante do <input> é o name. ele associa o valor da
entrada do elemento. por exemplo, quando você for receber os dados, já
processados, irá vir o name=resposta dada pelo visitante.
outro atributo importante é o type. ele determina o tipo de entrada de dados.
veja como se usa este atributo:
<form>
<input name="exemplo" type="text" size="28"
value="valor padrão">
</form>
olhe como o código acima é exibido, na prática:
valor padrão
veja outros atributos do comando:
· size: serve para mudar o tamanho da janela padrão;
· post: serve para inserir um valor padrão no campo.
tipos de elementos type
você pode fazer várias coisas com o elemento type da tag <input>, para
obter os tipos de campos de dados que sejam mais adequados às suas
necessidades. acompanhe:
· radio: quando o usuário deve escolher uma resposta em uma única
alternativa, de um conjunto, utilizam-se radio buttons. um exemplo típico do
uso de tais botões, é quando a resposta pode ser sim ou não. é preciso que
todos os radio buttons de um mesmo grupo, ou seja, referentes a mesma
pergunta, tenham o mesmo atributo name. para esse tipo de entrada, os
atributos name e value, são necessários. veja a seguir:
<form>
<input name="exemplo2" type="radio"
value="sim">sim
<input name="exemplo2" type="radio"
value="não">não
</form>
veja o resultado sim não
· password: este comando serve para fazer uma campo de senhas. quando
a pessoa digitar, aparecerá o sinal de "*". além disso, há o atributo
maxlength que define o número máximo de caracteres que podem ser
digitados. o código é:
<form>
<input name="exemplo2" type="password"
maxlength="20" value="password">">não
</form>
veja o resultado:
********
· checkbox: esse comando é válido quando apenas uma resposta é
esperada. mas nem sempre esta é a situação. o tipo checkbox provê outros
botões através dos quais mais de uma alternativa pode ser escolhida.
<form>
<input name="exemplo2" type="checkbox"
value="criandosite">criandosite
<input name="exemplo2" type="checkbox"
value="supersites">supersites
<input name="exemplo2" type="checkbox"
value="topsites">topsites
</form>
veja o resultado criandosite supersites topsites
· submit: esse é o botão que submete os dados do formulário quando
pressionado, ou seja, possibilita o envio dos dados para o script que vai tratálos.
no caso, o atributo value determina o texto que vai escrito dentro do
botão. veja como se adiciona o botão:
<form>
<input name="exemplo2" type="submit"
value="enviar formulário">
</form>
veja o resultado:
enviar formulário
· reset: no caso dos botões reset, quando o botão é clicado, ele
automaticamente limpa todos os campos já preenchidos no formulário,
voltando à situação inicial. no caso, o atributo value determina o texto que
vai escrito dentro do botão. veja como se adiciona o botão:
<form>
<input name="exemplo2" type="reset"
value="apagar dados">
</form>
veja o resultado:
apagar dados
o elemento textarea
para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos
atributos cols e rows que especificam, respectivamente, o número de
colunas e linhas que se deseja mostrar para o usuário. ao contrário dos
elementos input, o textarea precisa ser aberto e fechado, usando-se as tags
<textarea> e </textarea>. o texto que é exibido dentro do campo precisa
estar entre essas duas tags. o atributo name é obrigatório, e especifica o
nome da variável que será associada à entrada do cliente (navegador).
<form>
<textarea cols="30" rows="2" name="txt"
wrap="soft">exemplo de texto dentro do
campo</textarea>
</form>
veja o resultado:
exemplo de texto dentro do cam
o elemento select
embora os usuários não precisem digitar sempre suas respostas, mostrar
cada opção através de botões consegue um bom espaço e facilita. veja como
ele funciona:
<form>
<select name="select" size="1">
<option value="um">umoption value="dois">dois
<option value="três">três
<option value="quatro">quatro
<option value="cinco">cinco
</select>
</form>
