SOBRE LOS FORMULARIOS

Transcripción

1 SOBRE LOS FORMULARIOS DISEÑO Y DIRECCIÓN DE SITIOS WEB Los formularios de la Web recolectan información. Cada dato se escribe en su propia área para que sea más sencillo comprenderlos. El formulario está claramente delimitado por la etiqueta <form>. Los formularios basados en Web están compuestos de una serie de elementos de formulario, cada uno utilizado para un propósito diferente: Campos de texto: Permiten escribir texto en general con un número limitado de caracteres. Los campos de texto configurados como campos de contraseña enmascaran los caracteres a medida que se escriben. 1 Faustino Hermoso Ruiz

2 Áreas de texto: Son similares a los campos de texto, pero diseñados para albergar una mayor cantidad de texto, como varias frases o párrafos. Botones de opción: Permiten seleccionar un elemento dentro de un grupo. Cualquier selección de un elemento del grupo elimina cualquier selección anterior. Casillas de verificación: Permiten realizar una selección de tipo sí o no. Las casillas de verificación se pueden agrupar, pero a diferencia de los botones de opción no son mutuamente excluyentes. Listas: Muestran las opciones en un formato de lista desplegable. Las listas (también llamadas menús desplegables o listas de selección) pueden forzar la selección de un único elemento, o permitir seleccionar varios a la vez. 2

3 Oculto: Comunica información que el visitante no puede ver al mecanismo de procesamiento del formulario. Los elementos de formulario ocultos se utilizan de forma intensiva en aplicaciones de página dinámicas. Botones: Se utilizan para enviar el formulario o para realizar algunas otras tareas interactivas concretas, como limpiar el formulario. La etiqueta <form> incluye un atributo de acción; el valor del atributo de acción se activa cuando se envía el formulario. Normalmente la acción es la dirección Web de otra página o un script del lado del servidor que realmente gestiona el procesamiento del formulario. Para obtener más información sobre aplicaciones dinámicas para el almacenamiento de información en sus formularios, consultad la ayuda de 3 Dreamweaver pues no tenemos tiempo para más.

