Disseny de pàgines web.

Formularis.

Els formularis permeten interactuar amb els usuaris i demanar informació des d'una pàgina web i enviar-la al servidor per processar-la. En un formulari podem sol·licitar diferents dades que s'emmagatzemaran en camps associats a una variable. Una vegada s'hagin introduït els valors en els camps, l'usuari podrà enviar el seu contingut a la direcció (URL) on es troba el programa que processarà el contingut de les variables. Per a poder realitzar aquesta darrera etapa necessitarem utilitzar un programa anomenat CGI (Common Gateway Interface).
La creació d'aquest tipus de programes seia tema d'un curs diferent, i per això aquí veurem només com es pot enviar el contingut dels camps del formulari a la nostra adreça de correu electrònic, sense necessitat de fer servir cap CGI. La declaració del formulari va entre els codis

A l'interior de la declaració s'indiquen els elements (variables) d'entrada. El codi té els paràmetres action i method. action = "programa" (Indica el programa que tractarà les variables que s'enviïn amb el formulari. En el nostre cas enviarem el contingut de les variables per correu electrònic i per això el "programa" serà "mailto: adreça_de_correu". method = POST / GET ! Indica el mètode amb el que es transferiran les variables. POST produeix la modificació del document de destí (com en el cas d'enviar per correu electrònic el contingut de les variables). GET no produeix canvis en el document de destí (com en el cas d'una consulta a una base de dades, per exemple una pàgina de recerca a Internet).

Camps d'Entrada Per a Introduir informació a les variables s'utilitza el codi <INPUT>. Aquest codi té el paràmetre type que indica el tipus d'informació a introduir i name que indica el nom que se li donarà al camp. Cada tipus de variable té els seus propis paràmetres. type="text" name ="nom" ->Indica que el camp a introduir un text. Els seus paràmetres són: maxlenght = "nombre" ->Nombre màxim de caràcters a introduir en el camp. size = nombre ->Tamany en caràcters que es mostrarà en la pantalla. value = "text" ->Valor inicial del camp. Normalment serà " ", o sigui, buit. type ="password" name = "nom" ->Indica que el camp serà una paraula de pas. Mostrarà asteriscos (*) en lloc dels caràcters escrits. type = "checkbox" name = "nom" ->El contingut del camp se seleccionarà marcant una casella. Està permès marcar diverses caselles. type = "radio" name = "nom" ->El contingut del camp se seleccionarà marcant una casella. Únicament es pot marcar una casella. type = "image" name ="nom" ->El camp contindrà el valor de les coordenades de la imatge seleccionada. Ha d'indicar-se la imatge amb el paràmetre: src = "arxiu d'imatge". type = "hidden" name = "nom" -> L'usuari no pot modificar el seu valor. El contingut del camp no és visible. type = "submit" name = "nom" ->Representa un botó. En pitjar-lo la informació continguda en tots els camps s'envia al programa indicat a l'etiqueta <FORM>. Té el paràmetre value= "text" que indica el text que apareixerà en el botó. type = "reset" ->Representa un botó. En pitjar aquest botó s'esborra el contingut de tots els camps. El paràmetre value = "text" indica el text que apareixerà en el botó.

Àrees de text. Representen un camp de text de múltiples línies. Normalment s'utilitzen per enviar comentaris. El codi utilitzat és ..TEXTAREA> i ../TEXTAREA>, i els seus paràmetres: name = "camp" -> Nom del camp. cols = "nombre" -> Nombre de columnes de text visibles. rows = "nombre" -> Nombre de files de text visibles.

Baix teniu un petit exemple de botons i utilitats disponibles quan es crea un formulari amb un editor HTML. Podeu provar també l'editor AceHTML que disposa també del botó i quadres de diàleg corresponents. Dissenyeu el vostre formulari dins una pàgina en blanc i proveu-lo amb el navegador.




Podeu provar el que teniu a continuació, de tota manera cal que tingueu el client de correu amb alguna compta configurada per enviar el formulari per e-mail a ecampins@infotelecom.es

---

Informació ?

Finalment, podem fer servir un formulari com a "llançador" d'enllaços, és a dir, que permeti a l'usuari fer servir un llistat desplegable per triar un enllaç predefinit i accedir-hi. Per a això hem de fer servir l'acció de Javascript: "OnClick".
Formulari Llançador.

Utilitzau l'editor web per a dissenyar el vostre formulari adaptant convenientment el codi font que teniu disponible dins l'arxiu :