Diseño de páginas web

Transcripción

1 Diseño de páginas web Formularios Ricardo Esteban Alonso

2 Insertar Formularios (1) Permiten que el visitante envíe información al servidor web, que la procesa y la almacena o bien se nos envía a través del . Los controles de los formularios son parecidos a los cuadros de diálogo de las aplicaciones: botones, cuadros de texto, casillas de verificación, etc. Para insertar un formulario podemos utilizar, como casi siempre varias vías: El siguiente paso es situarnos dentro del formulario con el cursor y pulsar Insertar > Objetos de formulario, y nos aparece la relación de objetos que podemos insertar: Insertar > Formulario Ventana > Objetos > Formulario En ambos casos, al pulsar una ruta nos aparecerá en nuestra ventana de documento un rectángulo cuyos lados están formados por líneas discontinuas de color rojo. Dentro de un formulario (<form>) podemos colocar párrafos, tablas, etc. Formularios 8.-1

3 Insertar formularios (2) Por regla general, siempre se inserta una tabla dentro del formulario para que los objetos y el texto queden ordenados de forma más presentable. Una vez relleno el formulario la Acción más habitual es el envío por de los datos obtenidos, y así escribimos, en la caja correspondiente: mailto:direccióndecorreo Para que pueda leerse como un mensaje de correo, tenemos que escribir en la etiqueta del formulario de su código el atributo enctype= text/plain, que se escribe directamente en el código: Como ejemplo: Nombre del formulario: asignación que permite controlarlo con un lenguaje de sentencias de órdenes como JavaScript. Acción: identifica la aplicación del servidor donde está alojado nuestro sitio, el cual procesa la información, y la guarda o la devuelve, según la acción escrita. Método: que define cómo se manejan los datos del formulario: GET añade valores del formulario al URL y envía al servidor una petición, que está limitada a caracteres, lo cual implica que no se debe utilizar el método GET con formularios largos POST envía los valores del formulario en el cuerpo de un mensaje. PREDETERMINADO, usa el método GET. <form name= form1 method= post action= mailto:ies.jaime.ferran@centros5.pntic.mec.es enctype= text/plain > Formularios 8.-2

4 Objetos de formulario: campos de texto Campo de texto: todos los campos de texto deben tener un nombre exclusivo. Ancho car: nos permite indicar el número máximo de caracteres que se podrán mostrar en el cuadro de texto, y que puede ser menor que el de Car máx, que especifica el número máximo de caracteres que se pueden teclear. Car máx/líneas núm : establece el número máximo de caracteres que se pueden introducir en campos de texto de una línea, y establece la altura de campos de texto de múltiples líneas; se suele utilizar para limitar los códigos postales a 5 dígitos, números de teléfono a 9 dígitos, etc. Tipo: especifica si el campo es de una línea, de varias líneas o de contraseña. Valor inicial: permite teclear un valor que aparecerá ya escrito en el cuadro de texto cuando el internauta obtenga la página en su navegador, quien podrá cambiar ese valor por el que desee. Ajuste: cuando son Varias líneas, que nos permiten elegir entre cuatro opciones. Formularios 8.-3

5 Objetos de formulario: botones Al insertar el botón en el formulario se obtienen las propiedades siguientes en el inspector: Nombre del botón: permite asignarle un nombre al botón. Hay dos nombres reservados, Enviar y Restablecer, que indican respectivamente al formulario que envíe los datos del mismo a la secuencia de órdenes definida en la creación del formulario, y que restablezca los valores originales de los campos. Etiqueta: que nos permite escribir el pequeño rótulo de texto que muestra el botón en su interior. Acción: determina qué ocurre cuando se pulsa el botón. Enviar formulario. Restablecer formulario Ninguno, que no realiza ninguna tarea automática. Formularios 8.-4

6 Objetos de formulario: casillas de verificación Es un pequeño cuadrito que podemos activar o desactivar. Nombre de casilla: asigna un nombre. Valor activado: permite escribir el valor de la casilla cuando está seleccionada, y que será el que se envía al servidor. Estado inicial: permite elegir si el botón aparecerá Activado o Desactivado cuando el internauta navegue. Objetos de formulario: botones de opción Botón opción: asigna un nombre al botón; todos los botones de opción de un grupo deben tener el mismo nombre, y al activar uno de ellos se desactiva el otro que estuviese activado. Las propiedades son las mismas que las casillas de verificación. Formularios 8.-5

7 Objetos de formulario: listas/menús Lista/menú, asigna un nombre que es exclusivo y es un campo obligatorio. Tipo, que nos dice si queremos elegir entre un menú emergente o una lista de desplazamiento. Si seleccionamos Lista, podremos indicar el número de líneas de texto que abarcará la lista en la página (Alto) y si el navegante podrá seleccionar más de un elemento de la lista al mismo tiempo (Permitir múltiples). Al pulsar nos lleva a un cuadro de diálogo en el que se puede teclear los valores que aparecerán ya escritos en la página. Si se trata de una lista desplegable esos valores aparecerán cuando el internauta despliegue la lista. En Valor podemos teclear el nombre de otra página web, a la que nos llevará al navegar. Formularios 8.-6

8 Objetos de formulario: Campos de archivos Al cuadro de archivo le acompaña el botón examinar, ya programado, para que el navegante sólo necesite pulsarlo y buscar el archivo en el disco. Campo archivo, nombre del campo obligatorio y exclusivo. Ancho car, máximo de caracteres que puede mostrar el cuadro de texto. Car max, número máximo que se podrá teclear de caracteres. Sirve para limitar la longitud de los nombres de archivo. Para garantizar que el archivo se codifica correctamente y comprobando antes que el servidor permite la carga de archivos anónimos, tendremos que insertar en el código y manualmente ENCTYPE= multipart/form-data en la etiqueta <form>. Formularios 8.-7

9 Objetos de formulario: Campos de imagen, Campos ocultos y Menú de salto Los Campos de imagen se suelen utilizar en lugar de los botones Enviar. La imagen se elige mediante un cuadro de diálogo. Campos ocultos, permiten almacenar información que no son relevantes para el usuario, pero que serán usados por la aplicación que procesa el formulario. Menú de salto: permite insertar un menú en el que cada opción está vinculada a un documento o archivo. Formularios 8.-8

10 Validación de un formulario Este comportamiento se encarga de comprobar que los datos que teclee el internauta en un formulario son los adecuados, y se aplica a cada elemento que deseamos comprobar. En caso de que alguno de sus datos no sean los adecuados el formulario no se envía y se obtiene un mensaje parecido a Formularios 8.-9

11 Creación de un formulario como ejercicio FORMULARIO PARA PRACTICAR Formularios 8.-10