CREACIÓ DE PÀGINES WEB AMB KOMPO

5. Formularis

Els objectius de la cinquena lliçó són:

Activitat 5.1. Crear formularis

Els formularis són imprescindibles per a la comunicació amb els lectors d’una pàgina. Se solen utilitzar per demanar dades i comentaris o per fer enquestes. A la part final de la seva pàgina, el Monstre ha introduït un formulari per demanar al lector que li escrigui i li doni una sèrie de dades. En aquest formulari s’han introduït gairebé totes les eines que ens ofereix el llenguatge HTML al respecte, és a dir, camps de text d’una o de més línies, menú desplegable, botons d’enviar i restablir, caselles de verificació, i camp ocult. Els camps s’han col·locat en una taula de set files i dues columnes perquè quedin ben ordenats en el document. Abans de començar l’explicació, convé veure el formulari:

El teu nom:

Vostè correu electrònic:

On vius:

Ets:

Monstre
Víctima d’un monstre
Un altre ésser estrany
Persona normal

Què t’agrada
de la meva pàgina?

El disseny
El contingut
Les imatges
Res de res

Els teus comentaris:

Per introduir a la nostra pàgina els camps del formulari, podem anar al menú Insereix -> Formulari; s’obre llavors un altre menú a la dreta on apareixen els camps. Però més còmode resulta acudir al botó Formulari de la barra d’eines, on apareixen tots els elements si premem la fletxeta que hi ha a la dreta del botó:

Activitat 5.1.1. Propietats del formulari

Per introduir un formulari en el nostre document primer cal configurar o definir amb l’opció Definir formulari. En el nostre cas és com mostra la imatge de les Propietats del formulari:

En aquesta finestra hi ha diversos camps d’emplenar:

  1. Nom del formulari: és un nom qualsevol que identifiqui el nostre formulari.
     

  2. URL de l’acció: és un camp que defineix l’acció final quan s’enviï el formulari. En el nostre cas ens servirà perquè l’usuari enviï el formulari per correu electrònic a l’adreça que consti aquí. Per tant, en aquest quadre hem d’escriure la nostra adreça de correu electrònic precedida de l’expressió mailto:
    .

  3. Mètode: és el mètode d’enviament del formulari. Triarem POST al menú desplegable, que indica que cal enviar el formulari per correu (post) electrònic.
     

  4. Per veure els següents camps, cal prémer el botó Més propietats. En l’opció Codificació anem a indicar que el text ha de ser enviat codificat com text pla, és a dir, sense marques de format, i per això triarem l’opció text/plain al menú desplegable. Les altres opcions són avançades.

Quan premem el botó Acceptar, apareix en el document una rectangle amb línies intermitent s que indica la posició del formulari. Dins d’aquest requadre és on hem inclòs els camps en una taula. Ara vegem com es creen i es configuren aquests camps.

Activitat 5.1.2. Camp de text

Anem a incloure el primer i el segon camp de text, que corresponen al nom i l'email. Posem el cursor del ratolí en la primera cel·la de la segona columna i després obrim el menú Insereix -> Formulari -> Camp de formulari -> Text o el busquem obrint el menú desplegable del botó Formulari. A la següent imatge veiem el camp de text configurat, del qual hem utilitzat dues opcions:

  1. Nom del camp: els noms dels camps són important perquè després encapçalaran les dades que ens envia l’usuari per correu. En el nostre cas, com li demanem que escrigui el seu nom, hem cridat  Nom a aquest camp.
     

  2. Mida del camp: és el nombre de caràcters (lletres i buits en blanc) que ocuparà el quadre de text; és a dir, que del text que introdueixi l’usuari es veurà en el formulari aquest nombre de caràcters, però serà enviat el text complet.

Altres opcions útils són:

  1. Valor inicial: fa referència al text que vulguem que aparegui en el quadre de text per defecte en el nostre document, però en aquest cas no ens interessa, perquè queda clar que el lector ha d’escriure el seu nom.
     

  2. Només lectura: l’activem si utilitzem el camp només per mostrar informació i no volem que l’usuari ho modifiqui.
     

  3. Longitud màxima: podem indicar aquí el nombre màxim de caràcters que es poden introduir, sobretot per evitar que sigui molt gran.

També hem inclòs en el nostre formulari 1 segon camp de text, que hem anomenat  Correu electrònic, per demanar l’adreça de correu electrònic del visitant.
 

Activitat 5.1.3. Llista d’opcions

