You are on page 1of 11

TEMA: FORMULARIOS

SEM: 4 DIA:1 DREAMWEAVER

Introduccin Elementos de formulario Crear formularios

Validar formularios

OBJETIVO: CONOCER QUE ES UN FORMULARIO Y LOS ELEMENTOS QUE LOS CONFORMAN

Objetos del formulario


Los tipos de entrada de los formularios se denominan objetos de formulario. Puede insertar objetos de formulario por medio de la categora Formularios del panel Objetos o seleccionando Insertar > Formulario e Insertar > Objetos de formulario.

La categora Formularios del panel de objetos proporciona los siguientes botones:

Insertar formulario: Inserta un formulario en el documento. Dreamweaver inserta etiquetas form de apertura y cierre de formulario en el cdigo HTML. Los elementos adicionales del formulario, como los campos de texto o los botones, deben insertarse entre las etiquetas form para que los datos se procesen correctamente con todos los navegadores. Insertar campo de texto: Inserta un campo de texto en un formulario. Los campos de texto aceptan todo tipo de texto, tanto alfabtico como numrico. El texto introducido puede mostrarse como una sola lnea, varias lneas o como vietas y asteriscos (para proteccin de la contrasea). Insertar botn: Inserta un botn de texto en un formulario. Los botones llevan a cabo tareas cuando se hace clic en ellos, como enviar o restablecer formularios. Insertar casilla de verificacin: Inserta una casilla de verificacin en un formulario. Las casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones y permiten que los usuarios seleccionen tantas opciones como sean necesarias. Insertar botn de opcin: Inserta un botn de opcin en un formulario. Los botones de opcin representan opciones exclusivas de seleccin. Cuando se selecciona un botn en un grupo, se anula la seleccin de los dems botones del grupo; por ejemplo, los usuarios pueden seleccionar S o No. Insertar listas/mens: Permite crear opciones para el usuario en una lista. La opcin Lista muestra los valores de las opciones en una lista de desplazamiento y permite que los usuarios seleccionen mltiples opciones. La opcin Men muestra los valores de las opciones en una lista desplegable y permite que los usuarios seleccionen una sola opcin. Insertar campo de archivo: Inserta un cuadro de texto vaco y un botn Examinar en un documento. Los campos de archivo permiten al usuario examinar los archivos de sus discos duros y cargarlos como datos de formulario. Insertar campo de imagen: Permite insertar una imagen en un formulario. Los campos de imagen pueden usarse en lugar de los botones Enviar para crear botones Grficos. Insertar campo oculto: Inserta un campo en el documento que permite almacenar datos del usuario. Los campos ocultos permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de compra, y utilizarlos la prxima vez que el usuario visite el sitio.

Insertar men de salto: Inserta una lista de navegacin o un men emergente. Los mens de salto permiten insertar un men en el que cada opcin est vinculada a un documento o un archivo. Consulte "Crear mens de salto".
QUE ES UN CAMPO DE ARCHIVO? Es un cuadro de texto con un botn examinar

Partes del formulario Un formulario contiene propiedades que son invisibles para el usuario. Las propiedades especifican cmo se procesa el formulario Un formulario consta de tres partes bsicas: Etiquetas form, que incluyen el URL de la secuencia de comandos CGI que procesar el formulario y el mtodo que se utilizar para enviar los datos a un servidor. Campos de formulario, como campos de texto, mens, casillas de verificacin o botones de opcin. El botn Enviar, que enva los datos a la secuencia de comandos CGI del servidor.

Para aadir un formulario a un documento

1. Elija el punto donde quiere insertar el formulario y lleve a cabo una de estas operaciones:
En la categora Formularios del panel Objetos, seleccione el cono Insertar formulario. Elija en el Men Insertar > Formulario. En el documento, haga clic en el contorno para seleccionar el formulario si es que no est ya seleccionado. Las opciones del formulario se pueden configurar en el inspector de propiedades:

2.

3. En el campo Nombre del formulario, escriba un nombre exclusivo para el formulario. La


asignacin de nombre al formulario permite hacer referencia a l.

4. En el campo Accin, especifique la ruta del URL en el que reside la secuencia de comandos 5.
o la aplicacin que procesar el formulario. Para ello, lleve a cabo una de estas operaciones: En el men emergente Mtodo, elija el mtodo con el que se gestionarn los datos del formulario. Elija POST para enviar los valores del formulario en el cuerpo de un mensaje. Elija GET para adjuntar los valores del formulario al URL y enviar la informacin al servidor.

