Criação de estilos CSS para formulários HTML5

A execução HTML5 de um modelo de formulário baseado em XFA consiste em vários elementos HTML. Esses elementos são organizados em uma ordem. Cada elemento tem classes CSS bem definidas. Você pode usar essa classe CSS para selecionar e alterar a aparência de um elemento.

Observação

Nas classes CSS, não altere o valor da largura, altura, espessura da borda, superior, esquerda, direita, inferior, preenchimento, margem e outros atributos de posição e tamanho. Qualquer alteração nos atributos de posição e tamanho traz alterações ao layout do formulário.

Classes CSS para elementos 

Cada elemento contém classes CSS bem definidas. É possível modificar essas classes para alterar a aparência de um elemento. Cada elemento, exceto os elementos field e draw, tem duas classes CSS - classe Type e classe Name.

  • A classe ​Type representa o tipo do campo XFA. Você pode substituir a type classe para modificar os estilos de todos os elementos de um tipo específico.

  • A classe ​Name corresponde ao nome do campo XFA. Você pode substituir a name classe para modificar e aplicar um estilo personalizado a um elemento.

Observação

Alguns elementos XFA não têm um nome. Para alterar os estilos desses componentes, modifique todos os componentes desse tipo específico.

Para as páginas não nomeadas no AEM Forms Designer, as páginas em um formulário HTML5 são nomeadas na ordem crescente de seu número. Por exemplo, para um formulário HTML5 com duas páginas, as páginas são nomeadas Página1, Página2.

Elemento de campo

O elemento field contém dois elementos aninhados: widget e legenda.

Elemento de widget

O elemento do widget contém o elemento da interface do usuário para interação com os usuários. Ele tem três classes de CSS:

  • Widget: Todo widget tem essa classe.
  • name: Todos os widgets enviados com AEM contêm a classe de nome do widget. Para widgets personalizados, o desenvolvedor do widget fornece a classe de nome do Widget.
  • tipo: Todo widget tem um elemento de interface do usuário. Essa classe define o tipo do elemento da interface do usuário.
<!--field with caption-->
<div class="field numericfield NumericField3 ">
     <div class="caption">
        caption content
     </div>
     <div class="widget numericfieldwidget numericInput">
       widget content
     </div>
</div>
 
<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
   widget content
</div>

Além da classe type e name, o componente field também contém uma classe CSS adicional chamada subtype. Um subtipo identifica qual tipo de campo é, por exemplo, NumericField, DateField, TextField. É possível substituir a classe de subtipo para modificar o estilo de todos os campos do tipo, subtipo.

Classes CSS para diferentes componentes

Componente Tipo Nome
Página page Nome
definido pelo usuário ou
Page<pageNumber> (padrão)
Área de conteúdo área de conteúdo Nome definido pelo usuário
Subformulário subformulário Nome definido pelo usuário
Grupo de exclusão exclgroup Nome definido pelo usuário
Draw draw Nome definido pelo usuário
Texto campo Nome definido pelo usuário
Legenda caption ND
Widget widget O desenvolvedor do widget o define (para widgets definidos pelo usuário, consulte a tabela na seção a seguir)

Classes CSS para diferentes campos

O AEM Forms Designer oferece suporte a diferentes tipos de campos em um formulário como NumericField, DecimalField e Date Field. Todos esses campos em HTML contêm as classes CSS mencionadas acima. Eles também contêm algumas classes adicionais dependendo do tipo de campo.

Cada campo tem um widget associado que representa o elemento da interface do usuário. As classes de cada campo e os widgets associados a cada campo são listados abaixo.

Tipo de campo Subtipo Nome do widget Tipo de Widget Tag da interface do usuário HTML
Botão
ND xfaButton
buttonfieldwidget
tipo de entrada=botão
CheckButton
checkbox
XfaCheckBox
checkboxfieldwidget
tipo de entrada=caixa de seleção
DateField
datefield
dateField
datefieldwidget
tipo de entrada=texto
DateTimeField
textfield
textField
textfieldwidget tipo de entrada=texto
DecimalField
numericfield
numericInput
numericfieldwidget
tipo de entrada=texto
DropDown
choicelist
dropDownListWidget
choicelistwidget
select
ListBox
choicelist
listBoxWidget
choicelistwidget
ol
NumericField
numericfield
numericInput
numericfieldwidget
tipo de entrada=texto
PasswordField
passwordfield
defaultWidget
passwordfieldwidget
tipo de entrada=senha
RadioButton
radiocampo
XfaCheckBox
radiofieldwidget
tipo de entrada=rádio
TextField
textfield
textField
textfieldwidget
tipo de entrada=texto
TimeField
textfield
textField
textfieldwidget
tipo de entrada=texto

Classes CSS para diferentes Elementos de desenho

É possível inserir elementos de desenho estáticos, como texto e imagens, usando o AEM Forms Designer. Para cada elemento draw, uma classe CSS separada é associada a esse elemento. A lista das classes CSS para elementos draw está listada abaixo. Cada elemento draw tem uma classe draw associada a ele.

Tipo de desenho Classe CSS
Texto texto
Imagem imagem
Retângulo rectangle
Linha line

Estilo de outras partes do formulário

Além da aparência dos componentes da interface no formulário HTML, é possível alterar o estilo de elementos como Erros em linha, Avisos em linha e campos com erros de validação.

Styling Inline Errors

Quando a validação de um campo resulta em um erro, um erro em linha é exibido quando o campo está ativo. Para alterar o estilo dos erros em linha, substitua a ID CSS error-msg.

Styling Inline Warnings

Quando a validação de um campo resulta em um aviso, um aviso em linha é exibido quando o campo está ativo. Para alterar o estilo desses avisos embutidos, substitua o warning-msg da ID CSS.

Styling Fields with Validation Errors

Quando a validação de um campo falha, o estilo do widget muda. Essa alteração de estilo é feita aplicando um widgetError de classe CSS no componente do widget. Para modificar o estilo padrão, substitua a classe widgetError .

Nesta página