El segon tipus de camp que hi ha al formulari de la nostra pàgina és un menú desplegable, que forma part de la llista d’opcions, perquè és una llista de la qual només es veu la opció seleccionada per defecte, i les altres es mostren a obrir el menú desplegable.

A la finestra que apareix cal escriure el següent:

  1. Nom de la llista per identificar-la com camp. En el nostre cas, el nom és On vius, que no cal confondre amb el text que antecedeix al camp a la columna anterior.
     

  2. Alçada: el nombre d’opcions que es veuran. Aquí, només la primera opció, però podríem establir més, i llavors ja no seria un menú desplegable, sinó una llista amb barra de desplaçament.
     

  3. Selecció múltiple: la seleccionaríem si voldríem que es pogués triar més d’una opció vàlides.

La llista d’opcions la emplenem afegint una a una amb el botó Afegeix opció. Com es veu en la imatge de sota, en cadascuna d’elles hem d’escriure el Text, que serà el text que aparegui a la llista. Si no activem la casella Valor, el text d’aquesta opció serà el mateix que el de Text. Si activem la casella, podrem escriure altres paraules; això té sentit si el text és llarg, i volem posar un valor abreujat, perquè aquest valor serà el que rebrem a l'email que ens enviïn els visitants. I activarem la casella Seleccionada inicialment en l’opció que vulguem que es vegi al menú desplegable abans de desplegar-; si no ho seleccionem, apareixerà la primera opció.


 

Activitat 5.1.4. Botó radial

El següent camp de formulari és el dels botons radials. Aquests botons funcionen agrupats, de manera que només es pot seleccionar 1d'ells. S’apliquen al document obrint l’opció Camp de formulari -> Botó radial.

Sorgeix llavors la finestra de la imatge anterior, en què escrivim:

  1. Nom del grup, que a partir d’ara serà el mateix nom dels quatre botons que anem a incloure en el nostre formulari, i per tant serà el nom que escrivim cada vegada que creiem un dels botons.
     

  2. Valor es refereix al text que serà enviat per correu al costat del nom de grup si l’usuari ho selecciona. En aquest cas no passa com en la llista d’opcions, que el valor s’escriu en la finestra de configuració. Aquí cal escriure el text que apareixerà a la dreta del botó una vegada que estigui incrustat en el document, i tindrà com a valor el que hàgim escrit en la configuració.
     

  3. Seleccionat inicialment serà el botó estigui seleccionat per defecte; en aquest cas, com és el primer, hem decidit que estigui seleccionat, i ja no podem seleccionar cap més.
     

Activitat 5.1.5. Casella de verificació

El quart camp que anem a incloure és el de casella de verificació, que s’aplica prement el tercer botó del grup de botons de formulari. Es configura igual que els botons d’opció, però la diferència amb aquests és que les caselles no s’agrupen, és a dir, l’usuari pot seleccionar les que vulgueu, més d’una. En el nostre cas, hem donat el mateix nom, Agrada, a totes les caselles perquè l’assumpte és el mateix, i així podrem rebre per correu diverses d’elles amb el mateix nom, però cadascuna podria tenir el nom diferent.


 

Activitat 5.1.6. Àrea de text

El següent camp és el de àrea de text, que s’aplica prement Formulari -> Àrea de text. És el típic quadre de text de més d’una línia que s’utilitza perquè l’usuari enviï un comentari o una opinió. Es diferencia del camp de text en què aquest només disposa d’una línia. Per a aquest camp podem indicar el nombre de files (línies) i de columnes (caràcters que ocupa cada línia). A més, inclou una barra de desplaçament vertical, que es fa operativa quan l’usuari escriu més línies de les establertes per a aquest camp.


 

Activitat 5.1.7. Botons d’enviament i de restabliment

Els últims camps visibles que incloem en el nostre formulari són el botó d’enviament, que serveix per enviar les dades per correu electrònic,   i el botó de restabliment, que s’usa per esborrar les dades del formulari en cas que l’usuari vulgui començar de nou amb el formulari net. Aquests botons s’apliquen prement Formulari -> Camp de formulari -> Botó d’enviament, i el mateix per al botó de restabliment.

A les finestra de les propietats d’aquests botons no hem emplenat el nom del camp perquè aquest camp no ens va a enviar informació al correu electrònic, així que no cal anomenar-lo. Al Valor del camp escriurem el text que volem que aparegui en el botó ("Envia correu electrònic" en el nostre cas).


 

Activitat 5.1.8. Camp ocult

