Nota:

La compatibilidad con elementos de formulario HTML se ha mejorado en las actualizaciones de Dreamweaver Creative Cloud. Para obtener información, consulte Soporte HTML5 mejorado para elementos de formularios.

Acerca de los formularios web

Cuando un visitante introduce información en un formulario Web visualizado en un navegador Web y hace clic en el botón de envío, la información se transfiere al servidor, donde será procesada por una aplicación o un script del lado del servidor. El servidor responde devolviendo la información procesada al usuario (o cliente) o bien realizando alguna otra acción basada en el contenido del formulario.

Puede crear formularios que envíen datos a la mayoría de servidores de aplicaciones, entre ellos PHP, ASP y ColdFusion. Si utiliza ColdFusion, también podrá añadir a los formularios controles de formulario específicos de ColdFusion.

Nota:

También puede enviar datos de formulario directamente a un destinatario de correo electrónico.

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.

Objetos de formulario

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.

Casillas de verificación

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 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.

Botones de opción

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.

Creación de un formulario HTML

(Solo usuarios de Creative Cloud): Como parte de la compatibilidad con HTML5, se han añadido nuevos atributos al panel de propiedades de los elementos de formulario. Además, cuatro nuevos elementos de formulario (correo electrónico, buscar, teléfono y URL) se han añadido a la sección Formularios del panel Insertar. Para obtener más información, consulte Soporte HTML5 mejorado para elementos de formularios.

  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 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.

  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.

    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.

  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.

    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.

    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 de Diseño e inténtelo de nuevo. Para obtener más información sobre este tema, consulte el artículo de David Powers titulado 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, 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.

Para ver un tutorial sobre la creación de formularios, consulte www.adobe.com/go/vid0160_es.

Para ver un tutorial sobre la aplicación de estilos a formularios con CSS, consulte www.adobe.com/go/vid0161_es.

Propiedades de un objeto de campo de texto

Seleccione el objeto de campo de texto y establezca las siguientes opciones en el inspector de propiedades:

Ancho car

Establece el número máximo de caracteres que se puede mostrar en el campo. Este número puede ser menor que Car. máx., que especifica el número máximo de caracteres que se puede introducir en el campo. Por ejemplo, si el valor de Ancho car es 20 (valor predeterminado) y un usuario introduce 100 caracteres, solamente 20 de esos caracteres aparecerán visibles en el campo de texto. Aunque no pueda ver los caracteres del campo, éstos son reconocidos por el objeto del campo y se envían al servidor para su procesamiento.

Car. máx.

Establece el número máximo de caracteres que se puede introducir en los campos de texto de una línea. Utilice Car. máx. para limitar los códigos postales a 5 dígitos, las contraseñas a 10 caracteres, etc. Si deja el cuadro Car. máx. en blanco, los usuarios no tendrán restricciones a la hora de introducir texto. El texto se desplaza si supera el ancho de caracteres del campo. Si el usuario supera el número máximo de caracteres, el formulario genera un sonido de alerta.

Líneas núm

(Disponible cuando se selecciona la opción Varias líneas) Establece la altura de los campos de texto de varias líneas.

Desactivado

Desactiva el área de texto.

Solo lectura

Convierte el área de texto en un área de texto de solo lectura.

Tipo

Especifica si el campo es de una línea, de varias líneas o de contraseña.

Una línea

Da como resultado una etiqueta input con su atributo type definido como text. El valor de Ancho car corresponde al atributo size y el valor de Car. máx. corresponde al atributo maxlength.

Multilínea

Da como resultado una etiqueta textarea. El valor de Ancho car corresponde al atributo cols y el valor de Líneas núm corresponde al atributo rows.

Contraseña

Da como resultado una etiqueta input con su atributo type definido como password. Los valores de Ancho car y Car. máx. corresponden a los mismos atributos que los campos de texto de una línea. Cuando un usuario escribe en un campo de texto de contraseña, lo que introduce aparece en forma de viñetas o asteriscos para impedir que lo vean otros usuarios.

Val. inicial

Asigna el valor mostrado en el campo cuando el formulario se carga inicialmente. Por ejemplo, puede indicar que el usuario debe introducir información en el campo mediante una nota o un valor de ejemplo.

