Diseño web

Universidad Nacional del Litoral 

Facultad de Ingeniería y Ciencias Hídricas 

Departamento de Informática 

Programación Web II 

Unidad  Formularios HTML  Sesión 01 
2007  Hugo Minni

Programación Web II – Unidad Nro. 1 – Sesiones de estudio 1 a 4. 

Pág. 1 de 51 

Sesión de estudio 1 

Formularios HTML 

Los formularios HTM L constituyen la única forma que  poseemos  en HTML de permitir  que  el usuario  ingrese  datos.  Ejemplos  de  uso  pueden  ser:  libros  de  visitas,  formularios  de  suscripción,  interfases  de  búsqueda,  etc.  Este  tema  es  muy  importante  y  adquiere  más  relevancia sobre el final de la asignatura. 

Para  realizar  esta  Sesión  de  Estudio  utilizaremos  Dreamw eaver  M X,  el  mismo software con el que  trabajamos  en Programación Web I.

Objetivos  La sesión de estudio 1 es la primera de las cuatro sesiones que realizaremos en la primer semana  de cursado de la asignatura. El objetivo final para la primer semana es que podamos definir un  formulario  HTML  completo  de  entrada  de  datos  implementando  además  características  de  validación de los mismos. 

Programación Web II – Unidad Nro. 1 –Sesiones de estudio 1 a 4. 

Pág. 2 de 51 

Los sitios WWW necesitan frecuentemente obtener información de sus visitantes. Los  propósitos son variados. Puede ser que nos interese saber su opinión, o que necesitemos que se  registren, o bien podemos necesitar establecer una transacción de comercio electrónico.  Sea cual fuere el motivo, los formularios constituyen la interfaz de usuario necesaria que nos permite obtener datos externos. Los formularios permiten solicitar a los usuarios  informaciónespecífica. También les proporciona la oportunidad de enviarnos sus opiniones,  preguntas o solicitudes.  Un formulario contiene campos que permiten al usuario ingresar información. Estos  campos pueden ser cajas de texto, botones de opción, casillas de verificación o listas. Estos datos son normalmente enviados a una base de datos en un servidor, a una  dirección de email o a una aplicación para su procesamiento.  Los scripts CGI (Common Gateway Interface) son utilizados normalmente para  procesar los datos del formulario. 

Nuevo concepto:  Common Gateway Inter face  CGI es un protocolo estándar que actúa como un enlace entre los datos enviados desde el formulario  y el servidor. 

Archivos necesarios par a r ealizar  la Guía de estudio  Archivos de medios:  

Lesson_11_Forms/Images/lights_title.gif  Lesson_11_Forms/Images/spacer.gif 
Archivos de inicio:  

Lesson_11_Forms/buoys.html  Lesson_11_Forms/gps.html  Lesson_11_Forms/lights_quiz.html  Lesson_11_Forms/radar.html  Lesson_11_Forms/related_navigation.html  Lesson_11_Forms/sonar.html 
Pr oyecto ter minado:  Lesson_11_Forms/Completed/lights_quiz.html  Lesson_11_Forms/Completed/related_navigation.html

Programación Web II – Unidad Nro. 1 – Sesiones de estudio 1 a 4. 

Pág. 3 de 51 

Definir un for mular io 

Antes  de  agregar  ningún  campo  debemos  ubicar  un  formulario  en  la  página.  El  formulario es el que contendrá los campos que los usuarios utilizarán para ingresar información. El formulario es también el que especifica qué se desea hacer con los datos.  A continuación definiremos el área del formulario.  1)  Abra  el  documento  lights_quiz.html  ubicado  en  la  carpeta  Lesson_11_Forms.  Ubique  el  puntero  de  inserción  en  la  línea  en  blanco  debajo  del  texto  “ Test  your  Knowledge  about  lighthouses...” .  En la barra Insert, en la ficha Forms, haga click en el ícono Form (  ) Consejo  También podemos insertar un formulario seleccionando Insert/Form.  En  la  ventana  del  documento  las  líneas  punteadas  en  rojo  identifican  visualmente  el  área  abarcada por el formulario. 

Tecnología subyacente:  HTML  El área abarcada por el formulario es definida por las etiquetas   y   en HTML.

Estas  líneas  rojas  son  elementos  invisibles  solo ...