Show Menu
TEMAS×

Cambio de los estilos predeterminados de los formularios HTML5

Los formularios HTML5 se procesan con funciones HTML5 y el estilo del formulario procesado se realiza con CSS. El aspecto predeterminado de los formularios HTML5 es similar al de su representación en PDF. Los desarrolladores pueden utilizar CSS personalizada 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 diversos aspectos del estilo de los formularios HTML5. Asegúrese de leer Introducción a los artículos de estilos antes de realizar los pasos mencionados en este artículo.
Las dos imágenes siguientes muestran la diferencia entre los estilos predeterminados y personalizados.

Estilo de los formularios

  1. Elija un perfil para agregar estilos personalizados
    Acceda a la interfaz CRX DE en la URL: https://<server>:<port>/crx/de y cree un perfil o elija un perfil existente. Para obtener información sobre cómo crear un perfil, consulte Creación de un nuevo Perfil
  2. Creación de una hoja de estilo CSS para aplicar estilo a los formularios HTML5
    Vaya a la carpeta en la que ha creado el procesador de perfil y cree un archivo de hoja de estilo CSS. Los pasos a seguir son
    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, introduzca 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 dichas clases.
    Para saber qué clases CSS crear para un componente concreto en los formularios HTML5, consulte Introducción a los estilos .
  3. Incluir la hoja de estilo en el procesador de Perfil
    Abra la página Perfil Renderer (archivo jsp) en CRX DE e incluya el archivo CSS en la página que se encuentra justo debajo de la biblioteca de cliente XFA. Siga estos pasos para incluir el archivo CSS en perfil.
    1. Busque la línea siguiente en la página del procesador:
      <cq:includeClientLib categorías="xfaforms.perfil" />
    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.