Clase

Permite aplicar reglas CSS al objeto.

Opciones de un objeto de botón

Nombre del botón

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.

Valor

Determina el texto que aparece en el botón.

Acción

Determina qué ocurre cuando se hace clic en el botón.

Enviar formulario

Envía los datos del formulario para procesarlos cuando el usuario hace clic en el botón. Los datos se envían a la página o al script especificado en la propiedad Acción del formulario.

Restablecer formulario

Borra el contenido del formulario cuando se hace clic en el botón.

Ninguno

Especifica la acción que debe realizarse cuando se hace clic en el botón. Por ejemplo, puede añadir un comportamiento JavaScript que abra otra página cuando el usuario haga clic en el botón.

Clase

Aplica reglas CSS al objeto.

Opciones de un objeto de casilla de verificación

Valor activado

Establece el valor que debe enviarse al servidor cuando se activa la casilla de verificación. Por ejemplo, en una encuesta, podría establecer el valor 4 para la opción “Totalmente de acuerdo” y 1 para la respuesta “Totalmente en desacuerdo”.

Estado inicial

Determina si la casilla de verificación está seleccionada o no cuando el formulario se carga en el navegador.

Dinámico

Permite al servidor determinar de forma dinámica el estado inicial de la casilla de verificación. Por ejemplo, puede utilizar casillas de verificación para presentar de manera visual la información Sí/No almacenada en un registro de base de datos. Durante el diseño, usted desconoce esa información. Durante la ejecución, el servidor lee el registro de base de datos y activa la casilla de verificación si el valor es Sí.

Clase

Aplica reglas de Hojas de estilo en cascada (CSS) al objeto.

Opciones de un objeto de botón de opción sencillo

Valor activado

Establece el valor que debe enviarse al servidor cuando se selecciona el botón de opción. Por ejemplo, puede escribir esquiar en el cuadro de texto Valor activado para indicar que el usuario ha elegido esquiar.

Estado inicial

Determina si el botón de opción está seleccionado o no cuando el formulario se carga en el navegador.

Dinámico

Permite al servidor determinar de forma dinámica el estado inicial del botón de opción. Por ejemplo, puede utilizar botones de opción para presentar de manera visual la información almacenada en un registro de base de datos. Durante el diseño, usted desconoce esa información. En el tiempo de ejecución, el servidor lee el registro de base de datos y selecciona el botón de opción si el valor coincide con uno que haya especificado.

Clase

Aplica reglas CSS al objeto.

Lista/menú

Asigna un nombre al menú. El nombre debe ser exclusivo.

Tipo

Indica si al hacer clic en el menú éste se despliega (opción Menú) o si muestra una lista de elementos por la que se puede desplazar (opción Lista). Seleccione la opción Menú si desea que sólo haya una opción visible cuando el formulario se visualice en un navegador. Para mostrar las otras opciones, el usuario debe hacer clic en la flecha abajo.

Seleccione la opción Lista para mostrar una lista de varias o todas las opciones cuando se muestre el formulario en un navegador o para permitir a los usuarios seleccionar varios elementos.

Altura

(Solo en el tipo Lista) Establece el número de elementos que se muestran en el menú.

Selecciones

(Solo en el tipo Lista) Indica si el usuario puede seleccionar varios elementos de la lista.

Valores de lista

Abre un cuadro de diálogo que permite añadir elementos a un menú de formulario:

  1. Utilice los botones más (+) y menos (-) para añadir y quitar elementos de la lista.

  2. Escriba texto para la etiqueta y un valor opcional para cada elemento de menú.

    Cada elemento de la lista tiene una etiqueta (el texto que aparece en la lista) y un valor (el valor que se envía a la aplicación de proceso si el elemento está seleccionado). Si no se especifica ningún valor, la etiqueta se enviará a la aplicación procesadora.

  3. Use los botones de flecha arriba y abajo para reorganizar los elementos de la lista.

    Los elementos aparecen en el menú 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.

Dinámico

Permite al servidor seleccionar de manera dinámica un elemento del menú en cuanto este se visualiza.

Clase

Permite aplicar reglas CSS al objeto.

