Exemple d'ús de formularisEls formularis són una forma efectiva d'establir comunicació amb els visitants de les nostres pàgines. L'altra opció, l'adreça de correu, passa sovint inadvertida. Un formulari, en canvi, convida a escriure.

JavaScript amplia les possibilitats dels formularis. Si només utilitzem HTML, els podem enviar per correu i poca cosa més. Un cop enviats, aniran a parar a una bústia o bé els rebrà un programa CGI o un script de servidor, si en tenim algun a la nostra disposició. Aquest utilitzarà les dades per a feines diverses. En tot cas, aquesta mena de programes són una ajuda externa que no sempre tindrem o podrem controlar.

Ja hem vist recursos alguns JavaScipt que faciliten la interacció: els quadres de diàleg (alert, prompt i confirm). Els formularis ens proporcionen, a més:
  • Camps de text: corresponen als tipus HTML text, textarea, password i hidden.
  • Camps lògics (marcat o desmarcat): controls checkbox i radio.
  • Capses de selecció: select i option.
  • Botons per enviar, esborrar i el que vulguem: submit, reset i button.
  • Tria d'arxius: tenim el camp file, si utilitzem un navegador actualitzat.
El navegador maneja un Array - document.forms - que conté tots els formularis de la pàgina Cada element de l' Array, al seu torn, té tots els camps i les seves propietats. Des de JavaScript podem manipular aquesta estructura. Les possibilitats són enormes.

  Conceptes JavaScript en aquest capítol
Objecte document.forms : matriu que conté els formularis d'una pàgina.
Operador += : afegeix el valor de la dreta a la variable de l'esquerra.
Mètode focus() : enfoca, situa el cursor sobre un element.
Propietat value : el valor contingut en un camp de text o file.
Propietat selectedIndex : l'element seleccionat d'un control de tipus select - option.
Propietat options[n].text : el text que acompanya cada opció d'un control tipus select.

  1.- Escriure a la pàgina des d'un formulari
Per començar, cal observar que un formularis té, normalment, una acció associada (action) i un botó que l'executa (submit). Això és massa genèric i, de moment, ens serveix de poc.

Per tal de manejar amb més flexibilitat les dades dels camps, haurem de manejar events. Com que aquests són particulars i diferents per a cada camp, tindrem control totals sobre el que passa a cada un, a més del control general sobre el formulari.

La manera més efectiva, però no única, de tractar el contingut del formulari, és interceptar l'event onClick d'un simple botó (tipus button). L'utilitzarem en lloc del típic submit. En aquest cas, com que l'exemple és molt senzill, no utilitzarem cap funció. L'únic que volem és escriure el contingut d'un camp de text.

Aquesta no és una bona manera de plantejar les coses. La utilitzem aquí perquè resulta més fàcil d'entendre. Normalment, farem una funció i passarem el formulari com a paràmetre.

En aquest cas, però, ho fem directament: document.write(nom.value), és a dir, escriu al document el valor del camp "nom". Hi afegim un salt de línia, \n, de manera que, si volem escriure un altre text sense tornar a carregar la pàgina, ho faci sota l'anterior.

La forma correcta de referir-nos al text d'entrada és: document.forms[0].nom.value, tot i que, en aquest cas, no cal. L'índex 0 indica que es tracta del primer formulari de la pàgina. Una manera més elegant (i segura, sempre podem inserir-ne un altre abans del que hi ha) seria posar-li un nom: <form name="form1">. Després podem referenciar el valor d'un camp utilitzant la sintaxi document.form1.nom.value. Ho veurem més endavant.

<form>
  <input type="text" name="nom" size="32" maxlength="60">
  <input type="button" name="enviar" value="Mostrar"
      onClick="
document.write(nom.value)+'\n')">
</form>

 
2.- Escriure en un altre camp i netejar l'entrada
L'exemple anterior no neteja el camp d'entrada. Si es vol escriure un altre text, s'ha d'esborrar a mà. A més, escriu directament a la pàgina, i això poques vegades serà possible.

Com que tenim a l'abast tota l'estructura del formulari, ho aprofitarem per enviar el que escrivim a un altre camp. Podem assignar el valor d'un camp a un altre, o el podem afegir.

En aquest exemple utilitzarem un camp multilínia (textarea) per anar afegint el que escrivim en un camp de text simple. Com abans, utilitzem l'event onClic per indicar què s'ha de fer:

  result.value += nom.value + '\n' ; nom value = ' '

