CSS-stijlen maken voor HTML5-formulieren

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.

OPMERKING

Wijzig in de CSS-klassen de waarde van de breedte, hoogte, randdikte, boven, links, rechts, onder, opvulling, marge en andere positie- en groottekenmerken niet. Als u de positie- en groottekenmerken wijzigt, verandert de indeling van het formulier.

CSS-klassen  voor elementen 

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.

  • De Type-klasse vertegenwoordigt het type van het XFA-veld. U kunt de klasse type met voeten treden om de stijlen van alle elementen van een bepaald type te wijzigen.

  • De Naam-klasse komt overeen met de naam van het XFA-veld. U kunt de klasse name met voeten treden om douanestijl op een element te wijzigen en toe te passen.

OPMERKING

Sommige XFA-elementen hebben geen naam. Als u de stijlen van dergelijke componenten wilt wijzigen, wijzigt u alle componenten van dat specifieke type.

Voor pagina's die niet zijn genoemd in de AEM Forms Designer, 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

Het veldelement bevat twee geneste elementen: widget en bijschrift.

Widget-element

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

  • Widget: Elke widget heeft deze klasse.
  • naam: Alle widgets die bij AEM worden geleverd, bevatten de widgetnaamklasse. Voor aangepaste widgets biedt de widgetontwikkelaar de widgetnaamklasse.
  • type: Elke widget heeft een interface-element. Deze klasse definieert het type van het interface-element.
<!--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 veldcomponent ook een extra CSS-klasse met de naam 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 met tekst en subtype te wijzigen.

CSS-klassen voor verschillende componenten

Component Type Naam
Pagina page Door gebruiker gedefinieerde naam
of
Pagina<pageNumber> (standaard)
Inhoudsgebied inhoudsgebied Door gebruiker gedefinieerde naam
Subformulier subform Door gebruiker gedefinieerde naam
Uitsluitingsgroep uitsluiten Door gebruiker gedefinieerde naam
Tekenen draw Door gebruiker gedefinieerde naam
Veld field Door gebruiker gedefinieerde naam
Bijschrift caption NA
Widget widget De widgetontwikkelaar definieert dit (zie de tabel in de volgende sectie voor door de gebruiker gedefinieerde widgets)

CSS-klassen voor verschillende velden

AEM Forms Designer ondersteunt verschillende typen velden in een formulier, zoals NumeriekVeld, DecimaalVeld en Datumveld. 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.

Veldtype Subtype Widgetnaam Type widget HTML UI-tag
Knop
 NA xfaButton
 buttonfieldwidget
 invoertype=button
CheckButton
 checkboxField
 XfaCheckBox
 checkboxFieldWidget
 invoertype=checkbox
DateField
 datefield
 dateField
 datefieldwidget
 invoertype=text
DateTimeField
 textfield
 textField
 textfield-widget invoertype=text
DecimalField
 numericfield
 numericInput
 numericfieldwidget
 invoertype=text
DropDown
 choicelist
 dropDownListWidget
 choicelistwidget
 select
ListBox
 choicelist
 listBoxWidget
 choicelistwidget
 ol
NumericField
 numericfield
 numericInput
 numericfieldwidget
 invoertype=text
PasswordField
 wachtwoordveld
 defaultWidget
 wachtwoordveld-widget
 invoertype=password
RadioButton
 radiofield
 XfaCheckBox
 radiofieldwidget
 invoertype=radio
TextField
 textfield
 textField
 textfield-widget
 invoertype=text
TimeField
 textfield
 textField
 textfield-widget
 invoertype=text

CSS-klassen voor verschillende Drawing 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.

Type tekenen CSS-klasse
Tekst text
Afbeelding afbeelding
Rechthoek rectangle
Lijn line

Andere delen van het formulier opmaken

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

Styling Inline Errors

Wanneer de validatie van een veld resulteert in een fout, wordt een inlinefout weergegeven wanneer het veld actief is. Als u de stijl van inline-fouten wilt wijzigen, overschrijft u de CSS-id error-msg.

Styling Inline Warnings

Wanneer de validatie van een veld resulteert in een waarschuwing, wordt een inlinewaarschuwing weergegeven wanneer het veld actief is. Als u de stijl van deze inline-waarschuwingen wilt wijzigen, overschrijft u de CSS-id warning-msg.

Styling Fields with Validation Errors

Wanneer de validatie voor een veld mislukt, verandert de stijl van de widget. Deze stijlwijziging wordt uitgevoerd door een CSS-klasse widgetError op de widgetcomponent toe te passen. Als u de standaardopmaak wilt wijzigen, overschrijft u de klasse widgetError.

Op deze pagina