Os formulrios HTML

Junho 2014

Interesse de um formulrio
Os formulrios interativos permitem aos autores de pginas Web dotar a sua pgina web de
elementos interativos que permitem por exemplo um dilogo com usurio da internet , maneira
coupons-rponse presentes em certas revistas. .
O leitor apreende informaes preenchendo campos ou clicando sobre botes, seguidamente
apoia sobre um boto de proposta (submit) para enviar-o quer um URL, quer dizer de maneira
geral um endereo enviar por correio electrnico ou um certificado de pgina web dinmico
como PHP, ASP ou um certificado CGI.

A baliza FORM
Os formulrios so delimitados pela baliza <FORM> </FORM>, uma baliza que permite
agrupar vrios elementos de formulrio (botes, campos de apreenso,) e que possui os
atributos obrigatrios 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 endereo do
certificado por um ponto de interrogao (para mais informao sobre os mtodos POST e
GET, consultam o artigo sobre o protocolo HTTP)
AO indica o endereo de envio (certificado CGI ou endereo correio electrnico
(mailto:adresse.email@machine))
A baliza FORM possui como atributo facultativo ENCTYPE que especifica a codificao dos
dados no URL, contudo ele no necessria precis-lo porque o valor atribudo por defeito
(application/x-www-form-urlencoded) o nico valor vlido. O atributo facultativo ACCEPT
permite definir os tipos MIMO dos dados que podem ser enviados pelo formulrio.
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

possvel inserir qualquer elemento HTML bsico numa baliza FORM (textos, botes, quadros,
relaes,) mas sobretudo interessante inserir elementos interativos. Estes elementos
interativos so :
A baliza INPUT : um conjunto de botes e campos de apreenso
A baliza TEXTAREA : uma zona de apreenso
A baliza SELECT : uma lista escolhas mltiplas

Envio dos dados

Quando um formulrio apresentado (apoio sobre o boto de proposta), os dados presentes no
formulrio so enviados ao certificado CGI sob a forma de pares nome/valor, quer dizer um
conjunto de dados representados pelo nome do elemento de formulrio, o carter =,
seguidamente o valor associado. O conjunto destes pares nome/valor separado entre elas por
esperluettes (carter &). Os dados enviados assemelhar-se-o por conseguinte isto:
champ1=valeur1&champ2=valeur2&champ3=valeur3
No caso do mtodo GET (envio dos dados atravs 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 formulrios, porque permite criar um bom nmero de
elementos interativos. A sintaxe desta baliza a seguinte:
<INPUT type="Nom du champ" value="Valeur par dfaut" name="Nom de l'lment">
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 carter = seguidamente do
valor entrado pelo utilizador, ou no caso contrrio 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 (no assinalado). Quando o compartimento
assinalado o par nome/valor enviado ao CGI
hidden : trata-se de um campo escondido. Este campo no visvel sobre o formulrio
permite precisar um parmetro 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 formulrio. necessrio neste caso precisar o tipo de dado que pode
ser enviado graas ao atributo ACCEPT da baliza FORM

imagem : trata-se de um boto de proposta personalizado, cuja aparncia a imagem

situada ao lugar precisado pelo seu atributo SRC
senha : trata-se de um campo de apreenso, no qual os carteres apreendidos aparecem
sob a forma de asteriscos a fim de camuflar a apreenso do utilizador
rdio : trata-se de um boto que permite uma escolha entre vrios propostos (o conjunto
dos botes rdios que devem levar o mesmo atributo name. O par nome/valor do boto
rdio selecionado ser enviado ao CGI. Um atributo checked para o um dos botes
permite precisar o boto selecionado por defeito
restaurar : trata-se de um boto de diminuio zero que permite unicamente
restabelecer o conjunto dos elementos do formulrio aos seus valores por defeito
submit : trata-se do boto de proposta que permite o envio do formulrio. O texto do boto
pode ser precisado graas ao atributo valor
text : trata-se de um campo de apreenso que permite a apreenso de uma linha de texto.
A dimenso do campo pode ser definidas ajuda do atributo size e a dimenso mxima
do texto apreendido graas ao atributo maxlength

A baliza TEXTAREA
A baliza TEXTAREA permite definir uma zona de apreenso mais vasta em relao simples
linha de apreenso que prope a baliza INPUT. Esta baliza possui os atributos seguintes:
colos : representa o nmero de carteres que pode conter uma linha
rows : representa o nmero 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
apreenso no for alterado por uma introduo por teclado do utilizador

A baliza SELECT
A baliza SELECT permite criar uma lista que desenrola de elementos (precisados por balizas
OPO dentro desta). Os atributos desta baliza so:
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 nmero de linhas na lista (este valor pode ser mais grande que o
nmero de elementos efetivos na lista)
mltiplo : marca a possibilidade para o utilizador de escolher vrios campos na lista

Um exemplo de formulrio
Os formulrios podem ser postos em pgina ajuda de quadros (aquilo aconselhado mesmo
para ter uma aposta em pgina cuidada). Eis um exemplo que recapitula os pontos acima e
mostrando como pr em pgina um formulrio 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>Prnom</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">Ingnieur</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 cdigo HTML
Registo de um utilizador
Nome
Nome
Homem:
Mulher:

Sexo
Funo

Enseignant

Comentrios

Tapez ici vos

commentaires

Envoyer

Atributos da baliza FORM e tipos de entradas

Baliza

Atributo
METHOD

<FORM> ... </FORM>

Resultado

Efeito Visual

POST
GET

ACTION

envia ao
endereo
indicado

ENCTYPE

especifica o tipo
de codificao
utilizado

TYPE
<INPUT>

Valor

submit

efetua a AO
em baliza
<FORM>

text

simples linha de
texto cujo
comprimento
ado pelo atributo
size

Envoyer

<INPUT>
reset

apaga o
contedo do
formulrio

radio

boto rdio

checkbox

compartimento a
assinalar

NAME

Nome

SIZE

Dimenso do
texto

Rtablir

NAME
<TEXTAREA> ...
</TEXTAREA>

ROWS

Zona de texto

COLS
<SELECT>
<OPTION>
...
</OPTION>

NAME

Choix 1

MULTIPLE

Choix 1
Choix 2
Choix 3
Choix 4

Vrias escolhas
possveis

</SELECT>

<OPTION> ...
</OPTION>

Opo
SELECTED por
defeito
VALUE

Valor
forado

Choix 1
Choix 2
Choix 3
Choix 4

HTML forms Formularios HTML Die HTML-Formulare Les formulaires HTML I formulari HTML
Este documento, intitulado Os formulrios HTML a partir de Kioskea (pt.kioskea.net) est disponibilizado sob a
licena Creative Commons. Voc pode copiar, modificar cpias desta pgina, nas condies estipuladas pela
licena, como esta nota aparece claramente.