formularios en html

Crear formularios

Puedes crear formularios a través del menú Insertar, opción Formulario. Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de la derecha. Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Validar formularios

La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se envíe el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse. Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3. En este panel hay que desplegar el botón  pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0. Después de esto, hay que volver a desplegar el botón , y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario. Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número), una Dirección de correo electrónico, etc.

Ejercicio

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento tureceta.htm, que aparece en el panel Archivos.
   
   Se abrirá el documento en Dreamweaver.
5. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
6. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón  para desplegar sus propiedades más avanzadas.
7. No es necesario insertar el formulario, ya está creado. Dentro de él hay dos tablas. Sitúa el cursor dentro de la última celda de la primera fila de la primera tabla. Observa que le hemos definido un estilo, como a cualquier otro elemento.
8. Abre el panel Insertar. Si no lo encuentras, puedes acceder a él desde el menú Ventanas.
9. Elige la opción Formularios. Conviene que tengas el panel siempre visible, ya que insertaremos varios elementos.
10. Pulsa sobre Campo de texto en el panel Insertar.
11. Se abrirá un cuadro de diálogo. En ID introduce el nombre que le daremos, en este caso nombre. En Etiqueta marca No hay etiqueta de rótulo, pues ya tenemos los textos insertados. Pulsa Aceptar. (Si no te ha aparecido este diálogo, introduce el nombre desde el inspector de propiedades).
12. Haz clic sobre el campo de texto para seleccionarlo.
13. En Campo de texto, del inspector de propiedades, veras el nombre. Si lo habías introducido antes, puedes hacerlo.
14. En Cars máx escribe 50 para limitar el número máximo de caracteres.
15. En Tipo estará seleccionado Una línea.
16. Sitúa el cursor dentro de la última celda de la segunda fila de la primera tabla.
17. Repite los pasos del 10 al 15, pero con las siguientes diferencias:
18. En Campo de texto escribe email.
19. En Cars máx escribe 40.
20. Sitúa el cursor dentro de la segunda celda de la primera fila de la segunda tabla.
21. Repite los pasos del 9 al 15, pero con las siguientes diferencias:
22. En Campo de texto escribe receta.
23. En Cars máx escribe 25.
24. Sitúa el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.
25. Elige la opción Seleccionar (Lista/menú) en el panel Insertar.
26. En el cuadro de diálogo, introduce tipo en el campo ID.
27. Haz clic sobre el objeto de lista/menú para seleccionarlo.
28. En Tipo selecciona Menú.
29. Haz clic sobre el botón Valores de lista.
30. Escribe Plato en Etiqueta de elemento.
31. Pulsa sobre el botón  para insertar nuevos elementos en la lista. Añade la etiqueta Postre.
32. Haz clic sobre el botón Aceptar.
33. Selecciona Plato en Seleccionado inicialmente.
34. Sitúa el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.
35. Pulsa en la opción Área de texto en el panel Insertar.
36. Se abrirá un cuadro de diálogo. Escribe como ID ingredientes y pulsa Aceptar.
37. Haz clic sobre el área de texto para seleccionarlo.
38. En Tipo selecciona Varías líneas.
39. En Ancho car escribe 30.
40. En Líneas núm escribe 5.
41. Sitúa el cursor en la celda que hay debajo de la que pone Preparación:.
42. Repite los pasos del 35 al 40, pero con las siguientes diferencias:
43. En ID escribe preparacion.
44. En Ancho car escribe 20.
45. En Líneas núm escribe 8.
46. Sitúa el cursor en la última celda de la segunda tabla.
47. Elige la opción Botón en el panel Insertar.
48. En el diálogo, deja los campos en blanco y pulsa Aceptar. No es necesario establecer el nombre porque los botones no contienen datos.
49. Sitúa el cursor a la derecha del botón.
50. Repite los pasos 47 y 48 para insertar otro botón.
51. Selecciona el nuevo botón.
52. En Acción selecciona Restablecer formulario.
53. En Valor, escribe Borrar.
54. Con la tecla Ctrl selecciona la celda que contiene los botones, y en desplegable Horiz. elige Centro.
55. Para que el formulario tenga sentido, hemos de enviar los datos a una página capaz de tratarlos. Selecciona todo el formulario, y en el campo Acción copia la siguiente dirección:
    http://www.aulaclic.es/dreamweaver-cs4/ejemplos/sitios/cocina/recibirreceta.php
56. En el campo Destino elige _blank para que se abra en una ventana nueva.
57. Haz clic sobre el botón Guardar  de la barra de herramientas.
58. Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu navegador o en la Vista en vivo y rellena los campos. Si pulsas en Enviar, se enviarán los datos a la página indicada en el campo acción.