PDF de programación - USO DE DREAMWEAVER CS5 - Creación de formularios

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación de formularios

671

Objetos de formulario
En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Los objetos de
formulario son mecanismos que permiten a los usuarios introducir datos. Puede añadir a un formulario los siguientes
objetos de formulario:
Campos de texto Aceptan cualquier valor alfanumérico. El texto se puede visualizar como una sola línea, como varias
líneas y como un campo de contraseña en el que el texto introducido se sustituye por asteriscos o viñetas para ocultar
el texto a otras personas que puedan estar mirándolo.

Nota: Las contraseñas y el resto de datos que se envían a un servidor mediante campos de contraseña no están cifrados.
Los datos transferidos pueden ser interceptados y leídos como texto alfanumérico. Por esta razón, debe facilitar siempre
el cifrado de los datos que desea que permanezcan seguros.
Campos ocultos Permiten almacenar información introducida por el usuario, como un nombre, una dirección de
correo electrónico o una preferencia de visualización, y utilizarla la próxima vez que el usuario visite el sitio.
Botones Realizan acciones cuando se hace clic en ellos. Puede añadir una etiqueta o un nombre personalizado a un
botón, o bien usar una de las etiquetas predefinidas, “Enviar” o “Restablecer”. Utilice un botón para enviar datos de
formulario al servidor o para restablecer el formulario. También se pueden asignar otras tareas de proceso definidas
en un script. Por ejemplo, el botón puede calcular el coste total de elementos seleccionados, basándose en los valores
asignados.
Casillas de verificación Admiten múltiples respuestas en un solo grupo de opciones. Un usuario puede seleccionar
tantas acciones como sean necesarias. El siguiente ejemplo muestra tres casillas de verificación seleccionadas: Surfing,
Mountain Biking y Rafting.

Botones de opción Representan opciones que se excluyen mutuamente. Cuando se selecciona un botón de un grupo
de botones de opción, se desactivan todos los demás botones del grupo (un grupo está formado por dos o más botones

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación de formularios

672

que comparten el mismo nombre). En el ejemplo anterior, Rafting es la opción seleccionada en este momento. Si el
usuario hace clic en Surfing, el botón Rafting se deselecciona automáticamente.

Lista/menú Muestra valores de opciones en una lista de desplazamiento que permite a los usuarios seleccionar varias
opciones. La opción Lista muestra los valores de las opciones en un menú que permite a los usuarios seleccionar una
sola opción. Utilice los menús si dispone de una cantidad de espacio limitada pero necesita mostrar muchos
elementos, o bien para controlar valores devueltos al servidor. A diferencia de los campos de texto, en los que el
usuario puede escribir todo lo que desea, incluso datos no válidos, usted establece los valores exactos que debe devolver
un menú.
Nota: Un menú emergente de un formulario HTML no es igual que un menú emergente gráfico. Para información sobre
cómo crear, editar, mostrar y ocultar un menú emergente gráfico, consulte el vínculo situado al final de esta sección.
Menús de salto Listas de navegación o menús emergentes que permiten insertar un menú en el que cada opción se
vincula a un documento o archivo.
Campos de archivo Permiten al usuario examinar los archivos de su ordenador y cargarlos como datos de un
formulario.
Campos de imagen Permiten insertar una imagen en un formulario. Utilice los campos de imagen para crear botones
gráficos, como Enviar o Restablecer. El uso de una imagen para llevar a cabo tareas distintas del envío de datos requiere
adjuntar un comportamiento al objeto de formulario.

Más temas de ayuda
“Aplicación del comportamiento Mostrar menú emergente” en la página 365

Creación de un formulario HTML
1 Abra una página y sitúe el punto de inserción donde desee que aparezca el formulario.
2 Seleccione Insertar > Formulario o seleccione la categoría Formularios en el panel Insertar y haga clic en el icono

Formulario.

En la vista Diseño, los formularios se indican con un contorno de línea de puntos rojos. Si no ve dicho contorno,
seleccione Ver > Ayudas visuales > Elementos invisibles.
3 Establezca las propiedades del formulario HTML en el inspector de propiedades (Ventana > Propiedades):
a En la ventana del documento, haga clic en el contorno del formulario para seleccionarlo.
b En el cuadro Nombre del formulario, escriba un nombre exclusivo para identificar el formulario.

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación de formularios

673

