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

Última atualização em 2023-12-21
  • Tópicos
  • HTML5 Forms
    Exibir mais informações sobre este tópico

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 representação PDF. Os desenvolvedores podem usar o 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 HTML e Introdução aos estilos o artigo contém informações detalhadas sobre vários aspectos de estilo dos 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 personalizados.

imagens-002-pequeno

Estilizar seus formulários

  1. Escolha um perfil para adicionar estilos personalizados

    Acesse a interface CRX DE no URL: https://<server>:<port>/crx/de e criar um perfil ou escolher um perfil existente. Para saber como criar um perfil, consulte Criar um perfil

  2. Criar uma folha de estilos CSS para estilizar os formulários HTML5

    Navegue até a pasta em que você criou o renderizador de perfil e crie um arquivo de folha de estilos CSS. As etapas a seguir são

    1. Clique com o botão direito do mouse e selecione criar > criar arquivo no menu

    2. Na caixa de diálogo Criar arquivo, digite o nome da folha de estilos. Use a extensão .css (por exemplo, stylesheet.css)

    3. No painel de navegação, abra o arquivo CSS criado.

    4. Defina as classes CSS dos componentes que deseja estilizar e adicione estilos a essas classes.

    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 perfil

    Abra a página Renderizador de perfil (arquivo jsp) no CRX DE e inclua o arquivo CSS na página logo abaixo da biblioteca de cliente XFA. Execute essas etapas para incluir o arquivo CSS no perfil.

    1. Pesquise na página do renderizador a seguinte linha:

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

    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.

Nesta página