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 ves este contorno, selecciona 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, se abre 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 ocupa 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 guion 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.

Usa saltos de línea, saltos de párrafo, texto con formato previo o tablas para dar formato a tus formularios.No puedes insertar un formulario dentro de otro formulario (es decir, no puedes superponer etiquetas), pero puedes incluir más de un formulario en una página.

Al diseñar formularios, recuerda etiquetar los campos del formulario con texto descriptivo para que los usuarios sepan a qué están respondiendo; por ejemplo, "Escribe tu nombre" para solicitar información del nombre.

Usa tablas para proporcionar estructura a los objetos de formulario y las etiquetas de campo.Al usar tablas en formularios, asegúrate de que todas las etiquetas table estén incluidas entre las etiquetas form.

Especifica el nombre del objeto de campo de archivo.

Especifica el número máximo de caracteres que se pueden mostrar en el campo.

Especifica el número máximo de caracteres que contendrá el campo. Si el usuario examina para localizar el archivo, el nombre y la ruta del archivo pueden superar el Valor máximo de caracteres especificado. Sin embargo, si el usuario intenta escribir el nombre y la ruta del archivo, el campo de archivo solo permitirá el número de caracteres especificado por el Valor máximo de caracteres.

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

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

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

Te permite introducir texto descriptivo en caso de que la imagen no se cargue en el explorador.

Establece el atributo de alineación del objeto.

Inicia tu editor de imágenes predeterminado y abre el archivo de imagen para editarlo.

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. Selecciona el formato en el que quieres que Dreamweaver distribuya 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 de 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 OK.

  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 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 tus necesidades, haz clic en el botón 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 de verificación 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.

El cuadro Valor de botón de opción muestra los valores de todos los botones de opción del grupo.

El conjunto de registros que selecciones contiene valores que coinciden con los valores marcados de los botones de opción. Para ver los valores marcados de los botones de opción, selecciona cada botón de opción y abre su inspector de Propiedad (Ventana > Propiedades).

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

  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úrate de que cada campo de texto que quieras validar tenga un nombre único.

Por ejemplo, puedes especificar que un campo de texto para la edad de una persona acepte solo números.

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

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

function processMyForm(){

alert('¡Gracias por tu pedido!');

}

Este es un paso que se realiza solo 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 preferida para la accesibilidad; sin embargo, la funcionalidad puede variar según el explorador.

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

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

Especifica el orden de tabulación para los objetos del formulario. Si estableces el orden de tabulación para un objeto, debes establecer el orden de tabulación para todos los objetos.

Establecer un orden de tabulación es útil cuando tienes otros enlaces y objetos de formulario en la página y necesitas que el usuario los recorra con el tabulador en un orden específico.

El objeto de formulario aparece en el documento.

• Editar los atributos apropiados en la vista de código.

• Haz clic con el botón derecho (Windows) o Control‑clic (Macintosh), y luego selecciona Editar etiqueta.