La asignación de nombre al formulario permite hacer referencia a él o controlarlo con un lenguaje de scripts como
JavaScript o VBScript. Si no asigna un nombre al formulario, Dreamweaver genera uno mediante la sintaxis formn e
incrementa el valor de n para cada uno de los formularios que se añadan a la página.
c En el cuadro Acción, especifique la página o el script que va a procesar los datos del formulario introduciendo la
ruta o haciendo clic en el icono de la carpeta para desplazarse hasta la página o el script correspondiente. Ejemplo:
processorder.php.

d En el menú emergente Método, seleccione el método mediante el cual se transmitirán los datos del formulario al

servidor. Defina cualquiera de las opciones siguientes:

Predeterminado Utiliza el valor predeterminado del navegador para enviar los datos del formulario al servidor.
Normalmente, el valor predeterminado es el método GET.
GET Añade el valor al URL que solicita la página.
POST Incrusta los datos del formulario en la petición HTTP.
No utilice el método GET para enviar formularios largos. Los URL tienen una limitación de 8.192 caracteres. Si el
tamaño de los datos enviados es demasiado grande, los datos se truncarán, lo que puede producir resultados de
procesamiento inesperados o erróneos.
Las páginas dinámicas generadas por parámetros proporcionados por el método GET pueden guardarse como
marcadores porque todos los valores necesarios para regenerar la página están incluidos en el URL que se muestra en
el cuadro Dirección del navegador. En cambio, las páginas dinámicas generadas por parámetros proporcionados por
el método POST no se pueden guardar como marcadores.
Si reúne contraseñas y nombres de usuario confidenciales, números de tarjetas de crédito u otros datos confidenciales,
el método POST puede parecer más seguro que el método GET. Sin embargo, la información enviada por el método
POST no se cifra y un “hacker” puede recuperarla fácilmente. Para garantizar la seguridad, utilice una conexión segura
con un servidor seguro.
e (Opcional) En el menú emergente Enctype, especifique el tipo de codificación MIME de los datos remitidos al

servidor para su procesamiento.

El valor predeterminado de application/x-www-form-urlencode se utiliza normalmente junto con el método
POST. Si crea un campo de carga de archivos, especifique el tipo MIME multipart/form-data.
f

(Opcional) En el menú emergente Destino, especifique la ventana en la que va a visualizar los datos devueltos por
el programa ejecutado.

Si la ventana indicada no se ha abierto aún, aparece una nueva ventana con ese nombre. Defina uno de los valores de
destino siguientes:
_blank Abre el documento de destino en una nueva ventana sin nombre.
_parent Abre el documento de destino en la ventana padre de la que muestra el documento actual.
_self Abre el documento de destino en la misma ventana en la que se envió el formulario.
_top Abre el documento de destino en el cuerpo de la ventana actual. Este valor se puede utilizar para garantizar que
el documento de destino cubre la ventana completa incluso en el caso de que el documento original apareciera en un
marco.
4 Inserte los objetos de formulario en la página:
a Sitúe el punto de inserción en el lugar del formulario en el que desee que aparezca el objeto de formulario.
b Seleccione el objeto en el menú Insertar > Formulario o en la categoría Formularios del panel Insertar.

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación de formularios

674

c Complete el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada. Para más información, haga clic

en el botón Ayuda del cuadro de diálogo.

Nota: Si no ve el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada, es posible que el punto de
inserción estuviera en la Vista de código cuando intentó insertar el objeto de formulario. Asegúrese de que el punto de
inserción está en la vista Diseño e inténtelo de nuevo. Si desea obtener más información sobre este tema, consulte el
artículo de David Powers Creating HTML forms in Dreamweaver (creación de formularios HTML en Dreamweaver).
d Defina las propiedades de los objetos.
e Introduzca un nombre para el objeto en el inspector de propiedades.
Cada objeto de campo de texto, campo oculto, casilla de verificación o lista/menú debe tener un nombre exclusivo que
identifique al objeto en el formulario. Los nombres de objeto de formulario no pueden contener espacios ni caracteres
especiales. Puede utilizar cualquier combinación de caracteres alfanuméricos y un guión bajo (_). La etiqueta que
asigne al objeto es el nombre de variable que almacenará el valor (los datos introducidos) del campo. Este es el valor
que se envía al servidor para su procesamiento.
Nota: Todos los botones de opción de un grupo deben tener el mismo nombre.
f Para etiquetar el objeto de campo de texto, casilla de verificación o botón de opción en la página, haga clic junto al

objeto y escriba el texto de la etiqueta.

5 Ajuste el diseño del formulario.
Utilice saltos de línea, saltos de párrafo, texto con formato predeterminado o tablas para aplicar formato a los
formularios. No puede insertar un formulario en otro formulario (es decir, superpone