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 |  |
 |
 |
||