APUNTS PRÀCTICS HTML 4.0
En aquest capítol es tracten els següents elements:
Contingut del capítol:
Els formularis són fulls amb diverses opcions a on es pot introduïr o marcar text i enviar-lo automàticament al destinatari. Tant poden servir com per enviar comentaris d'un programa, fer comandes de productes, triar alguna opció, etc.
En un formulari hi ha diversos elements predefinits per a que l'usuari marqui o entri informació, com són: caixes de text, caixes d'àrea de text, botons de sel.lecció, botons de comprovació, caixes desplegables, botons d'esborrar constinguts i botons d'enviar formulari.
Un cop l'usuari ha emplenat el formulari i l'ha enviat, generalment es necessita en el servidor del que rep la informació, un programa que gestioni el formulari, l'analitzi, i el torni avaluat, validat o l'envii al destinatari de la informació de forma que la pugui llegir correctament.
A continuació es mostra un exemple d'un formulari, no operatiu, complert amb
diferents opcions.
El camp nom de la persona és un camp tipus caixa de text
Text Box, Característiques ordinadors són camps tipus Checkbox,
Sexe és un camp tipus Radio Button, País és un camp tipus caixa
desplegable Pop-Up Box, Comentaris és un camp tipus Text Area Box,
el botó esborrar formulari i el botó enviar són camps tipus Reset i
Send buttons. 
La primera cosa que s'ha d'especificar en la pàgina a on s'ubicarà el formulari, és que comença un formulari i especificar el que es vol fer amb la informació del formulari. La línia inicial és:
<FORM METHOD="POST" ACTION="mailto:cfi@cfi.es">
METHOD. El mètode d'enviar la informació pot ser POST o bé GET.
Amb l'opció POST. El formulari, un cop emplenat, a l'hora d'enviar-lo el text del formulari amb el seus camps, es converteixen en un arxiu, que, o bé arriva al servidor i amb algún programa el tracta, o bé arriva directament a l'usuari via e-mail per a la seva lectura o anàlisi. En el capítol 10 es mostra un exemple d'un formulari rebut via e-mail.
Amb l'opció GET. Molts documents HTML són visualitzats provinents
d'alguna consulta. Amb aquest mètode, tota la informació del formulari, a l'hora
d'enviar-lo, s'afegeix al final de l'adreça URL, i és el servidor, que amb algún
programa la tracta i en recupera el document apropiat.
Per exemple, si fem
una consulta a Lycos sobre webs contenint la paraula "bergueda", el
formulari envia al servidor la següent adreça URL:
http://www.lycos.com/cgi-bin/pursuit?cat=lycos&query=bergueda.
Un
cop aquesta arriba, el servidor la tracta i torna a enviar a l'usuari els
resultats obtinguts.
ACTION. En quan a l'acció, li diem a on l'ha d'enviar, que pot ser a
una adreça e-mail o bé a una adreça http per a que el servidor analitzi el
formulari, via programa cgi, i en faci alguna cosa .
Si és una adreça
e-mail: ACTION="mailto:cfi@cfi.es
Si és una adreça http:
ACTION="http://www.eco.es/cgi-bin/formulari.pl"
A l'acabar tota la definició d'element d'un formulari, s'ha d'acabar tancant
el formulari,amb:
</FORM>
Un cop definit l'inici de formulari, ja podem posar a dins d'ell els elements que ens permetin entrar o marcar-hi informació. Cada element que es defineixi vindrà a ser un camp, com els de qualsevol base de dades.
TEXT BOX: És una caixa llarga d'entrada de text en 1 sola línia, i que
pot tenir un nom i una llargada predefinida. La sintaxi és:
<INPUT TYPE="TEXT" NAME="nom-del-camp" SIZE="mida">
on
a nom-del-camp hi anirà el nom intern, no el que apareix externament, que
volguem donar-li al camp, i a mida, la llargada del camp.
En l'exemple següent, el nom extern del camp és Cognoms i Nom:, el nom intern
és Nom1, i la mida de la caixa=20.
| <form method="POST"> <p>Cognoms i Nom: <input type="text" size="20" name="Nom1"></p> </form> |
Input Type=Text és l'opció per defecte, a on tots els caràcters són visibles.
També pot tenir valor de Password, que serveix per a que els usuaris
puguin entrar una paraula clau i que no sigui vista per la gent que l'envolta.
| <form method="POST"> <p>Clau d'accés: <input type="password" size="5" name="PSW"></p> </form> |
 |
