Os formulários HTML
- Qual é o interesse de um formulário
- Como é a tag FORM
- Como inserir um elemento dentro da tag FORM
- Como são enviados os dados
- Como é a tag INPUT
- Como é a tag TEXTAREA
- Como é a tag SELECT
- Como produzir um formulário ideal
- Quais são os atributos da tag FORM e os tipos de entradas
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: <INPUT type="radio" name="sexo" value="F"> |
| 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"> </FORM> | |
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 |
Veja também
- Formulario html
- Tipos de formularios html - Melhores respostas
- Formularios html - Melhores respostas
- Criar formulario html online - Dicas - Ergonomia
- Formulario de contato html gratis - Dicas - PHP
- Espaço em html - Dicas - Linguagens
- Paragrafo html - Artigos
- Como tirar o sublinhado do link html - Dicas - HTML
Este documento, intitulado 'Os formulários HTML', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.
