Criação de estilos CSS para formulários HTML5 creating-css-styles-for-html-forms

A representaçã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 essas classes CSS para selecionar e alterar a aparência de um elemento.

Classes CSS para elementos  css-classes-nbsp-for-elements-nbsp

Cada elemento contém classes CSS bem definidas. Você pode modificar essas classes para alterar a aparência de um elemento. Todos os elementos, exceto os elementos field e draw, têm duas classes CSS - classe Type e classe Name.

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 como Página1, Página2.

Elemento de campo field-element

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

Elemento widget

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

<!--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 do tipo e da classe de nome, o componente de campo também contém uma classe CSS adicional chamada subtipo. Um subtipo identifica que tipo de campo é, por exemplo, NumericField, DateField, TextField. Você pode substituir a classe do subtipo para modificar o estilo de todos os campos do tipo, subtipo.

Classes CSS para componentes diferentes css-classes-for-different-components

Classes CSS para campos diferentes css-classes-for-different-fields

O AEM Forms Designer é compatível com diferentes tipos de campos em um formulário como NumericField, DecimalField e Date Field. Todos esses campos no HTML contêm as classes CSS mencionadas acima. Eles também contêm algumas classes extras, 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 estão listados abaixo.

Classes CSS para diferentes elementos Draw css-classes-for-different-draw-elements

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

Estilizar outras partes do formulário styling-other-parts-of-the-form

Além da aparência dos componentes da interface do usuário no formulário HTML, você pode 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 erro, um erro em linha é exibido quando o campo está ativo. Para alterar o estilo dos erros em linha, substitua a ID de 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 em linha, substitua a ID de CSS warning-msg.

Styling Fields with Validation Errors

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