Finalment, hem inclòs també un camp ocult o invisible. Aquest tipus de camp òbviament no ho pot modificar l’usuari, perquè no apareix en el formulari, però resulta útil per al receptor del missatge perquè li ofereix informació addicional. En el nostre cas, el receptor sap que el formulari rebut és el que ha col·locat a la seva pàgina personal, ja que li ha atribuït el valor de "Formulari de pàgina personal", i no un altre que pogués tenir ubicat en una altra pàgina i amb un altre valor. Per configurar aquest tipus de camp cal obrir el menú Formulari -> Camp de formulari -> Ocult. Un cop configurat, el camp apareixerà en el document de l’editor en forma d’una etiqueta groga amb el nom INPUT, però no es veurà en el document publicat.



 

Activitat 5.1.9. L'e-mail rebut

Quan l’usuari ompli el formulari i premi el botó d’enviament del nostre formulari, el text que rebrem en el nostre programa de correu electrònic podria ser la manera següent:

Formulari = Formulari de pàgina personal
Nom = Joan Vampir
E-mail=juanvamp batmania.com
Viu = A les tenebres
Ets = Estrany
Agrada = Disseny
Agrada = Contingut
Agrada = Imatges
Comentari = La teva pàgina m’ha animat a crear una pàgina web

Si incloem aquest formulari a la pàgina del Monstre, el resultat pot ser semblant al que es veu si es prem el següent botó:

Pàgina del Monstre

Activitat 5.2. Activitat nº 5: Crear una enquesta amb formulari

Com activitat, crearem un formulari semblant a aquest per incloure’l a la pàgina web del Monstre. Aquest serà l’aspecte del nou formulari, que aquesta vegada és una enquesta:

El teu nom

Vostè correu electrònic

Quins personatges de por t’agraden?

Vampirs
Homes llop
Guillats amb motoserra
Fantasmes
Dimonis

Escriu el títol de les pel·lícules de por que t’han agradat més


 

Activitat 5.3. Enviar un missatge amb codi PHP

Cal dir que amb HTML els missatges d’un formulari només es poden enviar per correu electrònic si l’ordinador de l’usuari té instal·lat un programa de correu. Perquè el missatge de correu pugui enviar-se en els altres casos, cal introduir un arxiu creat amb els llenguatges PERL o PHP. A Internet circulen molts scripts escrits en aquests llenguatges que es poden utilitzar amb formularis. Aquí presentem un de molt senzill escrit en PHP i que es pot utilitzar perquè l’usuari ens enviï un missatge. Naturalment, perquè aquest script funcioni, el servidor on s’allotgin els arxius ha de tenir PHP com a llenguatge de servidor; si no, serà necessari un script CGI escrit en PERL.

El formulari que utilitzarem és molt senzill:

El teu nom

Vostè correu electrònic

El teu Missatge

 

El codi font d’aquest formulari apareix en el quadre. Perquè el formulari sigui enviat, cal incloure el nom del fitxer PHP en l’atribut action del formulari, que hem posat en negreta així com els noms dels camps que utilitzarem en l’escrit.

<Form action = "correo.php" method = enctype "post" = "text/plain" name = "Correu">
<table width = "90%" border = "0" align = "center" cellpadding = "5" cellspacing = "2" bgcolor = "# E9C49E">
<tr>
<td width = "30%" valign = "top"> <strong> El teu nom </strong> </td>
<td> <input name = " nom " type = "text" value = "" size = "40"> </td>
</tr>
<tr>
<td width = "30%" valign = "top"> <strong> El teu correu electrònic </strong> </td>
<td> <input name = "email" type = "text" value = "" size = "40"> </td>
</tr>
<tr>
<td width = "30% "valign =" top "> <strong> El teu Missatge </strong> </td>
<td> <textarea name = "" Missatge cols = "" rows = "maig 30" id = "Missatge"> </textarea>
</td>
</tr>
<tr>
<td valign = "top"> <input type = "submit" name = "Enviar" value = "Envia"> </td>
<td> & nbsp; </td>
</tr>
</table>
</form>

I només queda escriure l’arxiu correo.php, que és el que es mostra en el quadre. Aquest fitxer cal guardar-lo en la mateixa carpeta en la qual es troba l’arxiu HTML on hi ha el formulari. Quan l’usuari prem el botó d’enviament del missatge, l'script PHP entra en funcionament i envia el missatge.