Seleccionado inicialmente

Establece los elementos seleccionados en la lista de forma predeterminada. Haga clic en el elemento o los elementos de la lista.

Inserción de campos de carga de archivos

Puede crear un campo de carga de archivos para que el usuario pueda seleccionar un archivo de su sistema, como un documento de tratamiento de textos o un archivo gráfico, y cargarlo en el servidor. Un campo de archivo tiene la apariencia de un campo de texto, pero contiene además un botón Examinar. El usuario puede introducir manualmente la ruta del archivo que desea cargar o utilizar el botón Examinar para localizar el archivo y seleccionarlo.

Para poder utilizar los campos de carga de archivos, deberá disponer de un script del lado del servidor o una página capaz de administrar envíos de archivos. Consulte la documentación de la tecnología de servidor que utilice para procesar datos de formularios. Por ejemplo, si utiliza PHP, consulte “Manejo de subidas de archivos” en el Manual de PHP en línea, en http://us2.php.net/features.file-upload.php.

En los campos de archivo, es necesario utilizar el método POST para transmitir los archivos desde el navegador al servidor. El archivo se envía a la dirección especificada en el cuadro Acción del formulario.

Nota:

Póngase en contacto con el administrador del servidor para confirmar si se permite la carga de archivos anónimos, antes de usar el campo de archivo.

  1. Inserte un formulario en la página (Insertar > Formulario).
  2. Seleccione el formulario para visualizar su inspector de propiedades.
  3. Defina el método del formulario como POST.
  4. En el menú emergente Enctype, seleccione multipart/form-data.
  5. En el cuadro Acción, especifique el script del lado del servidor o la página capaz de administrar el archivo cargado.
  6. Sitúe el punto de inserción en el interior del contorno del formulario y seleccione Insertar > Formulario > Campo de archivo.
  7. Configure cualquiera de las opciones siguientes en el inspector de propiedades:

    Campo de archivo

    Especifica el nombre del objeto de campo de archivo.

    Ancho car

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

    Car. máx.

    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.

Inserción de un botón de imagen

Puede utilizar imágenes como iconos de botones. El uso de una imagen para llevar a cabo tareas distintas del envío de datos requiere adjuntar un comportamiento al objeto de formulario.

  1. En el documento, sitúe el punto de inserción en el interior del contorno del formulario.
  2. Seleccione Insertar > Formulario > Campo de imagen.

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

  3. Seleccione la imagen para el botón en el cuadro de diálogo Seleccionar origen de imagen y haga clic en Aceptar.
  4. Configure cualquiera de las opciones siguientes en el inspector de propiedades:

    Campo 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.

    Origen

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

    Alt

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

    Alinear

    Establece el atributo de alineación del objeto.

    Editar imagen

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

    Clase

    Permite aplicar reglas CSS al objeto.

  5. Para añadir un comportamiento JavaScript al botón, seleccione la imagen y, a continuación, seleccione el comportamiento del panel Comportamientos (Ventana > Comportamientos).

Opciones de un objeto de campo oculto

Campo oculto

Especifica el nombre del campo.

Valor

Asigna un valor al campo. Este valor se transfiere al servidor cuando se envía el formulario.

Inserción de un grupo de botones de opción

  1. Sitúe el punto de inserción en el interior del contorno del formulario.
  2. Seleccione Insertar > Formulario > Grupo de opciones.

  3. 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.

Inserción de un grupo de casillas de verificación

  1. Sitúe el punto de inserción en el interior del contorno del formulario.
  2. Seleccione Insertar > Formulario > Grupo de casillas de verificación.

  3. 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.

Acerca de los objetos de formularios dinámicos

Un objeto de formulario dinámico es aquel cuyo estado inicial determina el servidor cuando se solicita la página, no aquel cuyo estado especifica el diseñador durante el diseño. Por ejemplo, cuando un usuario solicita una página PHP que contiene un formulario con una lista o un menú, un script PHP en la página puede rellenar de forma automática el menú con los valores almacenados en una base de datos. A continuación, el servidor envía la página completada al navegador del usuario.

