Creando formularios usando FrontPage Express (cont.)

Crearemos un formulario como el que puede observar en este v�nculo - Formulario de Pr�ctica.

  1. Abra una nueva p�gina en su editor FrontPage Express usando la opcion File - New.
     
  2. Asigne un encabezado a su p�gina: Escriba 'Formulario de Prueba', central�celo y cambiele el estilo a Heading 1.
     
  3. En los proximos pasos estaremos usando el panel de botones para controles de formulario:
wpe2.gif (1661 bytes)

Si no ve esta serie de botones, puede hacer que aparezcan usando la opcion View: Forms Toolbar.

Cada bot�n se utiliza para introducir un tipo de control distinto:
 
wpe3.gif (946 bytes) - textbox wpe6.gif (958 bytes) - scrolling textbox wpe4.gif (932 bytes) - check box
wpe7.gif (929 bytes) - radio button wpe8.gif (952 bytes) - drop-down menu wpe5.gif (916 bytes) - push button

  1. Ahora introduciremos nuestro primer elemento del formulario: Presione wpe3.gif (946 bytes) para instroducir una caja de texto.  Aparecer� un rectangulo solido que representa el textbox y un rectangulo mayor entrecortado que simboliza el formulario.  Los dem�s elementos que vayamos a�adiendo deben ir dentro del rectangulo entrecortado que representa el formulario.

    Podemos cambiar las propiedades de cualquier elemento en un formulario haciendo un click con el bot�n derecho del mouse sobre el elemento y escogiendo la opci�n Form Field Properties. 

    Accese las propiedades del textbox de esa manera.  Obtendr� la ventana Text Box Properties. Las propiedades que podemos asignar a un text box son: su nombre, valor inicial, ancho y si servira o no para entrar un password.  Cuando la propiedad de password es activada, cada letra que entre el usuario en ese text box saldra disfrazada del simbolo * para que no puedan leer su password de la pantalla.

    Asignele el nombre 'Nombre' a el textbox. Esta sera la unica propiedad que cambiaremos para el textbox. Click OK.