Nota: No utilice el mtodo GET con formularios largos. Los URL estn limitados a 8.192 caracteres. Si los datos enviados superan dicha longitud, la informacin se trunca dando lugar a resultados imprevistos. Tampoco utilice GET para gestionar nmeros de tarjeta de crdito u otra informacin confidencial, ya que este mtodo de transferencia de informacin no es seguro.

Objetos de formulario Una vez insertado el formulario, puede comenzar a aadirle objetos. A continuacin se vern los tipos de objetos: Campos de Texto Un campo de texto es un objeto de formulario en el que los usuarios pueden escribir datos. Hay tres tipos de campos de texto: Los campos de texto de una lnea: Se utilizan para proporcionar respuestas compuestas por una sola palabra o una frase corta; por ejemplo, un nombre o una direccin. Los campos de texto de varias lneas: Ofrecen mayor espacio al visitante para escribir la respuesta. Puede determinar fcilmente el nmero de caracteres o el nmero de lneas que puede introducir el visitante. Los campos de contrasea: Son campos de texto especiales. Cuando el usuario escribe en ellos, el texto queda oculto y aparecen asteriscos o vietas Para crear un campo de texto de una lnea o de contrasea

1. Coloque el punto de insercin en el interior del formulario y lleve a cabo una de estas

operaciones: Elija Insertar > Objeto de formulario> Campo de texto. En la categora Formularios del panel Objetos, haga clic en el cono Insertar campo de texto.

1. En el campo de texto, escriba un nombre nico para el campo, ya que no se puede repetir

2.

3.

el nombre de un campo de texto en un formulario. No utilice espacios; para separar palabras, utilice el carcter de subrayado. Por ejemplo, escriba primer_apellido en lugar de primer apellido. En el campo Ancho car, lleve a cabo una de estas operaciones: Acepte el valor predeterminado, que establece la longitud del campo de texto aproximadamente a 24 caracteres. Escriba un nmero para especificar la longitud del campo de texto. En el campo Car mx, lleve a cabo una de estas operaciones: Deje el campo vaco para que los usuarios puedan escribir todo el texto que deseen. Si el texto introducido por el usuario supera el ancho de caracteres (longitud) del campo, el texto se desplaza. Escriba el nmero mximo de caracteres que el usuario podr introducir en el campo. Por ejemplo, puede que desee limitar un campo de edad a tres dgitos o un campo de contrasea a ocho caracteres. Si el usuario supera el nmero mximo de caracteres, el formulario produce un sonido de alerta.

Campos ocultos Los visitantes del sitio no pueden ver los campos ocultos, que son elementos invisibles situados en un documento para recopilar o enviar informacin. La informacin de un campo oculto se transfiere al servidor cuando se enva un formulario y utiliza el par de nombre y valor definido al configurar el campo oculto. Dreamweaver aade un marcador al documento cuando se inserta un campo oculto. Si inserta un campo oculto y el marcador no es visible, elija Ver > Ayudas visuales > Elementos invisibles para verlo. Para crear un campo oculto:

1. Coloque el punto de insercin en el interior del contorno y lleve a cabo una de estas

operaciones: Elija Insertar > Objeto de formulario> Campo oculto. En la categora Formularios del panel Objetos, haga clic en el cono Insertar campo oculto. Aparecer un marcador en el documento.

2. Las opciones del campo oculto se pueden configurar en el Inspector de propiedades:

3. En el campo Campo oculto, escriba un nombre exclusivo para el campo. 4. En el campo Valor, escriba el valor que desee asignar al campo.
Casilla de verificacin y botn de opcin Utilice los objetos de formulario casilla de verificacin y botn de opcin para crear objetos de seleccin predefinidos. El usuario hace clic en una casilla de verificacin o un botn de opcin para hacer una eleccin. Para insertar una casilla de verificacin

1. Coloque el punto de insercin en el interior del formulario y lleve a cabo una de estas

operaciones: Elija Insertar > Objeto de formulario> Casilla de verificacin. En la categora Formularios del panel Objetos, haga clic en el icono Insertar casilla de verificacin.

2. En el campo Nombre de Casilla, escriba un nombre descriptivo para la casilla de


verificacin.

3. En el campo Valor activado, escriba un valor para la casilla de verificacin. 4.

Por ejemplo, en una encuesta, podra establecer el valor cuatro (4) para la opcin "Estoy totalmente de acuerdo" y uno (1) para la respuesta "No estoy de acuerdo". En Estado inicial, haga clic en "Activado" para que la opcin aparezca marcada cuando el formulario se cargue inicialmente en el navegador.