Convertir en dinámicos los objetos de formulario puede simplificar el mantenimiento del sitio. Por ejemplo, muchos sitios utilizan menús para presentar a los usuarios un conjunto de opciones. Si el menú es dinámico, se pueden añadir, eliminar o modificar elementos de menú en un solo lugar (la tabla de base de datos en la que se almacenan los elementos) para actualizar todas las instancias del mismo menú en el sitio Web.

Inserción o cambio de un menú de formulario HTML dinámico

Puede llenar un menú HTML de formulario o de lista de forma dinámica con las entradas de una base de datos. Para la mayoría de las páginas, puede utilizar un objeto de menú HTML.

Antes de empezar, debe insertar un formulario HTML en una página ColdFusion, PHP o ASP y debe definir un juego de registros u otra fuente de contenido dinámico para el menú.

  1. 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.

  2. 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.

  3. 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ú.

     

Conversión de menús de formulario HTML existentes en dinámicos

  1. En la vista de Diseño, seleccione el objeto de formulario de lista/menú.
  2. En el inspector de propiedades, haga clic en el botón Dinámico.
  3. Rellene el cuadro de diálogo y haga clic en Aceptar.

Visualización de contenido dinámico en campos de texto HTML

Puede mostrar contenido dinámico en campos de texto HTML al ver el formulario en un navegador.

Antes de empezar, debe crear el formulario en una página ColdFusion, PHP o ASP y debe definir un juego de registros u otra fuente de contenido dinámico para el campo de texto.

  1. Seleccione el campo de texto en el formulario HTML de su página.
  2. En el inspector de propiedades, haga clic en el icono de rayo situado junto al cuadro Val inicial para mostrar el cuadro de diálogo Datos dinámicos.
  3. Seleccione la columna de juego de registros que proporcionará un valor al campo de texto y haga clic en Aceptar.

Configuración de las opciones del cuadro de diálogo Campo de texto dinámico

  1. Seleccione el campo de texto que va a convertir en dinámico en el menú emergente Campo de texto.
  2. Haga clic en el icono de rayo situado junto al cuadro Definir valor como, seleccione una fuente de datos de la lista y haga clic en Aceptar.

    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.

Preselección dinámica de una casilla de verificación HTML

Puede permitir al servidor decidir si debe seleccionarse una casilla de verificación cuando el formulario se muestre en un navegador.

Antes de empezar, debe crear el formulario en una página ColdFusion, PHP o ASP y debe definir un juego de registros u otra fuente de contenido dinámico para las casillas de verificación. Lo ideal es que la fuente del contenido tenga formato booleano, como Yes/No o true/false.

  1. Seleccione un objeto de formulario de casilla de verificación en la página.
  2. En el inspector de propiedades, haga clic en el botón Dinámico.
  3. Seleccione las opciones que desee en el cuadro de diálogo Casilla de verificación dinámica y haga clic en Aceptar:
    • 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.

    Nota:

    También se devolverá este valor al servidor si el usuario hace clic en el botón Enviar del formulario.

Preselección dinámica de un botón de opción HTML

Preseleccione dinámicamente un botón de opción HTML cuando un registro se muestre en el formulario HTML en un navegador.

Antes de comenzar debe crear el formulario en una página ColdFusion, PHP o ASP e insertar al menos un grupo de botones de opción HTML (Insertar > Formulario > Grupo de opciones). Además, debe definir un juego de registros u otra fuente de contenido dinámico para los botones de opción. Lo ideal es que la fuente del contenido tenga formato booleano, como Yes/No o true/false.

  1. En la vista de Diseño, seleccione un botón de opción del grupo.
  2. En el inspector de propiedades, haga clic en el botón Dinámico.
  3. Complete los campos del cuadro de diálogo Grupo de opciones dinámico y haga clic en Aceptar.

Configuración de las opciones del cuadro de diálogo Grupo de opciones dinámico

  1. En el menú emergente Grupo de botones de opción, seleccione un formulario y un grupo de botones de opción de la página.

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

  2. Seleccione un valor para que se preseleccione de forma dinámica en la lista de valores. Este valor aparecerá en el cuadro Valor.
  3. Haga clic en el icono de rayo que aparece dentro del cuadro Seleccionar valor igual a y seleccione un juego de registros que contenga posibles valores activados para 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).

  4. Haga clic en Aceptar.