A la izquierda del textbox que acabamos de crear, escriba 'Nombre: '.
  1. A la derecha del textbox, oprima Enter para abrir una nueva linea. En esta nueva linea escriba 'Materia de Ense�anza:'. Aseg�rese de que eso que escribio y el resto de las cosas que a�ada caigan dentro del rect�ngulo entrecortado que representa el formulario.

    Introduzca un elemento de Drop-Down Menu usando el bot�n wpe8.gif (952 bytes).  Obtenga las propiedades del Drop-Down Menu (haga right click sobre el y escoja la opci�n Form Field Properties.  Las propiedades que podemos modificar a un Drop-Down Menu son: su nombre, su altura, las opciones que ofrece y sy permite escoger m�s de una opci�n.

    As�gnele el nombre 'Materia' al drop-down menu. Ahora especificaremos las opciones que mostar� el menu. Deseamos que sean las siguientes: Ciencias, Espa�ol, Ingl�s y Educaci�n F�sica.  Para a�adir cada opci�n har� lo siguiente:

    1. Oprima el boton Add
    2. En la ventana Add Choice escriba una de las opciones. Click OK. La opcion debe aparecer en la tabla de opciones que muestra la ventana Drop-Down Menu Properties.

    Una vez tenga todas las opciones de su drop-down menu. Click OK.

  1. Ahora crearemos una pregunta de seleccion multiple en la que se pueden marcar una o mas respuestas.

    Escriba '1. Marque las partes de este taller que tom�:'.  En la proxima linea inserte un CheckBox usando el boton wpe4.gif (932 bytes). Obtenga las propiedades del CheckBox.

    Las propiedades que podemos cambiar a un checkbox son: su nombre, su valor y si inicialmente esta marcado o no.  Todos los checkboxes para una pregunta deben tener el mismo nombre y deben tener valores distintos. Asigne el nombre 'P1' (abreviatura para pregunta 1).  Asigne el valor 'A' (ya que este este checkbox corresponder� a la primera contestaci�n de la pregunta. Al lado derecho del checkbox escriba 'A. F�sica Moderna'.

    En la pr�xima linea, cree el segundo check box.  El nombre del checkbox ser� P1 y su valor ser� B. Escriba 'B. Astonom�a' al lado derecho del checkbox.   Cree checkboxes con valores C y D para las opciones restantes (Electr�nica y WWW).

  1. Ahora crearemos una pregunta de seleccion multiple en la que se pueden marcar una sola respuesta.  Escriba '2. El lenguaje que se utiiza para crear paginas de Web se conoce como:'.  En la proxima linea inserte un Radio Button usando el boton wpe7.gif (929 bytes). Obtenga las propiedades del Radio Button. Las propiedades que podemos cambiar a un radio button son: su nombre, su valor y si inicialmente esta marcado o no.  Todos los radio buttons para una pregunta deben tener el mismo nombre y deben tener valores distintos. Asigne el nombre 'P2' (abreviatura para pregunta 2).   Asigne el valor 'A' (ya que este este checkbox corresponder� a la primera contestaci�n de la pregunta. Al lado derecho del checkbox escriba 'A. http'.

    Cree checkboxes con valores B, C y D para las opciones restantes (B. html,   C. ftp,  D.WWW).
     

  2. Escriba: '3. Escriba sugerencias para mejorar los talleres:'. Ya que esta es una pregunta de discusi�n, crearemos un scrolling textbox para que el usuario tenga espacio para contestarla. Inserte un elemento Scrolling Textbox usando el bot�n wpe6.gif (958 bytes).  Obtenga las propiedades del Scrolling TextBox. Asigne el nombre 'P3' al Scrolling Textbox.
     
  3. Para que el usuario pueda enviar la informacion que ha entrado al Web Server, debemos incluir al final del formulario un boton de Submit.  Inserte  un Push Button en su formulario usando el bot�n wpe5.gif (916 bytes).  Obtenga las propiedades del Push Button. Las propiedades que puede cambiar a un Push Button son: su nombre, la palabra que tiene escrita el boton adentro y el tipo de bot�n.  Asegurese que la opcion 'Submit' este marcada. Click OK.
     
  4. En esta parte vamos a especificar el programa en el Web Server que recibir� y procesar� los datos que envie el usuario.
  1. Obtenga la ventana de propiedades para el push button.  En esa ventana apriete el bot�n Form...
  2. En la ventana Form Properties, oprima el boton Settings... obtendra la ventana Settinng For Custom Form Handler.
  3. En el rengl�n Action escriba: 'http://cuhwww.upr.clu.edu/~rarce/FormMail.cgi'. Eso que acaba de escribir es el nombre del programa que procesar� los datos que escribio el usuario en el formulario.Click OK.
  1. El programa que escogimos para procesar los datos de nuestro formulario (FormMail.cgi) est� dise�ado para enviar por correo electronico los resultados del formulario.   Debemos hacer que el formulario comunique a ese programa la direcci�n a la que debe enviar esos resultados. Esto lo podemos lograr usando campos invisibles (hidden fields).  Campos invisibles me permiten especificar informacion  adicional que debe ser enviada al Web Server cuando el usuario oprima Submit.  El programa que estamos usando necesita un campo invisible llamado 'recipient' que contenga el email address del receptor de los resultados del formulario. De vuelta en la ventana Form Properties a�ada los siguientes campos invisibles:

Los siguientes sites contienen mas informacion sobre como crear formularios en HTML y sobre los distintos tipos de programas que puedo poner a nivel de server para procesar la informacion del formulario.


Ir al home page de Rafael Arce Nazario en el CUHDe vuelta al Home Page de Rafael Arce Nazario en el CUH