Para insertar botones de opcin

1. Coloque el punto de insercin en el interior del contorno y lleve a cabo una de estas

operaciones: Elija Insertar > Objeto de formulario> Botn de opcin. En la categora Formularios del panel Objetos, haga clic en el cono Insertar botn de opcin.

2. En el campo Botn opcin, escriba un nombre descriptivo para el grupo de opciones. 3. En el campo Valor activado, escriba el valor que desea enviar a la aplicacin del lado del 4.

servidor o a la secuencia de comandos de procesamiento cuando el usuario seleccione el botn de opcin. En Estado inicial, haga clic en Activado para que la opcin aparezca marcada cuando el formulario se cargue inicialmente en el navegador.

Listas y mens Utilice una lista de opciones o un men para presentar distintas opciones al usuario en un espacio limitado. Las listas y los mens de formulario se crean en el mismo Inspector de propiedades, pero proporcionan distinta funcionalidad al usuario. Utilice una lista cuando desee controlar el nmero de opciones que se muestran. Establezca el alto en lneas de la lista; cuando el nmero de opciones de la lista supere su alto en lneas, aparecer una barra de desplazamiento con la que el usuario podr ver todas las opciones. Tambin puede permitir que el usuario seleccione varios elementos de una lista. Utilice un men cuando el espacio sea muy reducido. Un men muestra una sola lnea e incluye una flecha abajo en la que el usuario hace clic para ver las opciones restantes del men. El usuario slo puede seleccionar un elemento de men de una sola vez. Para crear una lista de desplazamiento

1. Coloque el punto de insercin en el interior del formulario y lleve a cabo una de estas operaciones: En la categora Formularios del panel Objetos, haga clic en el cono Insertar lista/men. Elija Insertar > Objeto de formulario > Lista/men. 2. En el campo Campo Lista/men del inspector de propiedades, escriba un nombre exclusivo para la lista.

3. En el campo Tipo, seleccione Lista. 4. En el campo Alto, escriba el nmero de lneas que se mostrarn en la lista. El nmero predeterminado de lneas es 4. Si el nmero especificado es inferior al nmero de opciones de la lista, aparecern barras de desplazamiento. 5. Si desea permitir que los usuarios seleccionen ms de una opcin de la lista, elija Permitir mltiples de la opcin Selecciones. 6. Haga clic en Valores de lista para aadir las distintas opciones. Aparecer el cuadro de dilogo Valores de lista.

7. Coloque el punto de insercin en el campo Etiqueta de elemento y escriba el texto que aparecer en la lista. 8. En el campo Valor, escriba el texto o los datos que desea enviar al servidor cuando el usuario seleccione el elemento. 9. Para aadir otro elemento a la lista de opciones, haga clic en el botn con el signo ms (+) y repita los pasos 7 y 8. 10. Cuando haya terminado de ingresar los valores de la lista, presione Aceptar. Para crear un men Para crear un men, siga exactamente los pasos de la lista y en la opcin tipo en el Inspector de propiedades elija Men. Botn Los botones de formulario controlan las operaciones de los formularios. Puede utilizar un botn de formulario para enviar los datos introducidos por los usuarios al servidor o para restablecer un formulario, de forma que los usuarios puedan corregir la informacin antes de enviarla.

Para crear un botn de texto 1. Coloque el punto de insercin en el interior del formulario y lleve a cabo una de estas operaciones: Elija Insertar > Objeto de formulario> Botn. En la categora Formularios del panel Objetos, haga clic en el cono Insertar botn. 2. En el campo Nombre del botn del inspector de propiedades, escriba un nombre para el botn. 3. En el campo Etiqueta del inspector de propiedades, escriba el texto que desee mostrar en el botn. 4. En el campo Accin, lleve a cabo una de estas operaciones: Seleccione Enviar para enviar el formulario para su procesamiento cuando el usuario haga clic en el botn. Seleccione Restablecer para restablecer el formulario cuando el usuario haga clic en el botn. Seleccione Ninguna para activar otra accin basada en la secuencia de comandos de procesamiento cuando el usuario haga clic en el botn; por ejemplo, para calcular un total.

Practica: Crear un test de servicio para los clientes de un spa y deber llevar los siguientes datos.

Practica 2: Grupo Bimbo nos pide crear el formulario de contacto para sus clientes y debe contener los siguientes datos y debemos validar el formulario.

Practica 3: La empresa surtidor quiere actualizar su pagina web paa darle seguimiento a sus clientes.