Hi ha dues instruccions, separades pel (;). En primer lloc afegim (amb l'operador +=) el valor del camp nom al del camp result, més el signe de salt de línia. Després assignem una cadena buida al valor de nom. Això farà que s'esborri.

<form>
  <input type="text" name="nom" size="32" maxlength="60">
  <input type="button" name="enviar" value="Mostrar"
      onClick="
result.value += nom.value +'\n' ; nom.value=' '"><br>
  <textarea name="result" rows="8" cols="40"></textarea>
</form>
 
3.- Utilitzar una funció i validar els camps
Tractar l'event onClick amb una funció dóna més flexibilitat i possibilitats. D'una banda, podem posar-hi més instruccions i es llegiran millor. De l'altra, podem usar la funció, que s'escriu només una vegada, des de diversos llocs de la pàgina o, si l'escrivim en un arxiu extern, accedir-hi des de diverses pàgines.

En el disseny d'una funció d'aquesta mena, hem de considerar l'ús que en farem. Si només actua sobre un formulari, no cal que tingui massa paràmetres; en canvi, si ha de controlar diversos formularis o pàgines, l'haurem de parametritzar, per tal que sigui més flexible.

Farem un formulari que demani el nom de l'usuari i li permeti triar un arxiu per enviar, a més d'especificar des d'on l'envia. De fet, no s'envia enlloc - només és un exemple - només és un quadre de text, per tal de veure'n el resultat. Hi posem dos botons, un per executar la funció i un altre per esborrar les dades. El primer passarà el control a la funció processa().

Formulari per enviar un arxiuLa funció rep el nom del formulari i comprova que cap dels camps estigui buit. S'encarrega de fer la comprovació una estructura condicional if() que ve a dir, en el cas del nom:

Si el valor del camp "nom" del formulari és buit, alerta que no s'ha escrit el nom, enfoca aquest camp i retorna el control al formulari.

I, així, per a cada camp que vulguem validar. "Enfocar" (focus) un element és centrar-hi l'atenció o, en el cas dels formularis, situar-hi el cursor. Així facilitarem que els usuaris puguin escriure o triar directament, sense haver-hi de fer clic abans.

Al camp select, que tria el lloc des d'on s'envia, farem la comprovació utilitzant la propietat selectedIndex, numèrica, que indica quina és l'opció seleccionada. La primera opció és la zero que, intencionadament, hem deixat buida i seleccionada per defecte. Si l'opció escollida és aquesta, aleshores no s'ha especificat el lloc, i hem d'alertar.

Quan volem saber què s'ha triat en un componen "select", com aquest, utilitzem a propietat "text", que és el text que mostra cada opció: formulari.camp.options[ número ].text.

Finalment, si tots els camps són plens, s'escriu al quadre "result" un text basat en els valors que ha proporcionat l'usuari. Utilitzem '\n' per indicar un salt de línia dins del camp. També hem d'utilitzar la fórmula de l'antibarra a les alertes, per indicar que posem un apòstrof.

<script language="javascript">
function processa( f1 ){
  if (f1.nom.value =='') {
    alert('No has escrit el teu nom')
    f1.nom.focus()
    return false
  }
  if (f1.arxiu.value =='') {
    alert('Tria l\'arxiu que vols enviar')
    f1.arxiu.focus()
    return false
  }
  if (f1.lloc.selectedIndex ==0) {
    alert('Has d\'especificar un lloc')
    f1.lloc.focus()
    return false
  }
  f1.result.value = 'Arxiu: ' + f1.arxiu.value + '\n'
  f1.result.value += 'Enviat des de ' + f1.lloc.options[f1.lloc.selectedIndex].text
  f1.result.value += ' per ' + f1.nom.value + '\n'
  f1.result.value += '\nGràcies per la tramesa.'
}
</script>
</head>

<body ... >
<h3>Enviar un arxiu</h3>
<form name="form1">
  Nom: <input type="text" name="nom" size="42" maxlength="60"><br>
  Arxiu: <input type="file" name="arxiu" size="28"><br><br>
  Enviat des de: <select name="lloc">
  <option selected></option>
  <option>Barcelona</option>
  <option>Girona</option>
  <option>Lleida</option>
  <option>Tarragona</option>
  </select> &nbsp;
  <input type="button" name="enviar" value="Enviar" onClick="
processa(form1)">
  <input type="reset" name="reset" value="Esborrar"><br><br>
  <textarea name="result" rows="6" cols="40"></textarea>
</form>
...
 
4.- FerÍndex: un exemple d'ús dels formularis
Engegar l'eina FerÍndexL'eina FerÍndex crea una pàgina d'enllaços en una carpeta amb arxius numerats, del tipus pag001.htm, pag002.htm, ... Utilitza un formulari per establir algunes característiques de l'índex i veure'n el resultat.

Tot i que, en aquest moment del curs, resultaria complicat entendre la codificació, sí que ens podem fixar en el funcionament. Es tria una pàgina model, es tria el número de pàgines que es vol analitzar, les columnes que ha de tenir el llistat, el tipus de codificació (HTML o JavaScript) i es prem un botó que engegarà la funció (en aquest cas, les funcions) per crear el codi. Tot això a la part superior de la pantalla.

El formulari té una segona part (a sota), destinada a l'edició d'aquest codi i la creació de la pàgina en una finestra nova. Això ho veurem més endavant.

Podem engegar FerÍndex en qualsevol moment des del menú d'Eines. Cal tenir una carpeta amb pàgines numerades i títols diferents. Si no en tenim cap a mà, podem provar-ho sobre la carpeta d'un mòdul del curs o, millor encara, sobre una còpia d'aquesta carpeta.