Interesse de um formulário

Os formulários interativos permitem aos autores de páginas Web dotar a sua página web de elementos interativos que permitem por exemplo um diálogo com usuário da internet , à maneira coupons-réponse presentes em certas revistas. .

O leitor apreende informações preenchendo campos ou clicando sobre botões, seguidamente apoia sobre um botão de proposta (submit) para enviar-o quer um URL, quer dizer de maneira geral um endereço enviar por correio electrônico ou um certificado de página web dinâmico como PHP, ASP ou um certificado CGI.

A baliza FORM

Os formulários são delimitados pela baliza <FORM>… </FORM>, uma baliza que permite agrupar vários elementos de formulário (botões, campos de apreensão,…) e que possui os atributos obrigatórios seguintes:

• METHOD indica sob qual forma será enviada as respostas “POST” é o valor que corresponde um envio de dados armazenados no corpo do pedido, enquanto “GET” corresponde um envio dos dados codificados no URL, e separados do endereço do certificado por um ponto de interrogação (para mais informação sobre os métodos POST e GET, consultam o artigo sobre o protocolo HTTP)
• AÇÃO indica o endereço de envio (certificado CGI ou endereço correio electrônico (mailto:adresse.email@machine))

A baliza FORM possui como atributo facultativo ENCTYPE que especifica a codificação dos dados no URL, contudo ele não é necessária precisá-lo porque o valor atribuído por defeito (application/x-www-form-urlencoded) é o único valor válido. O atributo facultativo ACCEPT permite definir os tipos MIMO dos dados que podem ser enviados pelo formulário.

Eis a sintaxe da baliza FORM:

<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>

Eis cerca de exemplos de balizas FORM :

<FORM METHOD=POST ACTION="mailto:webmaster@kioskea.net">

<FORM METHOD=GET ACTION="http://pt.kioskea.net/cgi-bin/script.cgi">

Dentro da baliza FORM…

É possível inserir qualquer elemento HTML básico numa baliza FORM (textos, botões, quadros, relações,…) mas é sobretudo interessante inserir elementos interativos. Estes elementos interativos são :

• A baliza INPUT : um conjunto de botões e campos de apreensão
• A baliza TEXTAREA : uma zona de apreensão
• A baliza SELECT : uma lista à escolhas múltiplas

Envio dos dados

Quando um formulário é apresentado (apoio sobre o botão de proposta), os dados presentes no formulário são enviados ao certificado CGI sob a forma de pares nome/valor, quer dizer um conjunto de dados representados pelo nome do elemento de formulário, o caráter “=”, seguidamente o valor associado. O conjunto destes pares nome/valor separado entre elas por esperluettes (caráter &). Os dados enviados assemelhar-se-ão por conseguinte à isto:

champ1=valeur1&champ2=valeur2&champ3=valeur3

No caso do método GET (envio dos dados através do URL), o URL assemelhar-se-á à uma cadeia do tipo:

http://pt.kioskea.net/cgi-bin/script.cgi?champ1=val1&champ2=val2

A baliza INPUT

A baliza INPUT é a baliza essencial dos formulários, porque permite criar um bom número de elementos “interativos”. A sintaxe desta baliza é a seguinte:

<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément">

Atributo name é essencial porque ele permitirá certificado CGI de conhecer campo associado par nome/valor, quer dizer que o nome do campo será seguido do caráter “=” seguidamente do valor entrado pelo utilizador, ou no caso contrário do valor por defeito localizado pelo atributo valor.

O atributo tipo permite precisar o tipo de elemento que representa a baliza INPUT, eis os valores que este campo pode tomar:

