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.
Profesor: Samuel Molina Javier
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.
Profesor: Samuel Molina Javier
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.
Profesor: Samuel Molina Javier
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:
Profesor: Samuel Molina Javier
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.
Profesor: Samuel Molina Javier
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.
Profesor: Samuel Molina Javier
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.
Profesor: Samuel Molina Javier
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:
Profesor: Samuel Molina Javier
Pgina 9
Aplicativos Web
-
Crearemos una nueva pgina PHP de nombre resumen.php, con el
siguiente contenido:
Profesor: Samuel Molina Javier
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
Profesor: Samuel Molina Javier
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.
Profesor: Samuel Molina Javier
Pgina 12