<? Php
if (empty ($ nom) || empty ($ email) || empty ($ Missatge)) {
echo "<h2 align = \" center \ "> El Formulari no està complet </h2>";
}
else {
electrònic (" monstre monstre.com "," Pàgina del Monstre ",
"$ Missatge "," Des de: $ nom <$ email > ");
echo "<h2 align = \" center \ "> El Missatge ha.. Enviat Estat Gràcies </h2> ";
}
?>

Com es veu en l'script, apareixen en negreta els noms que hem donat als camps del formulari (en el codi HTML) precedits del signe $, que els ha convertit en variables. També estan en negreta la nostra adreça de correu electrònic (a la qual l’usuari envia el missatge) i l’assumpte (o subject) del missatge, que també hem afegit nosaltres al script. Per utilitzar aquest script, el més senzill és copiar-lo en un editor de textos i guardar amb el nom correo.php. Després es fa un formulari com l'anterior anomenant els camps amb els mateixos noms, de manera que només calgui canviar l’adreça de correu electrònic i l’assumpte del missatge per adaptar-los als de l’autor de la pàgina.

El funcionament de l'script és senzill. En les dues primeres línies s’assegura que l’usuari hagi emplenat els tres camps de text; en cas contrari, apareixerà una pàgina que li indicarà: "El formulari no està complet", i l’usuari haurà de tornar per completar el formulari. La resta del codi s’encarrega d’enviar el missatge a l’adreça indicada, oferint al final el següent text: "El missatge ha estat enviat. Gràcies".
 

Activitat 5.4. Els camps de formulari en HTML

Els formularis han d’anar delimitats per les etiquetes <form> d’obertura i de tancament. A la nostra pàgina hem inclòs dins d’aquesta etiqueta els atributs mailto: (enviar per correu electrònic), method (en aquest cas, enviar per correu) i enctype (el tipus de codificació).

<Form action = "mailto: monstre infern.com" method = "POST" enctype = "text/plain" name = "Formulari">

Alguns camps utilitzen l’etiqueta <input>, que no té tancament. El camp ocult de la nostra pàgina té com atributs els següents: type (el tipus de camp: hidden), name (nom) i value (valor)

<Input type = name = "Formulari" valor "ocult" = "Formulari de pàgina personal">

Els dos quadres de text amb què comença el formulari també utilitzen l’etiqueta <INPUT> ; són del tipus text (text) i tenen 32 caràcters (size).

<Input type = "text" size = "32" name = "Nom">
<input type = "text" size = "32" name = "Email">

El menú desplegable servir les etiquetes <select> i <option>, en els dos casos amb les d’obertura i tancament. La primera limita a totes les opcions i, a part del nom, té l’atribut size, que aquí es refereix al nombre d’opcions visibles a la pàgina quan el camp està sense desplegar: una a nostre document. Cal assenyalar que la primera opció està seleccionada (selected).

< select name = "Viu" size = "1">
<opció seleccionada > Sota un pont </option>
<option> A les tenebres </option>
<option> En armari ONU </option>
<option> En soterrani de l'ONU </option>
<option> A Una golfes </option>
<option> A casa </option>
</seleccioneu >

Els botons d’opció també utilitzen l’etiqueta <input>. Els atributs aquí són el tipus de camp (ràdio), el nom i els valors. Observeu que la primera opció està seleccionada (ckecked) i que tots han de tenir el mateix nom.

<Input type = & quote; Ràdio & quote; comproven name = "Tipus" value = "Monstre">
<input type = "radio" name = valor "Tipus" = "Víctima">
<input type = "radio" name = "Tipus" value = "Estrany">
<input type = "radio" name = valor "Tipus" = "normal"
>

Ja hem parlat de les diferències que hi ha entre les caselles de verificació i els botons d’opció. En les caselles el tipus és checkbox.

<Input type = "checkbox" nom = valor "Agrada" = "Disseny">
<input type = "checkbox" nom = valor "Agrada" = "contingut">
<input type = "checkbox" nom = valor "Agrada" = "Imatges">
<input type = "checkbox" nom = valor "Agrada" = "Res">

El quadre de text amb desplaçament utilitza l’etiqueta <textarea> d’obertura i de tancament, i ha d’incloure el nombre de files (rows) i de columnes (cols).

<Textarea name = files "Comenta" = "7" cols = "30"> </textarea>

Finalment, els dos botons són del tipus enviar (submit) i restablir (reset).

<Input type = "submit" value = "Envia">
<input type = "reset" value = "Esborrar">