No és necessari navegar gaire per internet per trobar pàgines web en les que es demanen dades. Potser les primeres pàgines que van fer ús d'aquesta possibilitat van ser les dels sistemes de cerca. Els formularis usats per aquests sistemes són en general, bastant senzills, només és necessari un element, caixa de text, on sigui possible introduir la paraula o frase a cercar.
Els formularis són la manera més popular de fer pàgines web interactives. De la mateixa manera que un formulari en paper, un formulari en una pàgina web permet a l'usuari introduir la informació que se li demana.
Hi ha formularis més complexos on s'ofereix als usuaris la possibilitat de realitzar suggeriments, oferir comentaris o enviar qualsevol altre tipus d'informació. En general, aquests formularis ocupen una pàgina sencera i estan formats per diversos elements.
<form> ... </form>
L'etiqueta <form>
és
una etiqueta que envolta tot el formulari. D'acord amb les
especificacions de l'XHTML aquesta etiqueta és imprescindible per a
crear elements per a ser mostrats en una pàgina web.
L'etiqueta <form>
es
pot situar a qualsevol lloc del document XHTML, però sempre dintre del <body>
.
Totes les etiquetes d'introducció de dades, de selecció i d'àrees de
text han d'estar incloses dintre de <form>
... </form>
. L'etiqueta <form>
té els següents atributs:
action
(requerit): aquest atribut
li diu al navegador on esta localitzat el CGI que
processarà tot el formulari. Normalment es tracta d'un script o
programa que està allotjat en el servidor web, però es pot utilitzar el
correu electrònic per enviar els resultats dels formularis. Per exemple:
<form action="mailto:identificador@xtec.cat">
L'única vegada que es pot obviar aquest atribut és quan s'utilitza un clic o altres mètodes per accedir al formulari.
method
:
el method
és la forma que utilitzarà el
navegador per comunicar-se amb el servidor web i enviar-li la
informació del formulari. Aquest atribut pot ser o bé get
o bé post
.
post
:
aquest és el mètode més comú, i envia al servidor la informació del
formulari com un bloc de dades, mitjançant protocols HTTP. L'usuari
només veu l'adreça del formulari web a la barra d'adreces web.get
: aquest mètode enviar una
petició al servidor i les dades del formulari són afegides a la
informació de l'URL a continuació d'un signe d'interrogació. Per
exemple, això és el que veu l'usuari a la seva barra d'adreces web:
http://www.server.com/cgi-bin/test.pl?name=value
El signe ?
es el delimitador
que ens permet separar la consulta de la URL.
Hi ha un parell de grans diferències entre get
i put
que són realment importants:
get
,
ja que no hi ha manera de marcar com adreça d'interès una pàgina que ha
estat retornada com a resultat d'un post
. Per
exemple una aplicació web que retorna una llista de resultats després
d'una cerca, segurament els usuaris voldran desar la pàgina com una
adreça d'interès. Per altra banda, si es tracta d'una aplicació web que
processa ordres, segurament no es voldrà que els usuaris puguin marcar
la pàgina.get
és quan les dades en el
formulari són privades, com targes de crèdit o contrasenyes. Ja que
l'adreça URL és visible, la informació privada es pot trobar amb
facilitat per altres usuaris si busquen en l'historial del navegador o
si la pàgina queda desada com adreça d'interès. Encara més, si
s'utilitza un element <textarea>
,
s'hauria d'utilitzar el mètode post
, ja que
segurament s'envien moltes dades.Finalment, les peticions del mètode get
tenen un límit de 256 caràcters, mentre que el mètode post
no té límit en la mida del paquet de dades que s'envia.
<form method="post" action="mailto:identificador@xtec.cat">
enctype
: aquest atribut indica el
format en que les dades són enviades al servidor. En general,
s'utilitza en formularis on hi ha una opció de pujar fitxers. El valor
per defecte és:
application/x-www-form-urlencoded
<form method="post" action="mailto:identificador@xtec.cat" enctype="text/plain">
<fieldset> ...
</fieldset>
Aquesta etiqueta emmarca un grup d'elements d'un formulari que
estan relacionats de forma lògica. El navegador dibuixa una caixa al
voltant del conjunt de camps per indicar que estan relacionats. Per
exemple, un formulari pot contenir uns camps sobre dades personals com
el nom, cognoms, adreça de correu, etc.; alguns camps que sol·liciten
la opinió; i d'altres per "altres comentaris". <fieldset>
pot usar-se per agrupar els camps.
<fieldset> <p> Nom: <input name="nom" > Cognoms: <input name="cognom" /> </p> <p> Adreça electrònica: < input name="mail" /> </p> <p> Contrasenya <input name="senya" type="password" /> </p> </fieldset>
<input> ... </input>
L'etiqueta <input />
indica als usuaris que han d'introduir dades en el formulari per
trametre-les als servidor web. Hi ha deu tipus específics d'aquesta
etiqueta, cal triar el tipus d'etiqueta input
més adequat i col·locar-lo en el lloc adient.
/>
,
i no amb l'etiqueta </input>
.
<input type="tipus d'etiqueta" />
En tots els elements presents a l'etiqueta <input
/>
l'atribut name
és
obligatori excepte en el cas dels botons submit
i reset
.
Aquest element permet als lectors escriure qualsevol
informació de text dintre del quadre. El quadre de text és el tipus més
comú de l'etiqueta <input />
, i
per fer l'HTML més fàcil, és el tipus per defecte, això vol dir que
serà el que apareixerà mentre no s'especifiqui cap altre tipus de <input
/>
.
<input type="text" name="" />
L'element button
es un tipus d'input
que us permet crear botons personalitzats que no tenen, per defecte,
l'acció dels botons d'enviar
i reinicialitzar
.
Els principals atributs d'aquesta etiqueta són:
type= " tipus "
, que pren el
valor, per defecte, de submit
, reset
i button
.name= " nom "
, assigna un nom
identificador únic al botó.value= " tex "
, defineix el text
que apareixerà en el botó.<input type="button" name="" value="" />
Hi ha dos tipus de botons amb unes funcions específiques ja predeterminades:
Submit
: per tal que un formulari
sigui enviat cal algun tipus de botó d'enviament. Aquest camp envia la
informació del formulari al servidor web quan es prem. El valor per
defecte varia segons el navegador: Submit
,
per Internet Explorer o bé Submit Query
per
el navegador Netscape. Si es vol canviar cal utilitzar l'atribut value=""
.
<input type="submit" name="" value="" />
Reset
: aquest tipus de botó,
per defecte, neteja el formulari i el torna a la seva forma original,
amb entrades buides, o bé amb els valors establerts per defecte.
Aquesta reinicialització la realitza el navegador, no el servidor.
Aquest botó tindrà per defecte el valor Reset
,
si es vol que aparegui un altre valor cal canviar-lo utilitzant
l'atribut value=""
.
<input type="reset" name="" value="" />
Image
: amb el tipus d'input
d'image
, es té encara un altra opció per a un
botó en els formularis. La imatge té el funcionament semblant al d'un
botó. Es pot utilitzar qualsevol tipus d'imatge en els formularis.
<input type="image" name="boto" src="../../img/formulari4.png" alt="botó" />
Aquest element permet donar als lectors un llistat d'ítems amb quadres de verificació per poder triar. Si així es determina, la tria pot ser de més d'un element, o bé pot ser usat com a botó de "si/no", on només hi ha una resposta possible. Si al formulari hi ha un grup de quadres de verificació, es poden agrupar tots donant-los-hi el mateix nom encara que els valors s'enviaran al formulari per separat.
<input type="checkbox" name="" />
Aquesta opció permet als lectors la tria d'un element d'entre
diversos. De la mateixa manera que el tipus d'input
,
checkbox
, les diferents opcions es poden
agrupar sota el mateix name
. Si el lector
tria un valor, tots els altres queden descartats.
<input type="radio" name="" />
El camp de la contrasenya, password
,
s'assembla molt a un camp de text. Tanmateix, quan s'escriu, les
lletres queden amagades. Això permet oferir una mica més de seguretat
pel que fa a les contrasenyes en els formularis. Cal recordar, però,
que en cap cas les contrasenyes s'envien encriptades. Així que no no és
bo refiar-se gaire en la seguretat d'aquesta important informació
secreta.
<input type="password" name="" />
Aquest tipus d'input
permet als
lectors pujar arxius al servidor web. Cal tenir present, però, el CGI
per permetre la càrrega d'arxius per part dels usuaris de la web.
<input type="file" title="" name="" />
Els camps amagats, hidden
, són
utilitzat per a "estalviar feina" en un formulari. En general,
s'utilitzen en formularis que tenen més d'una pàgina i hi ha informació
que cal passar d'una pàgina l'altra. Aquests camps no es mostren a la
web, però la informació és enviada alhora amb altres camps d'informació.
<input type="hidden" name="" />
No tots els elements d'un formulari són elements <input
/>
. N'hi ha d'altres com <textarea>
per escriure més d'una línia de text, i <select>
per als menús.
L'element <textarea>
crea una àrea de text multi-línia en la que es pot escriure. Si les
línies de text introduïdes són més que les de l'àrea de text,
apareixerà una barra de desplaçament al costat dret.
Qualsevol text situat entre les etiquetes <textarea>
... </textarea>
serà el text inicial en
l'àrea de text de control del navegador.
<textarea name="" rows="" cols=""></textarea>
L'element <select>
crea un control de menú desplegable en la pàgina web, tot i que
l'aparença pot variar depenent del navegador que s'estigui utilitzant.
El menú proporciona als lectors un forma de triar d'entre un conjunt
d'opcions. Aquest element es combina amb l'element <option>
per crear el menú. L'element select
tanca tot
el grup d'opcions amb l'etiqueta </select>
.
<select name=""> <option value=""> </option> <option value=""> </option> <option value=""> </option> <option value=""> </option> <option value=""> </option> </select>
L'element <option>
treballa amb l'element <select>
per crear un menú desplegable. És convenient utilitzar un element <option>
per cada ítem del menú. El text contingut entre les dues etiquetes <option>
... </option>
és el que s'utilitza per la
descripció de cada ítem del menú. Cada opció del menú també inclou un
valor que representa l'ítem del menú.
<select name=""> <option value=""> </option> <option value=""> </option> <option value=""> </option> <option value=""> </option> <option value=""> </option> </select>
Amb les pistes que tens més amunt, elabora un formulari per enviar un comentari a un bloc. Per aquest formulari heu de triar com a mínim cinc elements diferents d'entre els següents elements:
Podeu fer les vostres proves en línia i comprovar els resultats del vostre formulari amb les opcions triades.