Cambiar los estilos predeterminados de los formularios HTML5 changing-default-styles-of-html-forms

Los formularios HTML5 se procesan con las funciones HTML5 y el estilo del formulario procesado se realiza con CSS. El aspecto predeterminado de los formularios HTML5 es similar a su representación en PDF. Los desarrolladores pueden utilizar CSS personalizadas para cambiar el aspecto predeterminado de los formularios HTML5.

Este artículo proporciona información paso a paso para cambiar el estilo de un formulario HTML5 y el artículo Introducción a los estilos contiene información detallada sobre varios aspectos relacionados con el estilo de los formularios HTML5. Asegúrese de leer Introducción a los estilos antes de realizar los pasos mencionados en este artículo.

Las dos imágenes siguientes muestran la diferencia entre los estilos predeterminados y los personalizados.

picture-002-small

Aplicar estilo a los formularios style-your-forms

  1. Elija un perfil al que agregar estilos personalizados

    Acceda a la interfaz CRX DE en la URL: https://<server>:<port>/crx/de y cree un perfil o elija uno existente. Para obtener información sobre cómo crear un perfil, consulte Creación de un perfil

  2. Crear una hoja de estilos CSS para aplicar estilo a los formularios HTML5

    Navegue hasta la carpeta en la que ha creado el procesador de perfiles y cree un archivo de hoja de estilo CSS. Los pasos a seguir son los siguientes:

    1. Haga clic con el botón derecho en la carpeta y seleccione crear > crear archivo en el menú

    2. En el cuadro de diálogo Crear archivo, escriba el nombre de la hoja de estilo. Asegúrese de utilizar la extensión .css (por ejemplo, stylesheet.css)

    3. En el panel de navegación, abra el archivo CSS que ha creado.

    4. Defina las clases CSS de los componentes a los que desea aplicar estilo y agregue estilos en esas clases.

    Para saber qué clases CSS crear para un componente en particular en los formularios HTML5, consulte Introducción a los estilos.

  3. Incluya la hoja de estilo en el procesador de perfiles

    Abra la página Procesador de perfiles (archivo jsp) en CRX DE e incluya el archivo CSS en la página, justo debajo de la biblioteca de cliente XFA. Siga estos pasos para incluir el archivo CSS en el perfil.

    1. Busque la siguiente línea en la página del procesador:

      <cq:includeClientLib categories="xfaforms.profile" />

    2. Inserte lo siguiente debajo de la línea anterior para incluir la hoja de estilo:

      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>

    3. Guarde el archivo.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2