Creazione di stili CSS per i moduli HTML5 creating-css-styles-for-html-forms

La rappresentazione HTML5 di un modello di modulo basato su XFA è costituita da diversi elementi HTML. Questi elementi sono disposti in ordine. Ogni elemento dispone di classi CSS ben definite. È possibile utilizzare queste classi CSS per selezionare e modificare l'aspetto di un elemento.

Classi CSS  per gli elementi  css-classes-nbsp-for-elements-nbsp

Ogni elemento contiene classi CSS ben definite. È possibile modificare queste classi per modificare l'aspetto di un elemento. Ogni elemento, ad eccezione degli elementi field e draw, dispone di due classi CSS: la classe Type e la classe Name.

Per le pagine non denominate in AEM Forms Designer, le pagine di un modulo HTML 5 vengono denominate in ordine crescente di numero. Nel caso di un modulo di HTML5 con due pagine, ad esempio, le pagine vengono denominate Pagina1, Pagina2.

Elemento campo field-element

L’elemento field contiene due elementi nidificati: widget e didascalia.

Elemento widget

L’elemento widget contiene l’elemento dell’interfaccia utente per l’interazione con gli utenti. Dispone di tre classi 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>

Oltre alla classe type e name, il componente field contiene anche una classe CSS aggiuntiva denominata subtype. Un sottotipo identifica il tipo di campo, ad esempio NumericField, DateField, TextField. È possibile sovrascrivere la classe del sottotipo per modificare lo stile di tutti i campi di tipo, sottotipo.

Classi CSS per componenti diversi css-classes-for-different-components

Classi CSS per campi diversi css-classes-for-different-fields

AEM Forms Designer supporta diversi tipi di campi in un modulo, ad esempio NumericField, DecimalField e DateField. Tutti questi campi in HTML contengono le classi CSS sopra menzionate. Contengono anche alcune classi aggiuntive a seconda del tipo di campo.

A ogni campo è associato un widget che rappresenta l’elemento dell’interfaccia utente. Di seguito sono elencate le classi di ciascun campo e i widget associati a ciascun campo.

Classi CSS per diversi elementi di Draw css-classes-for-different-draw-elements

È possibile inserire elementi di disegno statici come testo e immagini utilizzando AEM Forms Designer. Per ogni elemento di disegno, a tale elemento è associata una classe CSS separata. L’elenco delle classi CSS per gli elementi disegno è elencato di seguito. A ogni elemento di disegno è associata una classe di disegno.

Applicazione di stili ad altre parti del modulo styling-other-parts-of-the-form

Oltre all’aspetto dei componenti dell’interfaccia utente nel modulo HTML, puoi modificare lo stile di elementi come Errori in linea, Avvisi in linea e campi con errori di convalida.

Styling Inline Errors

Quando la convalida di un campo genera un errore, quando il campo è attivo viene visualizzato un errore in linea. Per modificare lo stile degli errori in linea, ignora l'ID CSS error-msg.

Styling Inline Warnings

Quando la convalida di un campo genera un avviso, quando il campo è attivo viene visualizzato un avviso in linea. Per modificare lo stile di questi avvisi in linea, ignora l'ID CSS warning-msg.

Styling Fields with Validation Errors

Quando la convalida di un campo non riesce, lo stile del widget cambia. Questa modifica di stile viene eseguita applicando una classe CSS widgetError al componente widget. Per modificare lo stile predefinito, sostituire la classe widgetError.