CLASE 6 CREACIÓN DE FORMULARIOS Todo sitio Web necesita recabar cierta información, a veces para contactarse con los visitantes, a veces para encuestas y en algunas ocasiones para realizar venta o contratación de servicios o personal para diferentes tareas. Las utilidades para los formularios son variadas y a continuación veremos como crear un formulario. Diseño de Formularios Para crear un formulario, debo primero crear su contenedor. Para ello, me sitúo donde quiero crear el formulario, hago clic en la pestaña Formularios, y luego clic en el primer botón Formulario. Se insertará un rectángulo con borde rojo, donde tendremos que trabajar. Dentro del rectángulo, crearemos una tabla con dos columnas y tantas filas como necesitemos para el formulario. No es necesario trabajar con una tabla, pero el formulario queda prolijo. En este ejemplo, tenemos 7 filas. En la primera columna completaremos con los siguientes datos: Nombre, Apellido, Ocupación, Te resultó satisfactorio este curso?, Otros cursos que desearía realizar y Comentarios. Cuadro de texto Ahora comenzaremos a completar la segunda columna. Para la fila Nombre, pulsamos la opción Campo de texto. Al seleccionarlo, nos ofrece las siguientes Propiedades: Campo de texto Ancho car. Car. Máx. Tipo Val. Inicial Nombre que se le asigna al campo de texto para identificarlo. Ancho del campo de texto, es decir, la cantidad de caracteres que va a mostrar. Cantidad máxima de caracteres que se podrán escribir. Siempre conviene completar esta opción por razones de seguridad. Tipo de campo de texto. Una línea es un campo de un solo renglón. Varias líneas divide el texto en varios renglones. Contraseña escribe asteriscos al introducir texto. Texto que mostrará al inicio dentro del cuadro de texto. Repetimos este paso para Apellido y para Comentarios. A lo que correspondería la fila de Comentarios, en las propiedades seleccionaremos Varias líneas, donde debemos especificar el 1
ancho de caracteres y la cantidad de renglones que tendrá el campo. También podríamos haber hecho clic en Área de texto. Lista/Menú Para la fila Ocupación, pulsaremos la opción siguientes Propiedades: Lista/Menú. Al hacerle clic, obtenemos las Lista/Menú Tipo Alto Permitir múltiples Seleccionado inicialmente Nombre que se le asigna a la lista/menú para identificarlo. Menú muestra una lista desplegable, donde sólo se podrá seleccionar una opción. Lista mostrará una lista con barra de desplazamiento, que permite múltiples selecciones. En tipo Lista, especifica cuántas opciones muestra de la lista completa. En tipo Lista, al tildar la opción, permite seleccionar varias opciones (manteniendo presionada la tecla Ctrl o Shift). Determina cuál elemento de la lista se mostrará seleccionado al iniciar. Hacemos clic en el botón Valores de lista para agregar los elementos de esta: seleccionado. Grupo de opción La columna Etiqueta de elemento son las opciones que mostrará la lista. Valor es un valor que se le asigna a cada opción para identificarla. Los botones sirven para agregar o quitar elementos de la lista. Las flechas sirven para cambiar el orden del elemento Para la fila Te resultó, pulsaremos la opción Grupo de opción. En la ventana que nos ofrece, debemos asignarle un nombre al grupo de opciones, y luego escribir la lista de opciones como vimos en el caso de Lista/Menú. La opción Saltos de línea y Tabla establecen cómo se insertarán: uno debajo del otro como párrafos, o 2
dentro de una tabla. DISEÑO WEB Al hacer clic en algún botón de opción, nos muestra las siguientes Propiedades: Botón de opción Valor activado Estado Inicial Nombre que se le asigna al grupo de opciones para identificarlo. Valor que le hemos asignado para identificar cada opción. Establece si aparecerá activado (con el punto verde) o no al inicio. Casilla de verificación Para la fila Otros cursos, pulsaremos la opción Casilla de verificación. En la ventana que nos ofrece (en las anteriores solo hacíamos clic en Aceptar), en Etiqueta debemos escribir el texto que acompañará a la casilla: Debemos hacer lo mismo para las demás casillas. Al hacerle clic en cada casilla, obtenemos las siguientes Propiedades: Nombre de casilla Valor activado Estado Inicial Nombre que se le asigna a la casilla para identificarla. Valor que le hemos asignado para identificar cada opción. Establece si aparecerá activado (con el tilde) o no al inicio. Botón y Campo de Imagen Para añadir el botón Enviar, pulsaremos la opción siguientes Propiedades: Botón. Al hacerle clic, obtenemos las Nombre del botón Valor Acción Nombre que se le asigna al botón para identificarlo. Texto que aparecerá en el botón. Indica qué hará cuando se accione este botón. Enviar formulario envía el formulario. Ninguno no realiza ninguna acción. Restablecer formulario vacía todo el contenido que haya escrito el usuario en el formulario. También podemos reemplazar el botón por una imagen (un botón personalizado), haciendo clic en Campo de imagen. Esta imagen sólo servirá para enviar el formulario. 3
Validaciones mediante Spry Podemos controlar los datos ingresados por el usuario, y avisarle cuando estos son erróneos o no aceptados. Para ello, utilizaremos la barra Spry, que se encuentra al final de la pestaña Formularios, o en la pestaña Spry. Campo de texto de validación de Spry Para insertar un campo de texto, debemos hacer clic en la pestaña Formulario (o Spry), en el botón. Al hacer clic en, sobre el campo de texto, obtenemos las siguientes propiedades: Campo de texto de Spry Tipo Formato Patrón Sugerencia Estados de vista previa Validar al Car. Mín y Car. Máx Val. Mín y Val. Máx Obligatorio Aplicar patrón Es el nombre del campo de texto. Debemos completarlo para identificarlo Permite seleccionar el tipo de información que contendrá este campo En determinados Tipos, permite elegir el formato del texto introducido (por ej. un teléfono) En determinados Formatos, si elegimos Personalizado, deberíamos ingresar el patrón del texto que debe introducir el usuario. Para números, utilizar 0. Para texto, utilizar x. Por ejemplo, para un teléfono: (0000) 000-0000; para una dirección web: xxxxxx.xxx.xx Texto que se mostrará al inicio como guía al usuario, para saber cuál es la información correcta o cuál es el formato válido Muestra cómo se verán en el navegador los distintos estados de validación (al inicio, al introducir un valor incorrecto, etc.) Cuándo mostrará el error. Desenfocar significa al hacer clic en otro campo. Cambiar significa mientras está escribiendo el usuario. Establece, para algunos tipos y formatos, la cantidad mínima y máxima de caracteres permitidos Establece, para algunos tipos, el valor mínimo y máximo permitido (generalmente, para tipo de número) Establece como obligatorio rellenar este campo Bloquea la inserción de caracteres no válidos según el patrón Área de texto de validación de Spry Para insertar un área de texto, debemos hacer clic en la pestaña Formulario (o Spry), en el botón. Al hacer clic en, sobre el área de texto, obtenemos las siguientes propiedades: 4
Área de texto de Spry Obligatorio Estados de vista previa Validar al Car. Mín y Car. Máx Contador Bloquear caracteres extra Sugerencia Es el nombre del área de texto. Debemos completarlo para identificarlo Establece como obligatorio rellenar este campo Muestra cómo se verán en el navegador los distintos estados de validación (al inicio, al introducir un valor incorrecto, etc.) Cuándo mostrará el error. Desenfocar significa al hacer clic en otro campo. Cambiar significa mientras está escribiendo el usuario. Establece, para algunos tipos y formatos, la cantidad mínima y máxima de caracteres permitidos Muestra un contador de caracteres Bloquea la inserción de caracteres que superan la cantidad máxima Texto que se mostrará al inicio como guía al usuario, para saber cuál es la información correcta Casilla de verificación de Spry Para insertar una casilla de verificación, debemos hacer clic en la pestaña Formulario (o Spry), en el botón. Al hacer clic en, sobre la casilla, obtenemos las siguientes propiedades: Casilla de verificación Obligatorio Aplicar rango Nº mínimo y máximo de opciones seleccionadas Estados de vista previa Validar al Es el nombre del conjunto de casillas. Debemos completarlo para identificarlo Establece que debe seleccionarse una única casilla y en forma obligatoria Permite seleccionar varias casillas Establece la cantidad mínima y máxima de opciones que se pueden seleccionar Muestra cómo se verán en el navegador los distintos estados de validación (al inicio, al superar la cantidad máxima, etc.) Cuándo mostrará el error. Desenfocar significa al hacer clic en otro campo. Cambiar significa mientras está escribiendo el usuario. Si queremos agregar más de una casilla de verificación, y que pertenezcan al mismo conjunto de casillas, NO debemos agregar más casillas Spry. Debemos 5
asegurarnos de estar dentro del contenedor de bordes celestes, y agregar Casillas de verificación COMUNES. Todas pertenecerán al mismo conjunto, y podremos validarlas con las opciones de máximo y mínimo de opciones seleccionadas. 6
Selección de validación de Spry Para insertar una lista de selección, debemos hacer clic en la pestaña Formulario (o Spry), en el botón. Al hacer clic en, sobre la lista, obtenemos las siguientes propiedades: Selección de Spry No permitir Estados de vista previa Validar al Es el nombre de la lista/menú. Debemos completarlo para identificarlo Establece qué valores no se permitirán. Valor en blanco significa que no admite una selección nula. Valor no válido son etiquetas al que le hemos asignado un valor considerado como inválido en la lista de asignación etiqueta-valor; ese valor debo escribirlo en la casilla que acompaña esta opción. Muestra cómo se verán en el navegador los distintos estados de validación (al inicio, al introducir un valor incorrecto, etc.) Cuándo mostrará el error. Desenfocar significa al hacer clic en otro campo. Cambiar significa mientras está escribiendo el usuario. Proceso de la información del formulario Una vez diseñado el formulario, debemos determinar cómo procesar la información una vez que el usuario haga clic en el botón Enviar. Para ello se utilizan pequeños programas en lenguajes como PHP, ASP, Perl, y otros. En este curso no veremos cómo programar en estos lenguajes, pero daremos un ejemplo de cómo podríamos procesar la información del formulario anterior, que con algunos cambios podría adaptarse a cualquier otro. En este caso, los datos del formulario serán enviados a un e-mail. Primero, debemos asegurarnos de haberle ASIGNADO NOMBRES A TODOS LOS ELEMENTOS DEL FORMULARIO; y VALORES A LOS BOTONES DE OPCIÓN, CASILLAS y LISTADOS. Es importante que los nombres no tengan mayúsculas ni espacios. En nuestro caso, la página que contiene el formulario se llamará contacto.html. Luego, creamos un nuevo archivo cambiando la extensión html a php. Por ejemplo, podemos crear uno llamado respuesta.php. En contacto.html, hacemos clic en el formulario para acceder a sus propiedades. Allí debemos escribir, en la sección Acción, el nombre del archivo PHP. En respuesta.php, debemos escribir el siguiente código en la vista de Código: 7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>mandanos tus comentarios</title> </head> <body> <!-- Aquí podemos agregar todo lo referente al diseño de la página, como encabezado y demás --> <!--Script PHP para envío del e-mail--> <? if ($HTTP_POST_VARS){ //Estoy recibiendo el formulario, compongo el cuerpo del mensaje $cuerpo = "Datos del Formulario: \n"; $cuerpo.= "Nombre: ". $HTTP_POST_VARS["nombre"]. "\n"; $cuerpo.= "Apellido: ". $HTTP_POST_VARS["apellido"]. "\n"; $cuerpo.= "Ocupación: ". $HTTP_POST_VARS["ocupacion"]. "\n"; $cuerpo.= "Satisfecho: ". $HTTP_POST_VARS["satisfaccion" ]. "\n"; $cuerpo.= "Cursos que haría: \n". $HTTP_POST_VARS["diseno" ]. "\n". $HTTP_POST_VARS["office" ]. "\n". $HTTP_POST_VARS["reparador" ]. "\n"; $cuerpo.= "Comentarios: ". $HTTP_POST_VARS["comentarios"]. "\n"; //mando el correo... If (mail("tu-mail@mail.com.ar","(asunto) Mensaje de un alumno",$cuerpo)){?> Aquí va un agradecimiento por rellenar el formulario, avisando que se envió correctamente. <br> Además, inserto un hipervínculo para que pueda volver a la página principal: <a href='index.html'>volver</a> <??> }else{ Aquí va un aviso que el formulario no pudo ser enviado. <br> Además, inserto un hipervínculo para que pueda volver a la página principal (o a la del formulario): <a href='index.html'>volver</a> <? } }?> </body> </html> 8