Creación de formularios web

En la vista de 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.

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.

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 con la sintaxis formn, y va incrementando el valor de n para cada formulario que se añada 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.

La configuración predeterminada 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 se visualizarán 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.

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.

c. Complete el cuadro de diálogo Entrada de atributos de accesibilidad de la etiqueta. Para más información, haga clic en el botón Ayuda del cuadro de diálogo.

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.

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.

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, superponer etiquetas), pero puede incluir varios formularios en una misma página.

Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los campos para que los usuarios puedan saber a qué están contestando. Por ejemplo, utilice la etiqueta “Escriba su nombre” para solicitar el nombre del usuario.

Utilice tablas para estructurar los objetos del formulario y las etiquetas de los campos. Cuando utilice tablas en los formularios, asegúrese de que todas las etiquetas table estén situadas entre las etiquetas form.

Especifica el nombre del objeto de campo de archivo.

Establece el número máximo de caracteres que se puede mostrar en el campo.

Especifica el número máximo de caracteres que debe contener el campo. Si el usuario utiliza Examinar para localizar el archivo, el nombre del archivo y la ruta pueden superar el valor de Car. máx. Sin embargo, si el usuario intenta escribir el nombre del archivo y la ruta, el campo de archivo sólo admitirá el número de caracteres especificado en el valor Car. máx.

Aparecerá el cuadro de diálogo Seleccionar origen de imagen.

Asigna un nombre al botón. Dos nombres reservados, Enviar y Restablecer, indican respectivamente al formulario que envíe los datos del formulario a la aplicación o el script, o que restablezca los valores originales de los campos del formulario.

Especifica la imagen que desea utilizar para el botón.

Permite escribir un texto descriptivo en caso de que la imagen no se pueda cargar en el navegador.

Establece el atributo de alineación del objeto.

Inicia el editor de imágenes predeterminado y abre el archivo de imágenes para realizar la edición.

Permite aplicar reglas CSS al objeto.

Seleccione Insertar > Formulario > Grupo de opciones.

Rellene el cuadro de diálogo y haga clic en Aceptar.

a. En el cuadro Nombre, introduzca un nombre para el grupo de botones de opción.

 Si establece los botones de opción para que transmitan los parámetros de vuelta al servidor, los parámetros se asociarán al nombre. Por ejemplo, si se asigna al grupo el nombre migrupo y se establece el método GET (es decir, cuando el usuario haga clic en el botón Enviar, el formulario proporcionará los parámetros de URL en lugar de los parámetros de formulario), entonces se proporcionará la expresión migrupo=”CheckedValue” del URL al servidor.

b. Haga clic en el botón más (+) para añadir un botón de opción al grupo. Introduzca una etiqueta y un valor activado para el nuevo botón.

c. Haga clic en las flechas hacia arriba o hacia abajo para cambiar el orden de los botones.

d. Para hacer que un botón de opción se seleccione cuando la página se abra en un navegador, introduzca un valor igual al valor del botón de opción en el cuadro Seleccionar con valor igual a.

Introduzca un valor estático o especifique uno dinámico haciendo clic en el icono de rayo situado junto al cuadro y seleccionando un juego de registros que contenga los valores activados posibles. En cualquier caso, el valor especificado debe coincidir con el valor activado de uno de los botones de opción del grupo. Para ver los valores activados de los botones de opción, seleccione cada uno de ellos y abra su inspector de propiedades (Ventana > Propiedades).

e. Seleccione el formato en el que desee que Dreamweaver disponga los botones. Puede utilizar saltos de línea o una tabla para disponer los botones. Si selecciona la opción de tabla, Dreamweaver crea una tabla de una sola columna y sitúa los botones de opción a la izquierda y las etiquetas a la derecha.

También puede establecer las propiedades en el inspector de propiedades o bien directamente en la vista de Código.

Seleccione Insertar > Formulario > Grupo de casillas de verificación.

