Show Menu
TÓPICOS×

Alteração de estilos padrão de formulários HTML5

Os formulários HTML5 são renderizados usando recursos HTML5 e o estilo do formulário renderizado é feito usando CSS. A aparência padrão de formulários HTML5 é semelhante à sua execução em PDF. Os desenvolvedores podem usar CSS personalizado para alterar a aparência padrão dos formulários HTML5.
Este artigo fornece informações passo a passo para alterar o estilo de um formulário HTML5 e o artigo Introdução aos estilos contém informações detalhadas sobre vários aspectos de estilização de formulários HTML5. Certifique-se de ler o artigo Introdução aos estilos antes de executar as etapas mencionadas neste artigo.
As duas imagens a seguir mostram a diferença entre os estilos padrão e personalizado.

Estilo de seus formulários

  1. Escolha um perfil para adicionar estilos personalizados
    Acesse a interface CRX DE no URL: https://<servidor>:<porta>/crx/de e crie um perfil ou escolha um perfil existente. Para saber como criar um perfil, consulte Criação de um novo Perfil
  2. Criar uma folha de estilos CSS para estilizar os formulários HTML5
    Navegue até a pasta na qual você criou o renderizador de perfis e crie um arquivo de folha de estilos CSS. As etapas a seguir são
    1. Clique com o botão direito do mouse na pasta e selecione criar -> criar arquivo no menu
    Para saber quais classes CSS criar para um componente específico em seus formulários HTML5, consulte Introdução aos estilos .
  3. Incluir a folha de estilos no Renderizador de Perfis
    Abra a página do Renderizador de Perfis (arquivo jsp) no CRX DE e inclua o arquivo CSS na página logo abaixo da biblioteca do cliente XFA. Execute estas etapas para incluir o arquivo CSS no perfil.
    1. Pesquise na página do renderizador a seguinte linha:
      <cq:includeClientLib categoria="xfaforms.perfil" />
    2. Insira o seguinte abaixo da linha acima para incluir a folha de estilos:
      <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>
    3. Salve o arquivo.