Alteração de estilos padrão de formulários HTML5 changing-default-styles-of-html-forms
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.
Estilizar seus formulários style-your-forms
-
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
-
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
-
Clique com o botão direito do mouse e selecione criar > criar arquivo no menu
-
Na caixa de diálogo Criar arquivo, digite o nome da folha de estilos. Use a extensão .css (por exemplo, stylesheet.css)
-
No painel de navegação, abra o arquivo CSS criado.
-
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.
-
-
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.
-
Pesquise na página do renderizador a seguinte linha:
<cq:includeClientLib categories="xfaforms.profile" />
-
Insira o seguinte abaixo da linha acima para incluir a folha de estilos:
<link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>
-
Salve o arquivo.
-