• checkbox : trata-se de compartimentos a assinalarem que podem admitir dois estados: checked (assinalado) et unchecked (não assinalado). Quando o compartimento é assinalado o par nome/valor é enviado ao CGI
• hidden : trata-se de um campo escondido. Este campo não visível sobre o formulário permite precisar um parâmetro fixo que será enviado ao CGI sob a forma de par nome/valor
• fila : trata-se de um campo que permite ao utilizador precisar o lugar de um ficheiro que será enviado com o formulário. É necessário neste caso precisar o tipo de dado que pode ser enviado graças ao atributo ACCEPT da baliza FORM
• imagem : trata-se de um botão de proposta personalizado, cuja aparência é a imagem situada ao lugar precisado pelo seu atributo SRC
• senha : trata-se de um campo de apreensão, no qual os caráteres apreendidos aparecem sob a forma de asteriscos a fim de camuflar a apreensão do utilizador
• rádio : trata-se de um botão que permite uma escolha entre vários propostos (o conjunto dos botões rádios que devem levar o mesmo atributo name. O par nome/valor do botão rádio selecionado será enviado ao CGI. Um atributo checked para o um dos botões permite precisar o botão selecionado por defeito
• restaurar : trata-se de um botão de diminuição à zero que permite unicamente restabelecer o conjunto dos elementos do formulário aos seus valores por defeito
• submit : trata-se do botão de proposta que permite o envio do formulário. O texto do botão pode ser precisado graças ao atributo valor
• text : trata-se de um campo de apreensão que permite a apreensão de uma linha de texto. A dimensão do campo pode ser definidas à ajuda do atributo size e a dimensão máxima do texto apreendido graças ao atributo maxlength

A baliza TEXTAREA

A baliza TEXTAREA permite definir uma zona de apreensão mais vasta em relação à simples linha de apreensão que propõe a baliza INPUT. Esta baliza possui os atributos seguintes:

• colos : representa o número de caráteres 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 o utilizador alterar o texto entrado por defeito no campo
• valor : representa o valor que será enviado por defeito ao certificado se o campo de apreensão não for alterado por uma introdução por teclado do utilizador

A baliza SELECT

A baliza SELECT permite criar uma lista que desenrola de elementos (precisados por balizas OPÇÃO dentro desta). Os atributos desta baliza são:

• name : representa o nome associado ao campo, é o nome que permitirá identificar o campo no par nome/valor
• disabled : permite criar uma lista desativada, quer dizer afixada em acinzentado
• size : representa o número de linhas na lista (este valor pode ser mais grande que o número de elementos efetivos na lista)
• múltiplo : marca a possibilidade para o utilizador de escolher vários campos na lista

Um exemplo de formulário

Os formulários podem ser postos em página à ajuda de quadros (aquilo é aconselhado mesmo para ter uma aposta em página cuidada). Eis um exemplo que recapitula os pontos acima e mostrando como pôr em página um formulário à ajuda de um quadro:

<FORM method=post action="cgi-bin/script.pl">
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
	<TD>Nom</TD>
	<TD>
	<INPUT type=text name="nom">
	</TD>
</TR>

<TR>
	<TD>Prénom</TD>
	<TD>
	<INPUT type=text name="prenom">
	</TD>
</TR>

<TR>
	<TD>Sexe</TD>
	<TD>
	Homme : <INPUT type=radio name="sexe" value="M">
	<br>Femme : <INPUT type=radio name="sexe" value="F">
	</TD>
</TR>

<TR>
	<TD>Fonction</TD>
	<TD>
	<SELECT name="fonction">
		<OPTION VALUE="enseignant">Enseignant</OPTION>
		<OPTION VALUE="etudiant">Etudiant</OPTION>
		<OPTION VALUE="ingenieur">Ingénieur</OPTION>
		<OPTION VALUE="retraite">Retraité</OPTION>
		<OPTION VALUE="autre">Autre</OPTION>
	</SELECT>
	</TD>
</TR>
<TR>
	<TD>Commentaires</TD>
	<TD>
	<TEXTAREA rows="3" name="commentaires">
	Tapez ici vos commentaires</TEXTAREA>
	</TD>
</TR>

<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" value="Envoyer">
	</TD>
</TR>
</TABLE>
</FORM>

Eis o resultado deste código HTML

Registo de um utilizador

Atributos da baliza FORM e tipos de entradas