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

CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

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.

NOTE
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  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.

  • De Type-klasse geeft het type van het XFA-veld aan. U kunt de type klasse om de stijlen van alle elementen van een bepaald type te wijzigen.

  • De Name, klasse komt overeen met de naam van het XFA-veld. U kunt de name klasse om aangepaste stijl te wijzigen en toe te passen op een element.

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

Voor de pagina's die niet in de Ontwerper van AEM Forms worden genoemd, worden de pagina's in een vorm HTML5 in de stijgende orde van hun aantal genoemd. 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.

Widget-element

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

  • Widget: Elke widget heeft deze klasse.
  • name: 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 de klasse type en name 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 css-classes-for-different-components

Component
Type
Naam
Pagina
page
Door gebruiker gedefinieerde naam
of
Pagina<pagenumber> (standaard)
Inhoudsgebied
inhoudsgebied
Door gebruiker gedefinieerde naam
Subformulier
subformulier
Door gebruiker gedefinieerde naam
Uitsluitingsgroep
uitsluiten
Door gebruiker gedefinieerde naam
Tekenen
draw
Door gebruiker gedefinieerde naam
Veld
field
Door gebruiker gedefinieerde naam
Bijschrift
bijschrift
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 css-classes-for-different-fields

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
input type=button
CheckButton
checkbox, veld
XfaCheckBox
checkbox-widget
invoertype=checkbox
DateField
datefield
dateField
datefieldwidget
invoertype=text
DateTimeField
textfield
textField
textfield-widget
invoertype=text
DecimalField
numeriek veld
numericInput
numericfieldwidget
invoertype=text
DropDown
choicelist
dropDownListWidget
choicelistwidget
selecteren
ListBox
choicelist
listBoxWidget
choicelistwidget
ol
NumericField
numeriek veld
numericInput
numericfieldwidget
invoertype=text
PasswordField
wachtwoordveld
defaultWidget
wachtwoordwidget
input type=password
RadioButton
radioveld
XfaCheckBox
radiofieldwidget
invoertype=radio
TextField
textfield
textField
textfield-widget
invoertype=text
TimeField
textfield
textField
textfield-widget
invoertype=text

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.

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

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. 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 toe te passen widgetError op de widgetcomponent. Als u de standaardstijl wilt wijzigen, overschrijft u de instelling widgetError klasse.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da