4 1. Abrimos la carpeta lessono8 (que os he puesto en la carpeta de la asignatura en Biblydoc/Facultad/Asignaturas.y hacemos doble clic sobre el archivo contact-start.html para abrirlo. 2. Escojemos Archivo>Guardar. En el campo del nombre del archivo, escribimos contact.html, y hacemos clic en Guardar. De este modo se conservará intacto el archivo contact start. html por si deseamos abrirlo más adelante. La etiqueta de formulario debe albergar todos los elementos de formulario, por lo que normalmente es mejor añadirla a la página en primer lugar. Si intentamos insertar un formulario sin una etiqueta <form>, Dreamweaver nos pedirá que la agreguemos. 3. Dentro del div maincontent, hacemos clic tras el 4 signo de interrogación del encabezado para indicar el lugar de inserción

5 4. En el panel Insertar, escojemos Formularios en la lista de categorías. En la categoría Formularios, hacemos clic sobre Formulario (Dreamweaver insertará la etiqueta <form> en el punto elegido, indicándolo visualmente mediante un recuadro de línea discontinua de color rojo. Si no se muestra la línea díscontinua, escojemos Elementos invisibles en el menú de botones Ayudas visuales de la barra de herramientas Documentos. 5

6 6

7 A continuación vamos a configurar el atributo de acción de la etiqueta <form>. 5. Si es necesario, escogemos Ventana>Propiedades para mostrar el panel Propiedades. Dentro de éste, hacemos clic en la carpeta que se encuentra junto al campo Acción. En el cuadro de diálogo Seleccionar archivo, accedemos a la carpeta lesson 08 y después seleccionamos formprocessing.html. Hacemos clic sobre Aceptar. El campo Action apunta a la página a la que se enviarán los datos para su procesamiento. El procesamiento puede insertar la información en una base de datos, crear contenido dinámico, generar respuestas, o realizar otras acciones. En este ejercicio, la acción del formulario consistirá simplemente en cargar la página de agradecimiento en el navegador una vez enviado el 7 formulario.

8 6. Escojemos Archivo>Guardar. Acabamos de crear el elemento formulario. A continuación vamos a insertar los campos de formulario, empezando por los campos de texto. INSERTAR ELEMENTOS DE FORMULARIO DE TEXTO Los campos de texto son los verdaderos protagonistas de entre todos los elementos de formulario. Utilizan una etiqueta <input> y aparecen en el selector de etiquetas como <input>. Son las herramientas más básicas de obtención de datos no estructurados en expresiones de texto cortas. Muchos formularios se componen exclusivamente de campos de introducción de texto. Vamos a insertar campos de texto básicos, campos de texto de Spry, campos de texto de confirmación de contraseñas, y áreas de texto. Antes de empezar, nos aseguraremos de que Dreamweaver puede añadir elementos 8 de formulario de forma accesible.

9 6. Configuración para formularios accesibles Los elementos de formulario poseen unos requisitos especiales en lo tocante a la accesibilidad. Los dispo sitivos de tecnología de asistencia, como los lectores de pantalla, requieren un código concreto para poder leer de forma correcta formularios y elementos individuales de formulario. Dreamwcaver ofrece una opción que genera código de formulario en el formato apropiado. 1. Escojemos Edición>Preferencias (Windows) o Dreamweaver>Preferencias (Mac). 2. Cuando se muestre el cuadro de diálogo Preferencias, hacemos clic sobre Accesibilidad en la lista Categoría. 9

10 6. 3. En la categoría Accesibilidad, nos aseguramos de que está activada la casilla de verificación Objetos de formulario y hacemos clic sobre Aceptar. Utilizar campos de texto Los campos de texto aceptan caracteres alfanumé ricos, letras y números, en una cuantía limitada. El límite físico real de un campo de texto son 255 caracteres, pero la mayoría de los campos de texto se usan para cadenas mucho más cortas, como nombres o direcciones. 1. Hacemos clic en el contorno rojo del formulario. 2. En la categoría Formularios del panel Insertar, hacemos clic sobre Campo de texto ( 10

11 3. En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos name en el campo ID y pulsamos Tab. Escribimos Nombre en el campo Etiqueta y pulsamos Tab. Ponemos la letra inicial de la etiqueta Nonmbre en mayúsculas, porque la persona que rellene el formulario leerá esta etiqueta junto al campo de texto del formulario. 4. En la sección Estilo, escogemos Adjuntar etiqueta de título utilizando el atributo for. Nos aseguramos de que está seleccionada la opción Posición: Antes del elemento de formulario Hacemos clic en Aceptar. 11

12 Escojemos Archivo>Guardar. Acabamos de ubicar el primer objeto del formulario. La inserción del resto de campos de texto estándares se realiza de un modo similar. 12

13 13

14 Al haber seleccionado la opción Adjuntar etiqueta de título utilizando el atributo 'for', Dreamweaver insertará este código: <1abel for="name">nombre</label> <input type>"text" id="name" /> Esta disposición de código permite a la etiqueta <1abel> estar claramente conectada a la etiqueta de elemento de formulario < input > y así funciona para las demás. Sin embargo, las etiquetas de los botones de opción y las casillas de verificación se suelen colocar tras sus campos de formulario. Estas convenciones mejoran la usabilidad y accesibilidad de los formularios. Archivo>Guardar. Acabamos de ubicar el primer objeto del formulario. La inserción del resto de campos de texto estándares se realiza de un modo similar. 14

15 Insertar campos de texto de Spry Dreamweaver también incluye una serie de objetos de Spry para formularios. Cada accesorio de formulario de Spry combina elementos de formulario con un sofisticado código JavaScript para crear objetos de formulario fáciles de utilizar con validación incorporada. La validación es un proceso en el que se verifica que se ha insertado el tipo de dato correcto en un elemento de formulario en particular. Esto garantiza la integridad y la calidad de los datos introducidos en el formulario. Por ejemplo, si el visitante del sitio ha escrito una dirección de correo no válida o incompleta en un campo de mensaje de correo electrónico, el dato será rechazado. La validación también puede asegurar que se rellenen los campos de formulario requeridos antes de que se envíe el formulario. 15

16 Insertar campos de texto de Spry Existen accesorios de formulario de Spry para varios tipos de elementos de formulario: campos de texto, áreas de texto, casillas de verificación, contraseñas, validación de contraseñas, botones de opción, y listas de selección. Cada accesorio funciona básicamente del mismo modo: se inserta el objeto y después se definen sus propiedades mediante el panel Propiedades. Vamos a Insertar campo de texto de validación de Spry: 1. Hacemos clic tras el campo Name que introdujo anteriormente y pulse Mayús- Intro (Windows) o Mayús-Retorno (Mac) para crear un salto de línea. 16

17 AÑADIR UN FORMULARIO A LA PÁGINA Vamos a Insertar campo de texto de validación de Spry: 2. En la categoría Formularios del panel Insertar, escogemos la herramienta Campo de texto de validación de Spry 3. En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos en el campo ID y pulse Tab. Escribimos en el campo Etiqueta y pulsamos Tab. En las opciones de Estilo, nos aseguramos de que esté activada la opción Adjuntar etiqueta de título utilizando el atributo 'for'. En las opciones de Posición, escogemos Antes del elemento de formulario. Hacemos clic sobre Aceptar. 17

18 Vamos a Insertar campo de texto de validación de Spry: 1. Hacemos clic tras el campo Name que introdujimos anteriormente y pulsamos Mayús-Intro (Windows) o Mayús-Retorno (Mac) para crear un salto de línea. Ahora que el elemento de formulario está en la página con la funcionalidad de Spry añadida, ya se puede personalizar. Si no está visible la ficha Campo de texto de Spry, situamos el cursor sobre el campo de texto del y esperamos hasta que se muestre la ficha Campo de texto de Spry. Hacemos clic sobre la ficha para seleccionar el objeto Si es necesario, escojemos Ventana> Propiedades para mostrar el panel Propiedades. Elija Correo electrónico en el menú desplegable Tipo. El panel Propiedades personalizado ofrece mucha información y atributos que definir. Existe un gran número de tipos de validación, incluyendo desde Entero a 18

19 Vamos a Insertar campo de texto de validación de Spry: En el panel Propiedades, escogemos la opción onblur en Validar al, y nos aseguramos de que la opción Obligatorio está marcada. Cuando un campo es obligatorio, el usuario debe rellenar éste antes de enviar el formulario. Por defecto, todas las validaciones se activan cuando se envía el formulario. En la mayoría de los casos, se pueden añadir activadores previos adicionales. Aquí, el campo comprueba si lo escrito posee el formato de una dirección de correo electrónico después de que el haya pulsado Tab o haya hecho clic fuera de este campo. Esto ofrece una reacción más inmediata y más facilidades para el usuario. Si no se rellena el campo, la opción Obligatorio se asegura de que se muestre un mensaje de error cuando se envíe el formulario. 19

20 Vamos a Insertar campo de texto de validación de Spry: Se pueden aceptar los mensajes de error por defecto que trae Dreamweaver para estos campos de Spry, aunque es muy fácil personalizar los mensajes de error usando el menú Estados de vista previa del panel Propiedades. Seleccionamos cualquier estado de vista previa y escribimos en la ventana del documento un mensaje personalizado. Para hacer desaparecer de la vista los mensajes de error mientras se trabaja en el diseño de la página, escogemos Inicial en el menú Estados de vista previa. 20

21 21

22 Crear un juego de campos Podemos organizar los dos primeros campos de texto en una caja con contorno que tenga un nombre descriptivo (o leyenda) utilizando una etiqueta <fieldset>. 1. Hacemos clic a la derecha del campo , y pulsamos Intro (Windows) o Retorno (Mac) para crear una nuevalínea. 2. Seleccionamos las etiquetas Nombre y , y los campos de texto. 3. En la categoría Formularios del panel Insertar, seleccionamos la herramienta Juego de campos 4. En el campo Texto, escribimos Información de contacto y hacemos clic en Aceptar Escogemos Archivo>Guardar todo.

23 23

24 Crear campos de texto de validación de Spry para el usuario y la contraseña Algunos campos de texto no necesitan un formato concreto, pero exigen que se introduzca cierto número de caracteres. Es un requisito habitual en los nombres de usuario de las Web. (Con Spry podemos controlar que el usuario cumpla los requisitos) 1. Hacemos clic tras el juego de campos que hemos añadido, pero dentro aún del borde rojo del formulario, para fijar el punto de inserción. Si fuera necesario, seleccione el juego de campos y pulse la Flecha dcha. para ubicarse. Pulse Intro (Windows) o Retorno (Mac) para crear un párrafo en blanco. 2. En la categoría Formularios del panel Insertar, escogemos la herramienta Campo de texto de validación de Spry. 24

25 Crear campos de texto de validación de Spry para el usuario y la contraseña 3. En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos nombre username en el campo ID y pulsamos Tab. En el campo Etiqueta, escribimos Nombre de usuario: y pulsamos Tab. En la sección Estilo, nos aseguramos de que se encuentra seleccionada la opción Adjuntar etiqueta de título utilizando el atributo 'for'. En la sección Posición, seleccionamos Antes del elemento de formulario. Haga clic sobre Aceptar 4. En el panel Propiedades, seleccionamos la opción onblur en Validar al, y escribimos 6 en el campo Car. min. Nos aseguramos de que está marcada la casilla obligatorio 5. Si en vista de Vista Diseño se muestra un mensaje de error sobre fondo rojo, deberemos acudir al panel Propiedades y escoger Estados de vista previa: Inicial 25 para eliminar dicho mensaje. Archivo>Guardar

26 26

27 Crear un campo de contraseña Los campos de contraseña son bastante comunes en la Web. Normalmente, un campo de texto muestra los caracteres a medida que se van escribiendo. No obstante, cuando el campo de texto contiene una contraseña, los caracteres que se escriben se enmascaran como una serie de asteriscos o puntos gruesos, dependiendo del navegador. Se trata de una medida de seguridad. 1. Pulsamos Mayús-Intro (Windows) o MayúsRetorno (Mac) para crear un salto de línea tras el campo del nombre de usuario. 2. En la categoría Formularios del panel Insertar, escogemos la herramienta Contraseña de validación de Spry 3. En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, 27 escribimos password en el campo ID. Escribimos Contraseña: en el campo Etiqueta.

28 Crear un campo de contraseña En las secciones Estilo y Posición, deben estar seleccionadas las opciones Adjuntar etiqueta de título utilizando el atributo 'for' y Antes del elemento de formulario. Aceptar. 4. clic sobre la pestaña SpryPassword. En el panel Propiedades, seleccionamos obligatorio y Validar al on Blur. En el campo Car. mín., escriba 8. En el campo Valor mín., escriba 2. Si no deseamos que se muestre el mensaje de error por defecto en la ventana de diseño, escogemos Estados de vista previa: Inicial en el panel Propiedades. 5. Pulsamos la Flecha dcha. para situarse detrás del campo de la contraseña. Luego pulse Mayús-Intro (Windows) o Mayús-Retorno (Mac) para crear un salto de línea tras el campo de la contraseña.. 28

29 29

30 Crear un campo de contraseña En la categoría Formularios del panel Insertar, clic en el botón Confirmación de validación de Spry para crear un campo de texto para confirmar la clave. En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos confirmpw en el campo ID. Escribimos Repetir Password: en el campo Etiqueta y pulsamos Tab. En las secciones Estilo y Posición, seleccionadas las opciones Adjuntar etiqueta de título utilizando el atributo for y Antes del elemento de formulario. Clic sobre Aceptar. Hacemos clic para colocar el cursor justo tras el campo de confirmación de la contraseña, y pulsamos Intro (Windows) o Retorno (Mac). Como el usuario del sitio Web no sabe qué reglas se aplican al nombre de usuario y a 30 su contraseña, es pertinente agregar un párrafo explicativo que preceda a estos tres campos.

31 Crear un campo de contraseña Vamos a retroceder hasta el párrafo en blanco que hay sobre el campo del nombre de usuario para escribir algunas instrucciones. Sí no aparece este párrafo vacío, seleccione el nombre de usuario y pulse Intro (Windows) o Retorno (Mac) para crearlo. Hacemos clic en el párrafo en blanco que hemos creado delante del campo del nombre de usuario y escribimos las instrucciones que le digan que el nombre de usuario debe tener al menos 6 caracteres alfanuméricos y la contraseña 8 siendo obligatorio que al menos 2 sean números Podríamos rodear ahora el párrafo de instrucciones y los tres nuevos campos de texto con un juego de campos. 1.- Seleccione el párrafo y los tres campos. 2.- En la categoría Formularios del panel Insertar, hacemos clic en el botón juego de campos. Escribimos herramientas Online en el campo Texto Haga 31 clic en Aceptar. Archivo>Guardar.

32 Crear áreas de texto Las áreas de texto permiten que el usuario escriba una cantidad de texto mucho mayor que los campos de texto. Las áreas de texto permiten escribir múltiples líneas y, por defecto, ajustar el texto. Si el texto introducido excede el espacio físico disponible en la página, aparecerán automáticamente unas barras de desplazamiento. Un método alternativo para crear un juego de campos es crear éste primero y después agregar los elementos de formulario. Vamos a utilizar este método para los siguientes elementos de formulario. 2. Colocamos el cursor bajo el último juego de campos pero dentro aún del borde rojo del formulario. Si fuera necesario, haga clic dentro del último juego de campos, luego hcemos clic sobre < f i e 1 d s e t > en el selector de etiquetas, y pulsamos la Flecha dcha. para desplazarse hacia atrás. En la categoría Formularios del panel 32 Insertar, haga clic en el botón juego de campos. En el campo Texto, escribimos Tu Opinión y haga clic en Aceptar

33 Crear áreas de texto En la categoría Formularios del panel Insertar, hacemos clic sobre Área de texto En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos plans en el campo ID y pulsamos Tab. En el campo Etiqueta, escribimos Planes de tu visita. En la sección Estilo, nos aseguramos de que se encuentra seleccionada la opción Adjuntar etiqueta de título utilizando el atributo 'for'. En las opciones de Posición, Antes del elemento de formulario. Clic sobre Aceptar. El área de texto aparecerá justo tras la etiqueta. Hacemos clic detrás de la etiqueta y pulsamos Mayús-Intro (Windows) o Mayús-Retomo (Mac) para crear un salto de línea. En el Panel Propiedades lo podemos hacer más o menos ancho o alto Hacemos clic dentro del área de texto vacía y escribimos el mensaje que queramos que aparezca ante los usuarios A veces es buena idea utilizar el campo Val. Inicial (abreviatura de "valor inicial ) 33 para mostrar un mensaje de ayuda al usuario que describa lo que esperamos que nos escriba ARCHIVO>GUARDAR

34 34

35 CREAR BOTONES DE OPCIóN Cuando deseemos que los visitantes escojan uno de los diversos elementos ofrecidos, deberemos utilizar un grupo de botones de opción. Al contrario que otros elementos de formulario, cada botón de opción no posee un nombre único; en lugar de ello, todos los botones de opción del mismo grupo poseen el mismo nombre. Para diferenciar los botones, cada uno de ellos posee un valor distintivo. Dreamweaver ofrece dos métodos para añadir botones de opción a su página. O bien insertar individualmente cada botón de opción, o bien insertar un grupo en una única operación utilizando el accesorio Grupo de opciones de validación de Spry. Si insertamos los botones de opción de forma separada, necesitará cambiar el nombre a todos ellos para asegurarse de que todos poseen el mismo nombre. 35

36 CREAR BOTONES DE OPCIóN Si los insertamos como un Grupo de opciones de valídación de Spry, todos poseerán el mismo nombre, y los archivos JavaScript y CSS asociados permitirán utilizar estilos y mensajes de error personalizados. Hacemos clic tras el campo de área de texto, pero dentro aún del juego de campos con la etiqueta Tu Opinión. Pulsamos Intro (Windows) o Retorno (Mac) para pasar a una nueva línea. Escribimos Cúantos sois en tu grupo de viaje? Pulsamos Intro (Windows) o Retorno (Mac). 3. En la categoría Formularios del panel Insertar, clic en Grupo de opciones de validación de Spry 4. clic sobre el botón de la suma (+) de los Botones de opción tres veces 36 para crear un total de cinco botones de radio.

37 CREAR BOTONES DE OPCIóN Ahora agregaremos las etiquetas y los valores para estos botones. 5. Clíc sobre la primera opción de la lista, y escribimos Uno en el campo Label. Pulse Tab y escriba one en el campo Value. Pulse Tab y escriba Dos en el segundo campo Label, y escriba two en el segundo campo Value. De manera similar con las etiquetas Three, Four y More, y sus respectivos valores three, four y More. En la opción Disponer utilizando, escoja Saltos de línea (etiquetas <br» Hacemos clic sobre Aceptar. Si el grupo de opciones no está seleccionado actualmente en la ventana del documento, clic sobre la pestaña azul para seleccionar el accesorio Spry del grupo de opciones. En el panel Propiedades, marcamos Obligatorio. 37 Archivo>Guardar.

38 38

39 Al utilizar el accesorio Grupo de opciones de validación de Spry, hacemos de éste un elemento obligatorio del formulario. Si el usuario del sitio Web no selecciona uno de los botones de opción, se mostrará un mensaje de error al enviar el formulario. INSERTAR CASILLAS DE VERIFICACIÓN Las casillas de verificación ofrecen una serie de opciones que se pueden seleccionar formando cualquier combinación. Como los botones de opción, las casillas de verificación forman parte de un grupo con nombre. Cada casilla de verificación posee su propio valor y su propia ID. 1. Hacemos clic tras el grupo de botones de opción y pulse Intro (Windows) o Retorno (Mac). Podemos inspeccionar el código en vista de Código y diseño para asegurarnos de que se ha situado más allá de la etiqueta < /p> de cierre y la etiqueta <span> que contiene el mensaje de error que se mostrará si se omiten los botones de 39 opción requeridos. En Vista Diseño, escribimos Qué servicios te gustaría que te prestásemos? Pulsar Intro (Windows) o Retorno (Mac).

40 INSERTAR CASILLAS DE VERIFICACIÓN En la categoría Formularios del panel Insertar, haga clic sobre Grupo de casillas de verificación En el cuadro de diálogo Grupo de casillas de verificación, hacemos clic sobre el botón del signo de la suma (+) que hay junto a Casillas de verificación para crear una tercera casilla de verificación. Cambiamos la primera etiqueta por Tours guiados y pulse Tab; luego en el campo Value, escribimos tours. Sigamos hasta tener etiquetas para Transportes y Hoteles con sus valores respectivos, Dentro de las opciones Disponer utilizando, escoja Saltos de línea Para utilizar el Grupo de casillas de verificación no necesitamos configurar propiedad alguna en el panel Propiedades ARCHIVO>GUARDAR 40

41 41

42 TRABAJAR CON LISTAS La lista desplegable estándar permite hacer una única elección, mutuamente excluyente, como los grupos de botones de opción. No obstante, cuando se activa la opción de selección múltiple, la lista desplegable se comporta de forma similar a una serie de casillas de verificación. Hagamos clic tras la última casilla de verificación, y pulsemos Intro (Windows) o Retorno (Mac). Escribimos Cúando vas a viajar? y pulsamos Intro (Windows) o Retorno (Mac). En la categoría Formularios del panel Insertar, escogemos Lista/Menú 42

43 TRABAJAR CON LISTAS En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos timeline en el campo ID y pulsamos Tab. Dejamos vacío el campo Etiqueta, y en la sección Estilo, seleccionada la opción No hay etiqueta de rótulo. Aceptar. No necesitamos ninguna etiqueta de rótulo, pues el texto del elemento de formulario hace de etiqueta en este caso. Ahora todo está listo para añadir las opciones de la lista. Dreamweaver ofrece un cuadro de diálogo aparte para esta tarea, accesible mediante el panel Propiedades. 43

44 TRABAJAR CON LISTAS Seleccionamos el elemento de formulario de lista desplegable que acabamos de insertar. Si es necesario, escogemos Ventana>Propiedades. En el panel Propiedades, hacemos clic sobre Valores de lista. 6. En el cuadro de diálogo Listar valores, en la columna Etiqueta del elemento, escribimos Inmediatamente y pulsamos Tab. Escribimos inmediatamente en la columna Valor. Luego añadimos los elementos dentro de dos meses y dentro de este año con sus respectivos valores. 44

45 TRABAJAR CON LISTAS Hacemosa clic sobre Aceptar. Ahora vamos a ver el elemento de lista desplegable que se va a mostrar cuando se cargue la página; suele ser el primer elemento de la lista. En el panel Propiedades, seleccionamos Inmediatamente en el cuadro Seleccionado inicialmente. En el área Tipo, escogemos Menú Cuando el elemento Lista/Menú recibe formato de menú, la lista no permite realizar selecciones múltiples. Para que los usuarios tengan la posibilidad de seleccionar varios elementos, cambiaríamos la opción Tipo a Lista, y luego marcaríamos la casilla de verificación Permitir múltiples. Archivo>Guardar. Un elemento de menú puede contener muchas opciones, permitiendo incorporar a la 45 página un gran número de estas opciones ocupando un espacio reducido.

46 46

47 AÑADIR UN BOTÓN DE ENVÍO El botón de envío es necesario para ejecutar la acción del formulario. Como implica su nombre, este objeto del formulario envía el formulario completo para su procesamiento y por ello es un elemento esencial. Por defecto, el objeto de botón en Dreamweaver está configurado para enviar, aunque existen otras opciones disponibles. Podríamos, por ejemplo, incluir un botón para reiniciar el formulario. 2. Hacemos clic sobre cualquier elemento de menú del último juego de campos. En el panel Propiedades, seleccionamos la etiqueta < f i e 1 d s e t > A continuación vamos a colocar el botón Enviar fuera del juego de campos. 47

48 AÑADIR UN BOTÓN DE ENVÍO 1.-Pulsamos la Flecha dcha. para situarnos fuera del juego de campos seleccionado. Luego pulsamos Intro (Windows) o Retorno (Mac) para crear un espacio para el botón. 2.- En la categoría Formularios del panel Insertar, escogemos Botón. 3.- En el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, escribimos submit en el campo ID y pulsamos Tab. En la sección Estilo, escogemos No hay etiqueta de rótulo. Hacemos clic sobre Aceptar En el panel Propiedades, aceptamos la Acción por defecto (Enviar formulario) y el Valor por defecto (Enviar).Si deseamos poner un texto distinto a "Enviar" en el botón, como "Cursar", sólo tenemos que escribirlo en el campo Valor Archivo>Guardar.

49 49

50 APLICAR ESTILOS AL FORMULARIO El formulario en el que hemos trabajado es ya completamente funcional, pero no tiene ningún estilo. Un formulario con un buen diseño mejora su lectura y comprensión y por lo tanto es más sencillo de utilizar. Aplicar reglas CSS Aunque existe un amplio rango de diferentes tipos de elementos de formulario, todos comparten algunas características comunes, como la etiqueta < label>. A estos elementos de formulario se les pueden aplicar reglas CSS. Vamos a crear una nueva hoja de estilos que contenga el formato del formulario, y vamos a agregar las reglas para los elementos leyenda y 50 juego de campos.

51 APLICAR ESTILOS AL FORMULARIO Ventana>Estilos CSS. Vamos a crear una nueva hoja de estilos sólo para los estilos del formulario, que estará vinculada a esta página pero no tiene por qué estarlo al resto de páginas del sitio Web En la parte inferior del panel Estilos CSS, haga clic en el botón Adjuntar hoja de estilos. Cuando se muestre el cuadro de diálogo Vincular hoja de estilos externa, escribimos forms.css en el campo Arch/URL. En el campo Añadir como, escogemos Vincular, y en el menú desplegable Media, escogemos screen. Clic sobre Aceptar. Dreamweaver nos avisa de que el nombre de la hoja de estilos indicada no existe. Hacemos clic en Sí para realizar la vinculación de todos modos. 51

52 52

53 APLICAR ESTILOS AL FORMULARIO En el panel Estilos CSS, hacemos clic en el botón Nueva regla CSS. En el cuadro de diálogo Nueva regla CSS, dentro del menú desplegable Tipo de selector, escogemos Etiqueta (redefine un elemento HTML). En el campo Nombre del selector, escribimos fieldset, o utilizamos el menú desplegable para escoger fieldset. En el menú desplegable Definición de regla, tenemos que asegurarnos de escoger forms. css. Hacemos clic en Aceptar. 53

54 54

55 APLICAR ESTILOS AL FORMULARIO En el cuadro de diálogo Definición de regla para fiedset en forms.css, escogemos la categoría Cuadro. En el área Padding, 10 en el campo Top, y extendemos el valor a los cuatro campos. En el área Margin, dejamos sin marcar la casilla de verificación Igual para todo y escribimos 5 en el campo Bottom. Aceptamos el valor por defecto px en los menús desplegables de medida. Hacemos clic en Aceptar. Escogemos la categoría Borde. En los menús desplegables de Style, escogemos solid. Para Width, ponemos thin. En Color, escribimos #345FA3. Los valores se propagarán, debido a que en todas las áreas se encuentra seleccionada la casilla de verificación Igual para todo. Hacemos clic en Aceptar. Hacemos clíc en Aceptar>Guardar todo y visualizamos el archivo en vista 55 en vivo o en el navegador

56 56

57 57