Os formulários HTML

Março 2017

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 enviado para um e-mail ou para um script de página Web dinâmico como PHP, ASP ou CGI.

Como é a baliza FORM

Os formulários são delimitados pela baliza FORM, que permite reunir vários elementos de formulário (botões, campos de digitação, etc.) e que possui os seguintes atributos obrigatórios:

MÉTODO: indica a forma como serão enviadas as respostas. POST é o valor que corresponde a um envio de dados armazenados no formulário, enquanto que 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).
AÇÃO: indica o endereço de envio da informação (um script CGI ou e-mail -> mailto:endereço.email@hardware).

A baliza FORM possui como atributo facultativo 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. O atributo facultativo ACCEPT permite definir os tipos de MIMO dos dados que podem ser enviados pelo formulário.

Veja como fica a sintaxe da baliza FORM:
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
</FORM>

Exemplos de balizas 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 baliza FORM

A baliza 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 baliza FORM, pelo método indicado no atributo MÉTODO (Method).

É possível inserir qualquer elemento HTML básico em uma baliza FORM (textos, botões, quadros, links etc.), mas é mais interessante inserir elementos interativos, como:

A baliza INPUT: um conjunto de botões e campos de digitação (entrada)
A baliza TEXTAREA: uma zona de digitação
A baliza SELECT: 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 baliza INPUT

A baliza INPUT (entrada) é a baliza de base dos formulários, pois ela permite criar um bom número de elementos “interativos”. A sintaxe desta baliza é:
<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 baliza 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 baliza 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 baliza TEXTAREA

A baliza TEXTAREA permite definir uma zona de entrada mais vasta em relação à simples linha de digitação proposta pela baliza INPUT. Esta baliza possui os seguintes atributos:

cols: representa o número de caracteres que pode conter uma linha.
rows: representa o número de linhas.
name: representa o nome associado ao campo, é o nome que permitirá identificar o campo no par nome/valor.
readonly: permite impedir que o usuário altere o texto digitado por padrão no campo.
value: (valor): 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 baliza SELECT

A baliza SELECT permite criar uma lista suspensa de elementos (determinados por balizas OPTION dentro dela). Os atributos desta baliza são:

name (nome): representa o nome associado ao campo, é o nome que permitirá identificar o campo no par nome/valor.
disabled (desativado): permite criar uma lista desativada, ou seja, exibida em acinzentado.
size (tamanho): representa o número de linhas na lista (este valor pode ser maior que o número de elementos efetivos na lista).
multiple: 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
(obviamente, o envio do formulário foi bloqueado:

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 baliza FORM e os tipos de entradas

Baliza Atributo Valor Resultado Efeito Visual
<FORM> ... </FORM>METHODPOST
GET
ACTIONenvia ao endereço indicado
ENCTYPEespecifica o tipo de codificação utilizado
<INPUT> TYPEsubmitefetua a AÇÃO na baliza <FORM> <form><input type="submit" name="B1" value="Enviar"></form>
textsimples linha de texto cujo comprimento é dado pelo atributo tamanho
<form><input type="texto" size="20" name="T1"></form>
resetapaga o conteúdo do formulário <form><input type="reset" name="B2" value="Restaurar"></form>
radiobotão de rádio<form><input type="radio" checked name="R1" value="V1"></form>
checkboxcaixa a ser assinalada<form><input type="checkbox" name="C1"></form>
NAMENome
SIZETamanho do texto
<TEXTAREA> ... </TEXTAREA>NAME Zona de texto <form><textarea name="S1" rows="2" cols="20"></textarea></form>
ROWS
COLS
<SELECT>



<OPTION> ... </OPTION>




</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>
MULTIPLEVá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>SELECTEDOpçã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>
VALUEValor forçado

Veja também


HTML forms
HTML forms
Formularios HTML
Formularios HTML
Formulaires HTML - Cours et exemples
Formulaires HTML - Cours et exemples
I formulari HTML
I formulari 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.