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.

NOTE
I CSS-klasserna ska du inte ändra värdet för attributen width, height, border-tjocklek, top, left, right, bottom, padding, margin och other position and size. Alla ändringar i attributen position och storlek medför ändringar i formulärets layout.

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.

  • The Klassen Type representerar typen av XFA-fält. Du kan åsidosätta type -klass om du vill ändra stilarna för alla element av en viss typ.

  • The Klassen Name motsvarar namnet på XFA-fältet. Du kan åsidosätta name -klass för att ändra och använda egna format på ett element.

NOTE
Vissa XFA-element har inget namn. Om du vill ändra formaten för sådana komponenter ändrar du alla komponenter av den typen.

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:

  • Widget: Alla widgetar har den här klassen.
  • name: Alla widgetar som levereras med AEM innehåller widgetnamnsklassen. För anpassade widgetar tillhandahåller widgetutvecklaren klassen Widget name.
  • type: Varje widget har ett element i användargränssnittet. Den här klassen definierar typen av användargränssnittselement.
<!--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 undertyp. 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

Komponent
Typ
Namn
Sida
page
Användardefinierat namn
eller
Sida<pagenumber> (standard)
Innehållsområde
innehållsområde
Användardefinierat namn
Delformulär
delformulär
Användardefinierat namn
Uteslutningsgrupp
exclgroup
Användardefinierat namn
Rita
rita
Användardefinierat namn
Fält
fält
Användardefinierat namn
Bildtext
bildtext
NA
Widget
widget
Widgetutvecklaren definierar den (för användardefinierade widgetar, se tabellen i följande avsnitt)

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

AEM Forms Designer har stöd för 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.

Fälttyp
Undertyp
Widget-namn
Widget-typ
HTML UI-tagg
Knapp
NA
xfaButton
buttonfieldwidget
input type=button
CheckButton
kryssrutefält
XfaCheckBox
kryssrutefältwidget
indatatyp=kryssruta
DateField
datafält
dateField
datefieldwidget
indatatyp=text
DateTimeField
textfält
textField
textfältwidget
indatatyp=text
DecimalField
numeriskt fält
numericInput
numerisk fältwidget
indatatyp=text
DropDown
urvalslista
dropDownListWidget
vallistorwidget
välj
ListBox
urvalslista
listBoxWidget
vallistorwidget
ol
NumericField
numeriskt fält
numericInput
numerisk fältwidget
indatatyp=text
PasswordField
lösenordsfält
defaultWidget
lösenordfältwidget
input type=password
RadioButton
radiofält
XfaCheckBox
radiofieldwidget
indatatyp=radio
TextField
textfält
textField
textfältwidget
indatatyp=text
TimeField
textfält
textField
textfältwidget
indatatyp=text

CSS-klasser för olika Draw-element 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.

Rita typ
CSS, klass
Text
text
Bild
image
Rektangel
rektangel
Linje
line

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 en CSS-klass används widgetError på widgetkomponenten. Om du vill ändra standardformatet åsidosätter du widgetError klassen.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2