Rellene el cuadro de diálogo y haga clic en Aceptar.

a. En el cuadro Nombre, introduzca un nombre para el grupo de casillas de verificación.

Si establece las casillas de verificación para que transmitan los parámetros de vuelta al servidor, los parámetros se asociarán al nombre. Por ejemplo, si se asigna al grupo el nombre migrupo y se establece el método GET (es decir, cuando el usuario haga clic en el botón Enviar, el formulario proporcionará los parámetros de URL en lugar de los parámetros de formulario), entonces se proporcionará la expresión migrupo=”CheckedValue” del URL al servidor.

b. Haga clic en el botón más (+) para añadir una casilla de verificación al grupo. Introduzca una etiqueta y un valor activado la nueva casilla de verificación.

c. Haga clic en las flechas hacia arriba o hacia abajo para cambiar el orden de las casillas de verificación.

d. Para que se seleccione una casilla de verificación concreta cuando la página se abra en un navegador, introduzca un valor igual al valor de la casilla de verificación en el cuadro Seleccionar con valor igual a.

Introduzca un valor estático o especifique uno dinámico haciendo clic en el icono de rayo situado junto al cuadro y seleccionando un juego de registros que contenga los valores activados posibles. En cualquier caso, el valor especificado debe coincidir con el valor activado de una de las casillas de verificación del grupo. Para ver los valores activados de las casillas de verificación, seleccione cada una de ellas y abra su inspector de propiedades (Ventana > Propiedades).

e. Seleccione el formato en el que desee que Dreamweaver disponga las casillas de verificación.

Puede utilizar saltos de línea o una tabla para disponer las casillas de verificación. Si selecciona la opción de tabla, Dreamweaver crea una tabla de una sola columna y sitúa las casillas de verificación a la izquierda y las etiquetas a la derecha.

También puede establecer las propiedades en el inspector de propiedades o bien directamente en la vista de Código.

Inserte un objeto de formulario HTML Lista/menú en su página:

    a. Haga clic dentro del formulario HTML en la página (Insertar > Formulario > Formulario).

    b. Seleccione Insertar > Formulario > Lista/menú para insertar el objeto de formulario.

Siga uno de estos procedimientos:

• Seleccione el nuevo objeto de formulario HTML Lista/menú, o uno nuevo y, a continuación, haga clic en el botón Dinámico del inspector de propiedades.

• Seleccione Insertar > Objetos de datos > Datos dinámicos > Lista de selección dinámica.

Rellene el cuadro de diálogo Lista/menú dinámico y haga clic en Aceptar.

a. En el menú emergente Opciones del juego de registros, seleccione el juego de registros que desea utilizar como fuente de contenido. También puede utilizar este menú para editar posteriormente los elementos de listas/menús dinámicos y estáticos.

b. En el área Opciones estáticas, introduzca una opción predeterminada en la lista o menú. Utilice también esta opción para editar entradas estáticas en un objeto de formulario de lista/menú tras añadir contenido dinámico.

c. (Opcional) Utilice los botones más (+) y menos (-) para añadir y quitar elementos de la lista. Los elementos se encuentran en el mismo orden que en el cuadro de diálogo Valores de lista. El primer elemento de la lista es el elemento que aparece seleccionado cuando la página se carga en un navegador. Use los botones de flecha arriba y abajo para reorganizar los elementos de la lista.

d. En el menú emergente Valores, seleccione el campo que contiene los valores para los elementos del menú.

e. En el menú emergente Etiquetas, seleccione el campo que contiene las etiquetas para los elementos del menú.

f. (Opcional) Para que se seleccione un elemento concreto del menú al abrir la página en un navegador o al mostrarse un registro en el formulario, introduzca un valor igual al del elemento de menú en el cuadro Seleccionar con valor igual a.

    Puede introducir un valor estático o especificar uno dinámico haciendo clic en el icono de rayo situado junto al cuadro y seleccionando el valor dinámico de la lista de fuentes de datos. En cualquiera de estos casos, el valor que especifique deberá coincidir con alguno de los valores de los elementos de menú.

