CSS-stijlen maken voor HTML5-formulieren creating-css-styles-for-html-forms

HTML5-uitvoering van een op XFA gebaseerde formuliersjabloon bestaat uit verschillende HTML-elementen. Deze elementen worden in een volgorde gerangschikt. Elk element heeft duidelijk gedefinieerde CSS-klassen. U kunt deze CSS-klasse gebruiken om de weergave van een element te selecteren en te wijzigen.

CSS-klassen  voor elementen  css-classes-nbsp-for-elements-nbsp

Elk element bevat duidelijk gedefinieerde CSS-klassen. U kunt deze klassen wijzigen om de weergave van een element te wijzigen. Elk element, behalve het veld en draw-elementen, heeft twee CSS-klassen: de klasse Type en de klasse Name.

Voor pagina's die niet in de AEM Forms Designer zijn genoemd, worden pagina's in een HTML5-formulier in toenemende mate genummerd. Voor een HTML5-formulier met twee pagina's krijgen de pagina's bijvoorbeeld de naam Pagina1, Pagina2.

Veldelement field-element

Het veldelement bevat twee geneste elementen: widget en bijschrift.

element Widget

Het widgetelement bevat het interface-element voor interactie met gebruikers. De klasse heeft drie CSS-klassen:

<!--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>

Naast het type en de naamklasse, bevat de gebiedscomponent ook een extra CSS klasse genoemd subtype. Een subtype geeft aan welk type veld het is, bijvoorbeeld NumericField, DateField, TextField. U kunt de subtypeklasse overschrijven om de opmaak van alle velden van het type, subtype, te wijzigen.

CSS-klassen voor verschillende componenten css-classes-for-different-components

CSS-klassen voor verschillende velden css-classes-for-different-fields

De AEM Forms Designer ondersteunt verschillende typen velden in een formulier, zoals NumericField, DecimalField en Date Field. Al deze velden in HTML bevatten de bovengenoemde CSS-klassen. Ze bevatten ook enkele extra klassen, afhankelijk van het type veld.

Aan elk veld is een widget gekoppeld die het interface-element vertegenwoordigt. De klassen van elk veld en de widgets die aan elk veld zijn gekoppeld, worden hieronder weergegeven.

CSS-klassen voor verschillende Draw Elements css-classes-for-different-draw-elements

Met AEM Forms Designer kunt u statische tekenelementen, zoals tekst en afbeeldingen, invoegen. Voor elk tekenelement wordt een aparte CSS-klasse gekoppeld aan dat element. De lijst met CSS-klassen voor draw-elementen wordt hieronder weergegeven. Aan elk tekenelement is een tekenklasse gekoppeld.

Andere delen van het formulier opmaken styling-other-parts-of-the-form

Naast de weergave van UI-componenten in het HTML-formulier kunt u de stijl van elementen zoals inline-fouten, inline-waarschuwingen en velden met validatiefouten wijzigen.

Styling Inline Errors

Wanneer de validatie van een veld resulteert in een fout, wordt een inlinefout weergegeven wanneer het veld actief is. Om de stijl van gealigneerde fouten te veranderen, vervang CSS identiteitskaart fout-msg.

Styling Inline Warnings

Wanneer de validatie van een veld resulteert in een waarschuwing, wordt een inlinewaarschuwing weergegeven wanneer het veld actief is. Om de stijl van deze gealigneerde waarschuwingen te veranderen, vervang CSS identiteitskaart waarschuwing-msg.

Styling Fields with Validation Errors

Wanneer de validatie voor een veld mislukt, verandert de stijl van de widget. Deze stijlverandering wordt gedaan door een CSS klasse widgetError op de widgetcomponent toe te passen. Om het standaard stileren te wijzigen, treedt widgetError klasse met voeten.