9. Formularis

 

Índex

Concepte

Un formulari és una part d'un document HTML preparat per a recollir informació subministrada per l'usuari o per l'ordinador de l'usuari. També pot servir per a presentar dades procedents de càlculs i manipulacions fetes sobre dades prèvies.

Les dades recollides han de ser processades per alguna mena de programa. Aquest programa pot estar

En els dos primers casos es fa servir el JavaScript, al qual ens referirem més endavant. En el servidor es fan servir diversos programes: CGI, ASP i, especialment, PHP.

Pel que fa al codi HTML usat en els formularis, es limita a dues comeses:

 

Els formularis i els seus atributs

Un formulari queda delimitat per les etiquetes

<form id="f1" action="dcmnt.htm" method="post">
<p>
<label>Nom: </label>
<input type="text" size="20" id="n" />
<label>Cognoms: </label>
<input type="text" size="40" id="c" />
<input type="submit" value="D'acord" />
<input type="reset" value="Corregir" />
</p>
</form>

L'etiqueta <form...> ha d'anar acompanyada sempre de l'atribut action i, si les dades s'han de dirigir a l'exterior, de l'atribut method.

Amb l'atribut action especifiquem l'arxiu de destí de les dades introduïdes, on aquestes seran processades quan s'hi trametin. El valor d'aquest atribut consisteix en l'adreça - absoluta o relativa - de l'esmentat arxiu. Si les dades no han d'anar a l'exterior, donem a action el valor corresponent al propi document.

Els valors de method són get i post, i corresponen als dos mètodes homònims del protocol HTTP. El mètode get incorpora les dades annexes a l'URI, de manera que es fan visibles; el mètode post les tramet ocultes.

Els formularis es poden identificar amb l'atribut id.

 

Els controls

Dins els formularis - i per tant entre <form> i </form> - hi ha un o més controls, que són els recipients on es recullen les dades subministrades per l'usuari o on es presenten les obtingudes. Hi ha quatre tipus de controls:

El conjunt dels controls i els seus rètols - si n'hi ha - han d'anar inclosos entre <p> i </p>.

Cada tipus de control queda determinat per combinacions d'etiquetes i atributs, que analitzarem al llarg dels propers apartats.

Tots els controls que continguin dades que s'hagin de trametre han de tenir obligatòriament l'atribut name (sense el qual els mètodes get i post no funcionen). Segons l'ús que es faci de les dades en el servidor, també s'han d'identificar els controls amb id; habitualment s'acumulen els dos atributs.

Quan trametem les dades, aquestes s'aparellen en grups nom=valor.

 

Rètols

Amb les etiquetes

es poden incloure rètols annexos als controls dels formularis que indiquin el tipus de contingut de què seran portadors. El concepte a què fa referència el terme label s'expressaria més acuradament amb el terme català etiqueta, però preferim dir-ne rètol per evitar qualsevol confusió amb el concepte d'etiqueta d'HTML. En anglès aquest problema no es produeix; els termes respectius són tag i label.

 

Els botons

En els formularis es poden fer servir tres tipus de botons :

La sintaxi, per a tots tres, és

o bé

on Llegenda és una frase com Esborra, Renova, Envia, D'acord, Ara o similars, i tipus adopta un dels tres valors reset | push | submit.

La forma button té un avantatge: permet substituir la frase per una imatge.

Un formulari sol contenir, a més, els elements necessaris per a fer-lo més llegible i agradable, com veurem en els exemples següents.

 

Quadres de text d'una línia

Els quadres de text d'una línia serveixen per a recollir o per a presentar textos o nombres relativament curts. El format que adopten és el següent:

Els atributs size i value són optatius. El primer fa referència a l'amplada de la casella. El segon permet indicar un valor per defecte, que apareix inicialment dins la casella, i que serà substituït tan bon punt l'usuari n'hi especifiqui un altre.

Si el camp és destinat només a presentar resultats subministrats per algun programa, és convenient d'afegir-hi l'atribut readonly="readonly" (readonly), que evita que l'usuari hi pugui interactuar.

Exemple

 

Altres quadres de text

Hi ha tres tipus més de quadres de text. Els dos primers són variants de l'anterior; el tercer és força diferent.

a) De contrasenya

És una variant de l'anterior. En teclejar un text dins la casella, només hi apareixeran asteriscs; però les dades trameses contindran els veritables caràcters.

b) Amagats

De vegades es tramet alguna dada sense que l'usuari en sigui conscient. Per exemple, és possible que en trametre un formulari aquest contingui la data i l'hora de la tramesa. Els camps de text amagats es limiten a recollir aquesta mena de dades. Com que no hi intervé l'usuari, els valors han d'ésser constants ja previstes per l'autor del document o si no és imprescindible que algun programa reculli les dades i les hi inscrigui.

c) De diverses línies

El text valor és el valor inicial del quadre de text. Les propietats rows i cols fan referència a l'alçada i a l'amplada del quadre. Si cal, s'hi pot afegir l'atribut readonly="readonly" (readonly).

Notem que mentre el valor inicial en els quadres de text d'una sola línia és un atribut de la propietat value, en els de més d'una línia és un text comprès entre les etiquetes inicial i final.

Exemple

 

Camps de validació

Els camps de validació són de dues menes: uns permeten determinar una sola alternativa entre diverses d'excloents; els altres permeten respostes del tipus sí/no a una o més preguntes independents.

a) Selecció d'una sola opció entre dues o més

S'especifiquen així:

És imprescindible que el nom sigui el mateix per a totes les opcions. L'atribut checked="checked" (checked) estableix, si es vol, una selecció inicial per defecte:

El formulari tramet al lloc de destí la parella nom=valor seleccionada.

Exemple

b) Respostes afirmatives independents

Per formular una o més preguntes que s'hagin de respondre amb sí/no s'especifiquen així:

En aquest cas, si hi ha més d'una pregunta, el valor de name ha d'ésser diferent en cada cas. El rètol s'indica com en el cas anterior. Per a cada selecció afirmativa, el formulari tramet al lloc de destí la parella nom=yes.

Exemple

 

Menús desplegables

Els menús desplegables s'especifiquen amb l'estructura següent:

L'atribut size estableix el nombre de línies que es veuran simultàniament en el menú desplegable.

L'atribut value indica quin serà el valor que adquirirà la variable corresponent, i quedarà aparellat amb el name en la forma nom=valor.

Algunes vegades es deixa sense value el primer element, que així pot servir d'indicador de la finalitat del menú.

Si hi ha moltes opcions diferents, és possible d'agrupar-les en blocs mitjançant les etiquetes

Aquesta mena de menús és molt emprada per elegir un hipervincle quan n'hi ha molts de possibles, ja que estalvia espai i afavoreix la legibilitat; però només es pot fer servir en conjunció amb un programa.

Exemple

 

 

El World Wide Web Consortium (W3C)

 

El World Wide Web Consortium és una entitat internacional sense finalitat de lucre, creada l'octubre de 1994. En formen part més de 350 organitzacions d'arreu del món. El seu objectiu central és l'estandardització dels llenguatges i dels protocols, a fi d'assegurar l'operativitat d'Internet amb independència de les variants corresponents a diferències de plataforma o de programari.