Vamos a ver qué
es un formulario, para qué
se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden
validarse los datos introducidos en él.
9.1. Introducción
.gif)
Los formularios se utilizan para recoger datos de los usuarios, nos
pueden servir para realizar un pedido en una tienda virtual, crear una
encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar el
formulario se arrancará un programa que recibirá los datos y hará el
tratamiento correspondiente.
Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en
el formulario y validarlos), pero no la parte de tratamiento de los datos, ya
que para ello se necesitan nociones de programación, ya sea en PHP, en
JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos
del curso.
A la derecha tienes un ejemplo de formulario simple.
Un formulario está formado, entre otras cosas, por etiquetas, campos de
texto, menús desplegables, y botones.
9.2. Elementos de formulario
Los elementos de formulario pueden insertarse en
una página a través del menú Insertar,
opción Formulario, o lo que
es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la secciónFormularios.
A través de esta opción se puede acceder a la lista
de todos los objetos de formulario que pueden ser insertados en la página.
Vamos a ver uno por uno algunos de los distintos
elementos que pueden formar parte de un formulario, así como algunas de sus
propiedades.
Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al
usuario escribir una línea, mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área
de texto a través del inspector de propiedades, marcando la
opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de
texto pero las letras que va tecleando el usuario se sustituyen por un carácter
como podrás ver en la imagen siguiente.
A continuación tienes un ejemplo de cada uno de
estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
|
|
|
|
A través del inspector de propiedades es posible
asignar también el Ancho del
cuadro de texto, el número máximo
de líneas o caracteres, y el valor inicial del cuadro.
Botón
Es el botón tradicional de Windows. El botón puede
tener asignadas tres opciones: Enviar
formulario, Restablecer
formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un
comportamiento diferente de los dos anteriores).
También es posible cambiar el texto del botón, a
través de la propiedad Valor del
inspector de propiedades.
Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para
enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer
reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.
Casilla de verificación
Es un cuadrito que se puede activar o desactivar, para indicar si el
usuario ha elegido una opción o no.
Deseo recibir información
Puede asignársele el Estado inicial como Activado o como Desactivado.
Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay
varios del mismo formulario con el mismo nombre, sólo puede haber uno activado.
Cuando se activa uno, automáticamente se desactivan los demás. Esto obliga al
usuario a sólo poder elegir una opción.
Superman
Spiderman
Spiderman
Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una
lista de opciones.
Los elementos se añaden a través del botón Valores de
lista... del Inspector de
propiedades.
Cuando se trata de un menú, solo es posible elegir uno de los elementos,
pero si se trata de una lista, a través de Selecciones del
inspector de propiedades puede permitirse que se seleccionen varios
simultáneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario,
para que el usuario pueda saber qué datos ha de introducir en cada uno de
ellos. Además, al estar asociadas al control nos permite activarlo al pulsar
sobre el texto. Esto es muy práctico en casillas de verificación y botones de
opción.
Sin etiqueta. Hay que pulsar sobre la
casilla.
Con etiqueta. Podemos pulsar en el texto.
Con etiqueta. Podemos pulsar en el texto.
Una propiedad muy importante de los formularios es su nombre. Ya que al
recibir los datos, a través del nombre sabremos qué control los envía.
9.3. Crear formularios
Antes de insertar los
elementos o controles del formulario, hemos de crear un formulario. Los
elementos los introduciremos dentro de él, ya que cuando lo demos a enviar,
sólo se enviarán los datos de los elementos de dentro del formulario.
Puedes crear formularios a
través del menú Insertar → Formulario,
opción Formulario,
o desde el panel Insertar.
Una vez creado un
formulario, este aparecerá en la ventana de Dreamweaver como un recuadro
formado por líneas naranjas discontinuas, similar al de la imagen siguiente.
Estas líneas son ayudas
visuales al trabajar en diseño, pero no se verán en el formulario final.
Entre las propiedades del
formulario, encontramos el campo Acción. En el indicamos a dónde se envían los
datos. Normalmente, una página PHP que se encara de tratarlos.
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 o
desde el panel Insertar.
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.
9.4. Validar
formularios
La validación de formularios
sirve para hacer que JavaScript valide el formulario antes de que se envíe,
avisando al usuario para que corrija los errores, como campos obligatorios sin
rellenar. Esto es mucho más eficaz que enviar la página y validarla sólo en el
servidor.
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 + F4. Comportamientos forma
parte del panelInspector de etiquetas.
En este panel hay que
desplegar el botón 
y
pulsar sobre la opción Validar formulario, deberás haber seleccionado el
formulario previamente.
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)
y si ha de estar en un rango, una Dirección de correo electrónico, etc.
No hay comentarios:
Publicar un comentario