Configuración de las opciones del cuadro de diálogo Grupo de opciones dinámico (ColdFusion)

  1. Seleccione un grupo de opciones y un formulario en el menú emergente Grupo de opciones.
  2. Haga clic en el icono de rayo que aparece junto al cuadro Seleccionar valor igual a.
  3. 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.

  4. Haga clic en Aceptar para cerrar el cuadro de diálogo Grupo de opciones dinámico e insertar el marcador de posición del contenido dinámico en el Grupo de opciones.

Validación de datos de formulario HTML

Dreamweaver puede añadir código JavaScript que comprueba el contenido de los campos de texto especificados, para asegurarse de que el usuario ha introducido el tipo correcto de datos.

Puede utilizar widgets de formularios de Spry para crear formularios y validar el contenido de los elementos de formulario especificados. Para más información, consulte los temas de Spry que se enumeran a continuación.

También puede crear formularios ColdFusion en Dreamweaver que validen el contenido de campos específicos. Para más información, consulte el capítulo de ColdFusion que se indica a continuación.

  1. Cree un formulario HTML que incluya al menos un campo de texto y un botón Enviar.

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

  2. Seleccione el botón Enviar.
  3. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botón más (+) y seleccione de la lista el comportamiento Validar formulario.
  4. Establezca las reglas de validación para cada campo de texto y haga clic en Aceptar.

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

    Nota:

    El comportamiento Validar formulario sólo está disponible si se ha insertado un campo de texto en el documento.

Cómo adjuntar comportamientos JavaScript a objetos de formulario HTML

Puede adjuntar comportamientos JavaScript almacenados en Dreamweaver a objetos de formulario HTML, como por ejemplo botones.

  1. Seleccione el objeto de formulario HTML.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botón más (+) y seleccione de la lista un comportamiento.

Cómo adjuntar scripts personalizados a botones de formulario HTML

Algunos formularios usan código JavaScript o VBScript para llevar a cabo el procesamiento del formulario u otra acción en el lado del cliente, en lugar de enviar los datos del formulario al servidor para su procesamiento. Puede utilizar Dreamweaver para configurar un botón de formulario que ejecute un script en el lado del cliente cuando el usuario haga clic en el botón.

  1. Seleccione un botón Enviar en un formulario.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el botón más (+) y seleccione Llamar JavaScript en la lista.
  3. En el cuadro Llamar JavaScript, escriba el nombre de la función JavaScript que desee ejecutar cuando el usuario haga clic en el botón y haga clic en Aceptar.

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

  4. Si su función JavaScript no existe en la sección head del documento, añádala ahora.

    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:

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

Creación de formularios HTML accesibles

Al insertar un objeto de formulario HTML, puede hacerlo accesible y cambiar los atributos de accesibilidad posteriormente.

Adición de un objeto de formulario accesible

  1. La primera vez que añada objetos de formulario accesibles, active el cuadro de diálogo Accesibilidad para los objetos de formulario (consulte Optimización del espacio de trabajo para desarrollo visual).

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

  2. En el documento, sitúe el punto de inserción en el lugar donde desea que aparezca el formulario.
  3. Seleccione Insertar > Formulario y, a continuación, seleccione el objeto de formulario que desea insertar.

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

  4. Rellene el cuadro de diálogo y haga clic en Aceptar. A continuación se incluye una lista parcial de las opciones:

    Nota:

    El lector de pantalla lee el nombre introducido como atributo Etiqueta del objeto.

    ID

    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.

    Ajustar con etiqueta de rótulo

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

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton 1</label>

    Adjuntar etiqueta de título utilizando el atributo "for"

    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 hay etiqueta de rótulo

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

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Clave de acceso

    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.

    Índice de fichas

    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.

  5. Haga clic en Sí para insertar una etiqueta de formulario.

    El objeto de formulario aparece en el documento.

    Nota:

    Si presiona Cancelar, el objeto de formulario aparece en el documento pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.

Edición de los valores de accesibilidad de un objeto de formulario

  1. En la ventana de documento, seleccione el objeto.
  2. Siga uno de estos procedimientos:
    • 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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea