Os formulários HTML
Qual é o interesse de um formulário
Os formulários permitem aos autores de páginas Web dotá-las de elementos interativos para, como um diálogo com um internauta com cupons-resposta presentes em certas revistas. O leitor deve preencher os campos ou clicar em botões. Na maior parte das vezes, ele pressiona um botão de proposta (submit) para enviá-lo por meio de um URL ou para um script de página Web dinâmico como PHP, ASP ou CGI.
Como é a tag FORM
Os formulários são delimitados pela tag FORM que permite reunir vários elementos de formulário (botões, campos de digitação, etc.) e possui atributos obrigatórios e facultativos. Entre os obrigatórios, o MÉTODO indica a forma como serão enviadas as respostas, o POST é o valor que corresponde ao envio de dados armazenados no formulário enquanto o GET corresponde ao envio dos dados codificados no URL e separados do endereço do script por um ponto de interrogação (para mais informações sobre os métodos POST e GET, consulte o artigo sobre o protocolo HTTP). Por sua vez, AÇÃO indica o endereço de envio da informação (um script CGI ou e-mail -> mailto:endereço.email@hardware).
A tag FORM também possui atributos facultativos, como o ENCTYPE, que especifica a codificação dos dados no URL, contudo não é necessário especificá-lo, porque o valor atribuído por padrão (application/x-www-form-urlencoded) é o único valor válido. Outro atributo facultativo é o ACCEPT, que permite definir os tipos de MIMO dos dados que podem ser enviados pelo formulário.
Veja como fica a sintaxe da tag FORM:
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
</FORM>
Exemplos de tags FORM:
<FORM METHOD=POST ACTION="mailto:webmaster@ccm.net">
<FORM METHOD=GET ACTION="http://br.ccm.net/cgi-bin/script.cgi">
Como inserir um elemento dentro da tag FORM
A tag FORM atua como uma espécie de recipiente para armazenar elementos que permitem ao usuário selecionar ou introduzir dados. Todos os dados serão enviados para o URL indicado no atributo AÇÃO (Action) da tag FORM, pelo método indicado no atributo MÉTODO (Method).
É possível inserir qualquer elemento HTML básico em uma tag FORM (textos, botões, quadros, links etc.), mas é mais interessante inserir elementos interativos, como a tag INPUT, que é um conjunto de botões e campos de digitação (entrada), a tag TEXTAREA, que é uma zona de digitação, e a tag SELECT, que é uma lista de múltipla escolha
Como são enviados os dados
Quando um formulário é preenchido e enviado pela pressão de um botão, os dados presentes no formulário são enviados ao script CGI sob a forma de pares nome/valor, ou seja, um conjunto de dados representados pelo nome do elemento de formulário, o caractere = e o valor associado, estando o conjunto destes pares nome/valor separado entre eles pelo caractere &.
Os dados enviados ficarão assim:
campo1=valor1&campo2=valor2&campo3=valor3
.
No caso do método GET (envio dos dados através do URL), o URL será do tipo:
http://br.ccm.net/cgi-bin/script.cgi?campo1=val1&campo2=val2
.
Como é a tag INPUT
A tag INPUT (entrada) é a tag de base dos formulários, pois ela permite criar um bom número de elementos “interativos”. A sintaxe desta tag é:
<INPUT type="Nome do campo" value="Valor por padrão" name="Nome do elemento">
.
O atributo Name (nome) é essencial porque permitirá que o script CGI conheça o campo associado ao par nome/valor, ou seja, o nome do campo será seguido do caractere “= e do valor digitado pelo usuário ou, ao contrário, do valor padrão localizado pelo atributo value.
O atributo type permite determinar qual é o elemento que representa a tag INPUT. Veja os valores que este campo pode ter:
checkbox: são caixas a serem marcadas que aceitam dois status, o checked (marcado) e unchecked (não marcado). Quando a caixa é marcada, o par nome/valor é enviado ao CGI.
hidden: trata-se de um campo oculto. Este campo não é visível no formulário e permite especificar um parâmetro fixo que será enviado ao CGI na forma de um par nome/valor.
file: permite que o usuário especifique o lugar de um arquivo que será enviado com o formulário. Neste caso, é preciso determinar o tipo de dado que pode ser enviado graças ao atributo ACCEPT da tag
FORM.
imagem: é um botão de proposta personalizado, cuja aparência é a imagem situada no lugar indicado pelo seu atributo SRC.
password (senha): é um campo com caracteres digitados, no qual eles aparecem sob a forma de asteriscos para camuflar a digitação do usuário.
radio: é um botão que permite fazer uma escolha entre várias propostas. O conjunto dos botões ‘radios’ deve levar o mesmo atributo name (nome). O par nome/valor do botão radio selecionado será enviado ao CGI. Um atributo checked para um dos botões permite especificar o botão selecionado por padrão.
reset (restaurar): é um botão de restabelecimento que só permite resgatar o conjunto dos elementos do formulário nos seus valores padrão.
submit (submeter): é o botão de proposta para o envio do formulário. O texto do botão pode ser determinado graças ao atributo value.
text (texto): trata-se de um campo de digitação que permite inserir uma linha de texto. O tamanho do campo pode ser definido com a ajuda do atributo size (tamanho) e o tamanho máximo do texto digitado graças ao atributo maxlength (comprimento máximo).
Como é a tag TEXTAREA
A tag TEXTAREA permite definir uma zona de entrada mais vasta em relação à simples linha de digitação proposta pela tag INPUT. Esta tag possui os atributos cols que representa o número de caracteres que pode conter uma linha, a rows que representa o número de linhas, a tag name que representa o nome associado ao campo, é o nome que permitirá identificar o campo no par nome/valor, a readonly que permite impedir que o usuário altere o texto digitado por padrão no campo e a value: (valor) que representa o valor que será enviado por padrão ao script se o campo de digitação não for alterado por uma introdução pelo teclado do usuário.
Como é a tag SELECT
A tag SELECT permite criar uma lista suspensa de elementos (determinados por tags OPTION dentro dela). Os atributos desta tag são o name, que representa o nome associado ao campo e permitirá identificar o campo no par nome/valor, o disabled que permite criar uma lista desativada, ou seja, exibida em acinzentado, o size que representa o número de linhas na lista (este valor pode ser maior que o número de elementos efetivos na lista) e o multiple, que mostra para o usuário a possibilidade de escolher vários campos na lista.
Como produzir um formulário ideal
Os formulários podem ser paginados com a ajuda de tabelas ou gráficos. Veja um exemplo que recapitula os pontos acima:
<FORM method=post action="cgi-bin/script.pl">
Registro de um usuário
<TABLE BORDER=0>
<TR>
<TD>Nome</TD>
<TD>
<INPUT type=text name="nome">
</TD>
</TR>
<TR>
<TD>Nome</TD>
<TD>
<INPUT type=text name="nome">
</TD>
</TR>
<TR>
<TD>Sexo</TD>
<TD>
Homem: <INPUT type=radio name="sexo" value="M">
<br>Mulher: <INPUT type=radio name="sexo" value="F">
</TD>
</TR>
<TR>
<TD>Profissão</TD>
<TD>
<SELECT name="profissão">
<OPTION VALUE="professor">Professor</OPTION>
<OPTION VALUE="estudante">Estudante</OPTION>
<OPTION VALUE="engenheiro">Engenheiro</OPTION>
<OPTION VALUE="aposentado">Aposentado</OPTION>
<OPTION VALUE="outro">Outro</OPÇÃO>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentários</TD>
<TD>
<TEXTAREA rows="3" name="comentários">
Digite aqui seus comentários</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
Veja o resultado deste código HTML:
<FORM method=post action="javascript:alert
Registro de um usuário:
| Nome |
<INPUT type="texto" name="nome"> |
| Nome |
<INPUT type="text" name="nome"> |
| Sexo | Homem: <INPUT type="radio" name="sexo" value="M"> Mulher: |
| Profissão | <SELECT name="profissão"> <OPTION VALUE="professor">professor</OPTION> <OPTION VALUE="estudante">Estudante</OPTION> <OPTION VALUE="engenheiro">Engenheiro</OPTION> <OPTION VALUE="aposentado">Aposentado</OPTION> <OPTION VALUE="outra">Outra</OPTION> </SELECT> |
| Comentários | <TEXTAREA rows="3" name="comentários">Digite aqui seus comentários</TEXTAREA> |
|
<INPUT type="submit" value="Enviar"> |
|
Quais são os atributos da tag FORM e os tipos de entradas
Veja os detalhes da tag FORM, na tabela abaixo:
| tag | Atributo | Valor | Resultado | Efeito Visual |
|---|---|---|---|---|
| <FORM> ... </FORM> | METHOD | POST GET |
||
| ACTION | envia ao endereço indicado | |||
| ENCTYPE | especifica o tipo de codificação utilizado | |||
| <INPUT> | TYPE | submit | efetua a AÇÃO na tag <FORM> | <form><input type="submit" name="B1" value="Enviar"></form> |
| text | simples linha de texto cujo comprimento é dado pelo atributo tamanho |
<form><input type="texto" size="20" name="T1"></form> | ||
| reset | apaga o conteúdo do formulário | <form><input type="reset" name="B2" value="Restaurar"></form> | ||
| radio | botão de rádio | <form><input type="radio" checked name="R1" value="V1"></form> | ||
| checkbox | caixa a ser assinalada | <form><input type="checkbox" name="C1"></form> | ||
| NAME | Nome | |||
| SIZE | Tamanho do texto | |||
| <TEXTAREA> ... </TEXTAREA> | NAME | Zona de texto | <form><textarea name="S1" rows="2" cols="20"></textarea></form> | |
| ROWS | ||||
| COLS | ||||
<SELECT>
</SELECT> |
NAME | <form><select name="D2" size="1">
<option selected>Escolha 1</option> <option>Escolha 2</option> <option>Escolha 3</option> <option>Escolha 4</option> </select></form> |
||
| MULTIPLE | Várias escolhas possíveis | <form><select name="D1" multiple size="1">
<option>Escolha 1</option> <option>Escolha 2</option> <option>Escolha 3</option> <option>Escolha 4</option> </select></form> |
||
| <OPTION> ... </OPTION> | SELECTED | Opção padrão | <form><select name="D3" multiple size="3">
<option selected>Escolha 1</option> <option>Escolha 2</option> <option>Escolha 3</option> <option selected>Escolha 4</option> </select></form> |
|
| VALUE | Valor forçado |
Assine nossa newsletter!