La fuente de datos debe contener información textual. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no satisfacen sus necesidades, haga clic en el botón de signo más (+) para definir una nueva fuente de datos.

• Haga clic en el icono de rayo situado junto al cuadro Activar si y seleccione el campo de la lista de fuentes de datos.

  La fuente de datos debe contener un dato booleano, como, por ejemplo Yes y No o true y false. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no satisfacen sus necesidades, haga clic en el botón de signo más (+) para definir una nueva fuente de datos.

• En el cuadro Igual a, introduzca el valor que debe tener el campo para que la casilla aparezca activada.

  Por ejemplo, para que la casilla aparezca activada cuando un campo concreto de un registro tenga el valor Yes, introduzca Yes en el cuadro Igual a.

Aparecerá el cuadro Valores de botón de opción con los valores de todos los botones de opción del grupo.

El juego de registros seleccionado contiene valores que coinciden con los valores activados de los botones de opción. Para ver los valores activados de los botones de opción, seleccione cada uno de ellos y abra el inspector de propiedades (Ventana > Propiedades).

Seleccione las opciones que desea en el cuadro de diálogo Datos dinámicos y haga clic en Aceptar.

a. Seleccione una fuente de datos de la lista de fuentes de datos.

b. (Opcional) Seleccione un formato de datos para el texto.

c. (Opcional) Modifique el código que Dreamweaver inserta en la página para mostrar el texto dinámico.

Asegúrese de que cada uno de los campos de texto que desee validar tenga un nombre exclusivo.

Por ejemplo, puede indicar que un campo de texto para la edad de una persona sólo acepte números.

Por ejemplo, puede introducir el nombre de una función que aún no existe, como processMyForm().

Por ejemplo, puede definir la función JavaScript siguiente en la sección head del documento para visualizar un mensaje cuando el usuario haga clic en el botón Enviar:

Este es un paso que se realiza sólo una vez.

Se abre el cuadro de diálogo Atributos de accesibilidad de la etiqueta de entrada.

Asigna un ID al campo de formulario. Este valor puede utilizarse para hacer referencia al campo desde JavaScript; también se utiliza como valor del atributo for si elige la opción Adjuntar etiqueta de título utilizando el atributo for bajo las opciones de Estilo.

Coloca una etiqueta de rótulo alrededor del elemento de formulario como se muestra a continuación:

Utiliza el atributo for para rodear el elemento de formulario con una etiqueta de rótulo, como se muestra a continuación:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Esta opción hace que el navegador muestre el texto asociado con una casilla de verificación y un botón de opción con un rectángulo de selección, y permite al usuario seleccionar la casilla de verificación y el botón de opción haciendo clic en cualquier lugar del texto asociado en lugar de solo en el control de la casilla de verificación o del botón de opción.

Nota: Esta es la opción de accesibilidad preferida; no obstante, la funcionalidad puede variar dependiendo del navegador.

No utiliza una etiqueta de rótulo, como se muestra a continuación:

Utiliza un equivalente de teclado (una letra) y la tecla Alt (Windows) o la tecla Control (Macintosh) para seleccionar el objeto de formulario en el navegador. Por ejemplo, si introduce B como clave de acceso, los usuarios con navegador Macintosh podrían presionar Control + B para seleccionar el objeto de formulario.

Especifica el orden de tabulación para los objetos del formulario. Si establece el orden de tabulación de un objeto, deberá definir el orden de tabulación de todos los objetos.

Configurar el orden de tabulación resulta útil cuando existen otros vínculos y objetos de formulario en la página y es preciso que el usuario se desplace a través de ellos en un orden específico.

El objeto de formulario aparece en el documento.

• Edite los atributos apropiados en la vista de Código.

• Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y, a continuación, seleccione Editar etiqueta.