Você já deve ter notado que muitas páginas utilizam de formulários para os mais diversos fins, como o envio de e-mail, inscrições em serviços, compras online, pesquisas etc.
Fazer os formulários pode-se dizer que é relativamente fácil, no entanto, um dos maiores problemas encontra-se na transmição de dados dos formulários para executar uma determinada função, pois pela lógica um formulário tem que ter alguma utilidade dentro da página, como por exemplo enviar os dados nele preenchidos para um endereço de e-mail ou para uma outra função qualquer. Para estes dados dados serem trabalhados pode-se fazer uso de um script CGI (Common Gateway Interface), um programa capaz de processar os dados conforme o que se desejá fazer com eles. Porém com o uso de um script CGI passa a se tornar necessário que você possua este programa ou o construa caso o saiba, o problema é que grande parte das pessoas não tem o script e nem sabe como fazê-lo, o que pode ser uma tarefa bastante complicada.
Bem, uma solução inteligente para isso seria usar algum script CGI já construido, de acesso público e gratuito, um exemplo desse tipo de serviço seria o AnyForm, mais a frente será mostrado como usá-lo.
Inicialmente, todo formulário deve iniciar-se pela tag <form action="..." method="..."> e finalizar-se com </form>.
Sendo que no elemento form deve-se indicar em action="..." o endereço do script que irá receber e processar os dados do formulário, se quiser usar o AnyForm você pode colocar por exemplo: action="http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi", já no atributo method="..." se indica o modo de transmição dos dados, que pode ser post ou get conforme o caso (ex: method ="post").
Elemento INPUT
Através do elemento input torna-se possível a criação de campos específicos aonde serão inseridos os dados no formulário, esse elemento deve conter obrigatóriamento o atributo name="nome" determinando um nome para cada campo, afim de que se possa fazer referências a estes no script.
Outro atributo do elemento input é o type que determinará o tipo de campo a ser adicionado no documento (de texto, multipla escolha etc).
Em muitos casos também estará se fazendo uso do atributo value que servirá para indicar um valor já pré-configurado para o campo de entrada de dados, mais a frente veremos utilizações frequêntes para este tipo de atributo.
Por exemplo:
<INPUT NAME="nome" TYPE="TEXT">
Esse exemplo indica que deve-se criar um campo do tipo texto como está abaixo:
DICA: Nesse caso você pode adicionar o atributo size="número" na tag para alterar o tamanho do campo, o atributo maxlenght="número" que indicará um número máximo de caracteres que o campo deverá aceitar, além do atributo value="Texto pré configurado" que fará com que o campo apareça com alguma coisa já escrita, veja o exemplo:
<INPUT NAME="nome" TYPE="TEXT" SIZE="40" MAXLENGHT="70" VALUE="Exemplo de Campo de Texto de uma linha">
Resultado:
Como pode ver, no exemplo mostra-se um campo de texto cujo tamanho é de 40, aceitará no maximo 70 caracteres e vem com a menssagem "Exemplo de Campo de Texto de uma linha" já escrita.
Com o input você também pode fazer um campo do tipo password, que parecido com o tipo text porém o texto digitado é visualizado como asterísticos. Por exemplo:
<INPUT NAME="senha" TYPE="PASSWORD">
Resultado (digite alguma coisa no campo):
Existem também os campos do tipo radio e checkbox, ambos são campos de tipo multipla escolha, porém o radio só permite que seja escolhida uma opção e o checkbox quantas forem desejadas. Veja os exemplos abaixo, juntamente com seus respectivos resultados:
Atributo RADIO, exemplo:
<INPUT NAME="resposta" TYPE="RADIO" NAME="alternativa" VALUE="altern1>Opção 1
<INPUT NAME="resposta" TYPE="RADIO" NAME="alternativa" VALUE="altern2>Opção 2
<INPUT NAME="resposta" TYPE="RADIO" NAME="alternativa" VALUE="altern3>Opção 3
Resultado:
Opção 1
Opção 2
Opção 3
NOTA: Para este tipo de campo é OBRIGATÓRIO a todas as opções relativas a uma determinada pergunta possuirem o mesmo atributo name e para diferenciar as alternativas usa-se o atributo value="opçãoX". Você também pode adicionar o atributo checked em algum campo para indicar que ele deve aparecer selecionado inicialmente.
Observe que a opção 1 aparece já selecionada, isto deve-se ao fato de que o atributo checked aparece previamente indicado no código do campo (observe o código do exemplo). Assim como no atributo radio, neste tipo de campo também faz-se necessário o uso dos atributos name e value da mesma forma.
Campo tipo HIDDEN
O campo tipo hidden (oculto) serve para definir dados específicos do formulário que devem ser passados para o script porém que não devem aparecer na visualização da página.
Para este tipo de campo é utilizado o atributo name="nome"para indentificá-lo e o atributo value="..."para indicar um valor para ele.
Botões para envio de dados e apagamento dos campos preechidos
Os botões de envio de dados são muito importantes nos formulários, pois servem, logicamente, para enviar os dados do formulário para o script, esse botões são construidos da seguinte forma:
<INPUT NAME="enviar" TYPE="SUBMIT" VALUE="ENVIAR">
Resultado:
No exemplo acima o atributo value="enviar" serve para determinar algo que aparecerá escrito no botão, se nada for endicado, será mostrada a palavra "submit".
Existe outra forma para submeter os dados, é se fazer uso de uma imagem no lugar do botão submit, você obterá o mesmo efeito, para isso siga o exemplo abaixo:
<INPUT NAME="enviar" TYPE="IMAGE" SRC="endereço/imagem.jpg">
Com esse metódo se faz necessário o uso do atributo src para indicar o endereço da imagem a ser visualizada, nesses casos é aconselhavel que adicione também o atributo alt="texto alternativo", para o caso da imagem não ser carregada, ser exibido algo que possa substitui-la, algo como "Enviar o Formulário" ou o que achar mais conveniente.
Existe ainda um outro tipo de botão, o do tipo reset, que quando clicado apaga todos os dados preenchidos no formulário.
Se desejar fazer uso desse botão siga o exemplo abaixo:
<INPUT NAME="limpa" TYPE="RESET" VALUE="Apagar todos os Campos">
Resultado:
Campos de Texto
Com os formulários em HTML também é possivel a criação de campos específicos para a entrada de textos, para que isso seja possível usa-se então o elemento textarea, que pode conter atributos para determinar o número de linhas e de colunas que deve ter o campo, um exemplo do uso do elemento textarea está logo abaixo:
Para a construção desse campo fez uso do seguite código HTML
<TEXTAREA COLS="60" ROWS="4">
</TEXTAREA>>
Onde textarea significa que se trata de um campo de texto, e os atributo rows e cols determinam respectivamente o número de linhas e de colunas que o campo deve possuir.
Se você desejar pode escrever dentro do código, entre as tags <textarea> e </textarea> algum texto de seu interesse, assim quando a página for carregada o campo já virá com o texto a ele acoplado. Como no exemplo:
<TEXTAREA COLS="40" ROWS="2">Texto que desejar
</TEXTAREA>
Resultado:
Elemento SELECT
Com o elemento select você pode criar lista de opções para a escolha de quem estiver preenchendo o formulário.
Abaixo três exemplos do que se pode fazer com os elementos:
1-
2-
3-
O primeira caso está mostrando apenas uma opção, onde você deve clicar na setinha ao lado do menu para poder visualizar as outras, já o segundo lhe põe a disposição todas as opção de um só vez e o terceiro lhe mostra apenas duas opções de cada vez.
Para construir um menu de opções como está no primeiro exemplo se fez uso do código abaixo:
Sendo que: <select> e </select> indicam o início e o fim do menu e as tags <option> indicam as opções do menu.
Para o segundo exemplo usou-se um código muito semelhante, porém foi adicionado ao elemento select o atributo multiple, indicando que o menu deve mostrar todas as opções que contém, como está no código abaixo:
No terceiro exemplo também foi usado um código semelhante, mas a este foi adicionado ao elemento select outro atributo, o size="número", que determina o número de opções que devem ser mostradas, neste caso se foi determinado que ele deveria mostrar 2 opções de cada vez, o código usado está logo abaixo:
