Os formulários HTML

Maio 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 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>METHODPOST
GET
ACTIONenvia ao endereço indicado
ENCTYPEespecifica o tipo de codificação utilizado
<INPUT> TYPEsubmitefetua a AÇÃO na tag <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
Última modificação: 11 de abril de 2017 às 13:57 por Pedro.Saude.
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.