TEXT AREA BOX: Un altre element són les caixes d'entrada de text
d'entrada múltiple. Aquesta és la diferència amb TEXT BOX, es pot entrar més
d'una línia. La sintaxi és:
<TEXTAREA NAME="nom-del-camp" ROWS=número
COLS=número></TEXTAREA>
on a nom-del-camp hi
anirà el nom intern, no el que apareix externament, que volguem donar-li al
camp, a ROWS hi anirà el número de files que volguem que ocupi la caixa,
i a COLS hi anirà el número de columnes d'amplada de la caixa. Cal fer
notar que, a diferència del TEXT BOX, amb TEXT AREA BOX es requereix tancar el
tipus de caixa amb </TEXTAREA>.
En l'exemple següent, es defineix un Text Area Box de nom exterior
Observacions, amb nom interior de camp Obs, definint 3 files i 30 columnes.
| <form method="POST"> <p>Observacions: <textarea name="Obs" rows="3" cols="30"></textarea></p> </form> |
Les caixes de selecció són requadres de text similars als Text Box, però amb
un botó lateral que permet seleccionar un element d'una llista. La sintaxi és:
<SELECT NAME="nom-del-camp"
SIZE="mida">
<OPTION>opció, ...
<OPTION
SELECTED>opció-seleccionada
</SELECT>
A on
nom-del-camp és el nom del camp d'ús intern, la mida és el gruix de la caixa,
per defecte=1, a OPTION hi anirà cada opció que es vulgui fer veure per a ser
seleccionada, i a OPTION SELECTED hi anirà l'opció seleccionada d'entrada, i que
es pot canviar posteriorment. S'ha d'informar de l'acabament de la definició del
pop-up box amb </SELECT>
En l'exemple següent, el POP-UP-BOX té per nom intern selec1, de nom extern
és Seleccioni un color, hi va varis colors entrats, com poden ser el groc,
vermell, blanc, negre, taronja i blau. L'opció seleccionada per defecte és el
color violeta.
| <form method="POST"><p>Seleccioni un
color:<select
name="selec1"size="1"> <option>Groc</option> <option>Vermell</option> <option>Blanc</option> <option>Negre</option> <option>Taronja</option> <option selected>Violeta</option> <option>Blau</option> </select></p> </form> |
Amb aquest tipus de camp també es poden fer múltiples seleccions amb l'opció
MULTIPLE. La sintaxi és:
<SELECT NAME="nom-del-camp"
MULTIPLE SIZE="mida">
<OPTION>opció, ...
<OPTION
SELECTED>opció-seleccionada
</SELECT>
Això farà que
de la llista mostrada, poguem seleccionar més d'un. Amb la tecla Control pitjada
(Ctrl) es poden seleccionar elements separats entre ells, i amb la tecla
Majúscules es poden seleccionar elements que estan junts.
Els radio buttons serveixen per a seleccionar un cosa, d'un grup d'opcions.
La seva característica és que en cada grup d'opcions, només es pot seleccionar 1
element. La seva sintaxi és:
<INPUT TYPE="RADIO" NAME="nom-del-camp"
VALUE="valor-del-camp"
A Input Type es defineix amb l'opció RADIO per
als radio buttons, a nom-del-camp hi anirà el nom intern del camp, si és l'opció
seleccionada per defecte la sintaxi seria CHECKED NAME, i a Value hi va el valor
intern d'aquell camp que s'enviarà.
En l'exemple següent es defineix un Radio Button amb 3 opcions, demanant
l'edat, la primera opció és de 16 a 20 anys, la segona opció i seleccionada per
defecte, de 21 a 28 anys i la tercera opció de 29 a 36 anys. Els radio buttons
només permeten 1 selecció.
| <form method="POST"> <p>Edat: de 16 a 20:<input type="radio" name="boto1"value="16a20"> de 21 a 28:<input type="radio" checkedname="boto2" value="21a28"> de 29 a 36:<input type="radio"name="boto3" value="29a36"> </p> </form> |
De forma similar als radio buttons, els Checkbox serveixen per a seleccionar
elements, però amb una diferència, permeten més d'una selecció. La seva sintaxi
és:
<INPUT TYPE="CHECKBOX" NAME="nom-del-camp"
VALUE="valor-del-camp"
A on a INPUT TYPE es defineix com a checkbox, a
nom hi va el nom intern del camp i a valor, el valor intern que s'enviarà.
En l'exemple següent es defineix un Checkbox amb 4 elements, demanant les
característiques de l'ordinador de l'usuari, la primera opció i la seleccionada
per defecte és si té Windows'95, el nom d'aquest camp és C1 i el valor que
s'enviarà si està activada és w95, la segona si té unitat CD-ROM, la tercera si
té targeta de só i la quarta si té micròfon.
| <form method="POST"> <p>Característiques de l'ordinador personal:</p> <p>Windows 95:<input type="checkbox" checked name="C1"value="w95"> CD-ROM:<input type="checkbox" name="C2"value="CD"> Targeta de só:<input type="checkbox" name="C3"value="SO"> Micròfon:<input type="checkbox" name="C4"value="MIC"></p> </form> |
La diferent sol.licitud d'informació la podem agrupar per grups temàtics. Aquesta agrupació permet que sigui més fàcil d'entendre pels usuaris el seu propòsit, facilita la navegació.
El següent exemple mostra un grup d'opcions agrupades amb un títol genèric: "Característiques de l'ordinador personal: ", però aquest títol no està integrat en el grup d'opcions, és un text normal, i a sota, les opcions..
|
Fent servir l'element FIELDSET, permet agrupar per agrupacions d'opcions per grups temàtics, i se li pot donar un valor o text, amb l'element LEGEND.
|
Donant el següent resultat:
També es pot presentar l'opció de voler mostrar diferents valors, però que internament en tenen un de sol. Amb l'element OPTGROUP es permet definir els diferents valors a mostrar i el valor únic que tenen.
Amb l'exemple següent es mostren una serie de pobles, que l'usuari n'ha d'escollir un. Però el que volem no és el poble, en sí, sinó la comarca a la que pertany.
| <FORM
method="post"> <P> <SELECT name="Comarca:"> <OPTGROUP label="Berguedà"> <OPTION label="b1" value="Avià">Avià <OPTION label="b2" value="Puig-Reig">Puig-Reig <OPTION label="b3" value="Berga">Berga </OPTGROUP> <OPTGROUP label="Osona"> <OPTION label="o1" value="Vic">Vic <OPTION label="o2" value="Les Masies de Voltregà">Les Masies de Voltregà </OPTGROUP> <OPTGROUP label="Solsonès"> <OPTION label="s1" value="Pinós">Pinós <OPTION label="s2" value="Guixers">Guixers <OPTION label="s3" value="Solsona">Solsona </OPTGROUP> </SELECT> </FORM> |
Un cop el formulari s'ha emplenat, ha arrivat l'hora d'enviar-lo al
destinatari. Això s'aconsegueix al el botó d'enviar. La sintaxi és la següent:
<INPUT TYPE="SUBMIT" NAME="nom-del-camp" VALUE="text-botó"
A
on a Input Type es defineix amb SUBMIT per a definir un botó d'enviar, a Name hi
va el nom intern del camp, i a VALUE el text que apareix externament al botó.
El botó enviar enviarà els camps i el contingut dels camps a l'adreça URL
definida a l'inici del formulari: <FORM METHOD="POST"
ACTION="adreça">
El l'exemple següent, es defineix el botó d'enviar amb el valor "Enviar
Formulari"
| <form method="POST"> <p><input type="submit" name="B1" value="Enviar formulari"></p> </form> |
El botó enviar també es pot substituïr per una imatge, fent la mateixa funció
d'enviar. La sintaxi és: <INPUT TYPE="IMAGE" NAME="nom-intern"
SCR="adreça-lloc de la imatge"
D'aquesta forma substituim el botó amb un
text per una imatge.
| <form method="POST"> <p><input type="image" name="I1" src="env.gif" align="bottom"border="0" width="142" height="53"></p> </form> |
Una altra forma per a enviar informació d'un formulari és amb l'element BUTTON
|
amb el següent resultat:
També pot passar que un cop emplenat el formulari, s'hagi de tornar a
emplenar per algú altre, o per una altra comanda, etc. El botó esborrar, esborra
automàticament el contingut de tots els camps del formulari. La seintaxi és la
següent:
<INPUT TYPE="RESET" NAME="nom-del-camp" VALUE="text-botó"
A on a Input Type es defineix com a RESET per a definir un botó de neteja de
camps de formulari, a Name hi va el nom intern del camp, i a Value hi va el text
que apareixerà al botó.
En l'exemple següent es defineix un botó reset amb Value=Netejar formulari.
| <form method="POST"> <p><input type="reset" name="B1" value="Netejar formulari"></p> </form> |
Una altra forma per a netejar informació d'un formulari és amb l'element BUTTON
|
A continuació apareix la descripció del formulari d'exemple de l'inici
d'aquest capítol, amb tots els elements. El codi del formulari es pot ubicar a
qualsevol lloc del cos de la pàgina Web, podent tenir més d'un formulari per
pàgina.
| <form method="POST"> <p><strong>Nom de la persona: <input type="text" size="20"name="T1"> </strong></p> <p><strong>Característiques ordinador: Pentium: <input type="checkbox" name="C1"> CD-ROM:<input type="checkbox"name="C2"> Targeta de só:<input type="checkbox" name="C3"> Impresora:<input type="checkbox" name="C4"></strong></p> <p><strong>Sexe: Home<input type="radio" checked name="R1"value="V1"> <input type="radio" name="R1" value="V2"> País d'origen: <select name="España" size="1"> <option>España</option> <option>Andorra</option> <option>França</option> <option selected>Itàlia</option> </select></strong></p> <p><strong>Comentaris<textarea name="S1" rows="3" cols="32"></textarea> <input type="reset" name="B1" value="Esborrar"> <inputtype="submit" name="B2" value="Enviar"></strong></p> </form> |
Aquesta mostra és d'un formulari fet amb l'opció POST i amb ACTION=a una
adreça e-mail. Un cop rebut, caldria tenir un programa que mostrés de forma
òptima el seu contingut.
El formulari conté un camp tipus text de nom
"nom" per als cognoms i nom, i un camp tipus radio de nom "edat",
per a l'edat de l'usuari, de 18 a 22 anys o de 23 a 36 anys. (l'opció que
s'envia és la segona, de 23 a 36 anys).
| <form action="mailto:joanlluc@berganet.es" method="POST"> <p>Cognoms i Nom: <input type="text" size="20" name="nom"></p> <p>Edat:de 18 a 22 anys:<input type="radio" checked name="edat" value="18a22"> de 23 a 36 anys:<input type="radio" name="edat" value="23a36"></p> <p><input type="submit" name="B1" value="Enviar"></p> </form> |
| La informació del formulari rebut, és un arxiu amb el següent contingut: |  |
| nom=Oliveras+Melcior&edat=23a36&B1=Enviar |
| © Melcior Oliveras 1998 melcior@intercom.es |  |
 |
 | ||