Skapa CSS-format för HTML5-formulär creating-css-styles-for-html-forms

HTML 5-renderingen av en XFA-baserad formulärmall består av flera HTML-element. Dessa element ordnas i en ordning. Alla element har väldefinierade CSS-klasser. Du kan använda dessa CSS-klasser för att markera och ändra utseendet på ett element.

CSS-klasser  för element  css-classes-nbsp-for-elements-nbsp

Alla element innehåller väldefinierade CSS-klasser. Du kan ändra dessa klasser om du vill ändra utseendet på ett element. Alla element, förutom fältet och draw-elementen, har två CSS-klasser - Type-klassen och Name-klassen.

För sidor som inte är namngivna i AEM Forms Designer får sidorna i ett HTML 5-formulär ett namn i stigande ordning. För ett HTML5-formulär med två sidor heter sidorna t.ex. Page1, Page2.

Fältelement field-element

Fältelementet innehåller två kapslade element: widget och bildtext.

Widget-element

Widgetelementet innehåller användargränssnittselementet för interaktion med användare. Den har tre CSS-klasser:

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

Förutom klassen type och name innehåller fältkomponenten även en ytterligare CSS-klass med namnet subtype. En undertyp identifierar vilken typ av fält det är, till exempel NumericField, DateField och TextField. Du kan åsidosätta undertypsklassen om du vill ändra formateringen för alla fält av typen, undertyp.

CSS-klasser för olika komponenter css-classes-for-different-components

CSS-klasser för olika fält css-classes-for-different-fields

AEM Forms Designer stöder olika typer av fält i ett formulär som NumericField, DecimalField och Date Field. Alla dessa fält i HTML innehåller de ovannämnda CSS-klasserna. De innehåller också vissa extra klasser beroende på fälttypen.

Varje fält har en tillhörande widget som representerar gränssnittselementet. Klasserna för varje fält och de widgetar som är kopplade till varje fält listas nedan.

CSS-klasser för olika Draw Elements css-classes-for-different-draw-elements

Du kan infoga statiska ritelement som text och bilder med AEM Forms Designer. För varje draw-element kopplas en separat CSS-klass till det elementet. Listan med CSS-klasser för draw-element visas nedan. Alla draw-element har en draw-klass kopplad till sig.

Formatera andra delar av formuläret styling-other-parts-of-the-form

Förutom utseendet på gränssnittskomponenter i formuläret HTML kan du ändra formatet på element som textbundna fel, textbundna varningar och fält med valideringsfel.

Styling Inline Errors

När valideringen av ett fält resulterar i ett fel visas ett internt fel när fältet är aktivt. Om du vill ändra formatet för infogade fel åsidosätter du CSS-ID:t error-msg.

Styling Inline Warnings

När valideringen av ett fält resulterar i en varning visas en intern varning när fältet är aktivt. Om du vill ändra formatet för dessa infogade varningar åsidosätter du CSS-ID:t warning-msg.

Styling Fields with Validation Errors

När valideringen för ett fält misslyckas ändras formatet på widgeten. Den här formatändringen görs genom att tillämpa en CSS-klass widgetError på widgetkomponenten. Om du vill ändra standardformatet åsidosätter du klassen widgetError.