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.  
  2. Asigne un encabezado a su página: Escriba 'Formulario de Prueba', centralícelo y cambiele el estilo a Heading 1.

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

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


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

    2. 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'.

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