PDF (adobe.com)

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):
    1. En la ventana del documento, haga clic en el contorno del formulario para seleccionarlo.
    2. 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 mediante la sintaxis formn e incrementa el valor de n para cada uno de los formularios que se añadan a la página.

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

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

    6. (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:
    1. Sitúe el punto de inserción en el lugar del formulario en el que desee que aparezca el objeto de formulario.
    2. Seleccione el objeto en el menú Insertar > Formulario o en la categoría Formularios del panel Insertar.
    3. Defina las propiedades de los objetos.
    4. 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.
    5. 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 formato al texto 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.

Ajustar
(Disponible cuando se selecciona la opción Varias líneas) Especifica cómo se visualizará el texto introducido por el usuario cuando éste introduzca más información de la que se puede visualizar dentro del área de texto definida. Las opciones de ajuste son las siguientes:
Desactivado o Predeterminado
Impide que el texto se ajuste en la siguiente línea. Cuando el texto introducido por el usuario supera el límite derecho del área de texto, el texto se desplaza hacia la izquierda. El usuario deberá presionar Retorno para mover el punto de inserción a la siguiente línea del área de texto.

Virtual
Establece el ajuste del texto en el área de texto. Cuando el texto introducido por el usuario supera el límite derecho del área de texto, el texto se ajusta a la siguiente línea. Cuando se envían los datos para su procesamiento, no se aplica el ajuste de texto a los datos. Se envían en una sola cadena de datos.

Físico
Establece el ajuste del texto tanto en el área de texto como en los datos que se envían para su procesamiento.

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.

Opciones de Menú

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
(Sólo en el tipo Lista) Establece el número de elementos que se muestran en el menú.

Selecciones
(Sólo 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 éste 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 la sección “Handling files uploads” (Administración de carga de archivos) en el manual en línea de PHP disponible (en inglés) 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:
    CampoImagen
    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.

    Orig.
    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.
    1. En el cuadro Nombre, introduzca un nombre para el grupo de opciones.

      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 le 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" en el URL al servidor.

    2. 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.
    3. Haga clic en las flechas hacia arriba o hacia abajo para cambiar el orden de los botones.
    4. Para 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 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 el inspector de propiedades (Ventana > Propiedades).

    5. 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 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 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.
    1. 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 le 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" en el URL al servidor.

    2. 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.
    3. Haga clic en las flechas hacia arriba o hacia abajo para cambiar el orden de las casillas de verificación.
    4. 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 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 el inspector de propiedades (Ventana > Propiedades).

    5. 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 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 Código.