CREACIÓN DE FORMULARIO EN ADOBE DREAMWEAVER CS4

Aplicativos Web

CREACIN DE FORMULARIO EN ADOBE DREAMWEAVER CS4Los formularios pueden ser creados dentro de tablas o divisiones, de esa manera no pierden el aspecto que caracteriza, ya que sus controles deben estar bien organizados. Como ya sabr, los formularios pueden enviar datos a un correo electrnico (si es que el cliente de correo se halla configurado), o hacia una pgina dinmica de tipo ASP, ASP.NET o PHP. Existen en la web ciertos servicios que permiten incluir ciertas modificaciones, tal es as, que los datos puedan ser recepcionados en un correo como Gmail, Hotmail, etc., sin necesidad de incluir rutinas complicadas de programacin. Procedimiento Crear una pgina HTML en blanco, y guardar con el nombre de registro.html. Ir a la Barra Insertar > Formularios. .

-

Insertar una tabla de 20 filas y 3 columnas, con borde 0, y colocar los textos siguientes:

-

Combinar algunas celdas y darle el formato correspondiente hasta obtener el siguiente diseo:

Profesor: Samuel Molina Javier

Pgina 1

Aplicativos Web

-

Insertar un Campo de Texto, en donde el usuario podr escribir sus Apellidos.

-

Establecer en la propiedad Tipo: una lnea, para Apellidos, Nombres y Nombre de Usuario, ancho de caracteres (Ancho car.) en 30. En Contrasea elegir el tipo Contrasea, ancho de 6 y caracteres mximo (Car. Mx) en 6.


Pgina 2

Aplicativos WebEn email, establecer el valor inicial (Val inicial) en @, en condiciones de uso el tipo varias lneas, ancho de caracteres en 40, nmero de lneas (Lneas nm) en 3, en valor inicial un texto.

-

Insertar en el sexo, dos botones de opcin.

-

Al botn de opcin Masculino, establecer la propiedad activado y en femenino desactivado. A ambos se debe colocar el mismo Id (sexo).

-

Insertar una Lista/Men para configurar los pases de residencia.


Pgina 3

Aplicativos Web

-

Insertar Casillas de Verificacin en las preferencias.

-

Insertar dos botones, uno con la propiedad Enviar formulario activado, y otro con la propiedad Restablecer formulario, activada.

-

Previsualizar en el navegador.


Pgina 4

Aplicativos Web

-

Por ltimo, establecer el mtodo de envo (get / post), y la accin (si ser enviado a un correo o procesar un documento dinmico de tipo ASP, ASP.NET o PHP). En nuestro ejemplo, puede activar el formulario desde el selector de etiquetas, y enviar los datos hacia el correo de [email protected].

Ejemplo. -

.

Crear una pgina PHP en blanco, y guardar con el nombre de ejemplo03.php, con el siguiente diseo:


Pgina 5

Aplicativos Web

1

-

Insertar un formulario y dentro una tabla de borde 0 formado por 4 columnas y 5 filas. En ella insertar los controles de formulario que se muestran en la captura y una imagen (1) con el ID: imagen. En la lista de productos aadir los elementos:

Al cuadro de lista de los productos y a los textfield correspondientes a la cantidad y al precio unitario modificar el ID.lstProducto txtcantidad txtpu

-

Establecer en las propiedades del formulario el action hacia la pgina procesos.php, y en el mtodo seleccionar POST.

-

Crear una pgina PHP en blanco, y guardar con el nombre de procesos.php.


Pgina 6

Aplicativos Web

-

Observar el uso de las variables y operadores. Retornar a la pgina ejercicio03.php y previsualizar en el navegador.

-

Para completar el diseo anterior, agregar una funcin Javascript al cuadro de lista para que al seleccionar un artculo se cargue la imagen correspondiente.

-

Como se observa, el evento a usar sera onchange, y enva el valor del ndice correspondiente al elemento seleccionado a la funcin mostrar, declarada en el encabezado.


Pgina 7

Aplicativos Web

Ejercicio -

.

Crear una pgina PHP en blanco, y guardar con el nombre de ejemplo04.php, con el siguiente diseo:

-

El cuadro de lista (lstcursos) debe mostrar los nombres de 3 cursos cualquiera, y el primer elemento - -Seleccione un curso.


Pgina 8

Aplicativos Web

-

A los botones de radio establezca el mismo nombre: condicion, y el valor activado para Pagante (P) debe ser de 500, para Semibecado (S) ser 250 y para Becado (B) ser 0.

-

El botn procesar es un botn de accin ninguno, que debe enviar los datos a una pgina de nombre resumen.php.

-

Usando rutinas de Javascript validaremos la entrada de datos de los tems que aparecen con asterisco, para lo que invocaremos desde el botn Procesar a la funcin validar.

-

La funcin validar:


Pgina 9

Aplicativos Web

-

Crearemos una nueva pgina PHP de nombre resumen.php, con el siguiente contenido:


Pgina 10

Aplicativos Web

MTODOS GET / POSTLa diferencia entre el mtodo POST y GET radica en la confidencialidad de los valores enviados desde el formulario, los que son mostrados en la URL a travs del mtodo GET pero son ocultados usando POST. Ejercicio .

-

Regrese al diseo de la pgina ejercicio03.php y cambie el mtodo de POST por GET.

GET


Pgina 11

Aplicativos WebPrevisualizar en el navegador.

-

Observe que los datos del formulario son visualizados en la barra de direccin, lo cual en el caso de ser passwords, sera contraproducente.


Pgina 12

CREACIÓN DE FORMULARIO EN ADOBE DREAMWEAVER CS4

Documents

Transcript of CREACIÓN DE FORMULARIO EN ADOBE DREAMWEAVER CS4