Erstellen von CSS-Stilen für HTML5-Formulare creating-css-styles-for-html-forms

CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

HTML5-Ausgabedarstellung einer XFA-basierten Formularvorlage besteht aus mehreren HTML-Elementen. Diese Elemente werden in einer Reihenfolge angeordnet. Jedes Element hat klar definierte CSS-Klassen. Sie können diese CSS-Klasse verwenden, um das Erscheinungsbild eines Elements auszuwählen und zu ändern.

NOTE
Ändern Sie in den CSS-Klassen nicht den Wert der Attribute für Breite, Höhe, Rahmendicke, Oben, Links, Rechts, Unten, Abstand, Rand und andere Position und Größe. Jede Änderung der Position und der Größenattribute bringt Änderungen am Layout des Formulars mit sich.

CSS-Klassen für Elemente  css-classes-nbsp-for-elements-nbsp

Jedes Element enthält klar definierte CSS-Klassen. Sie können diese Klassen ändern, um das Erscheinungsbild eines Elements zu ändern. Mit Ausnahme des Feld- und Zeichenelements hat jedes Element zwei CSS-Klassen: Type-Klasse und Name-Klasse.

  • Die Typ-Klasse stellt den Typ des XFA-Feldes dar. Sie können die type-Klasse außer Kraft setzen, um den Stil aller Elemente eines bestimmten Typs zu ändern.

  • Die Name-Klasse: entspricht dem Namen des XFA-Feldes. Sie können die name-Klasse überschreiben, um einen benutzerdefinierten zu ändern und auf ein Element anzuwenden.

NOTE
Einige XFA-Elemente haben keinen Namen. Um die Stile solcher Komponenten zu ändern, ändern Sie alle Komponenten dieses Typs.

Für die Seiten, die nicht in AEM Forms Designer benannt sind, werden die Seiten in einem HTML5-Formular in der steigenden Reihenfolge ihrer Anzahl benannt. Beispiel: Für ein HTML5-Formular mit zwei Seiten werden die Seiten Seite1, Seite2 benannt.

Feldelement field-element

Das Feldelement enthält zwei verschachtelte Elemente: Widget und Beschriftung.

Widget-Element

Das Widget-Element enthält das Element der Benutzeroberfläche für die Interaktion mit Benutzern. Es enthält drei CSS-Klassen:

  • Widget: Diese Klasse hat jedes Widget.
  • name: Die „name“-Klasse enthalten alle Widgets von AEM. Für benutzerdefinierte Widgets stellt der Widget-Entwickler die name-Klasse bereit.
  • type: Jedes Widget hat ein Benutzeroberflächenelement. Diese Klasse definiert den Typ des Elements der Benutzeroberfläche.
<!--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>

Neben der type- und name-Klasse enthält die Feldkomponente auch eine zusätzliche CSS-Klasse mit dem Namen subtype. Ein Untertyp gibt an, welcher Feldtyp es ist, z. B. NumericField, DateField, TextField. Sie können die Untertypklasse überschreiben, um die Formatierung aller Felder des Typs "Untertyp"zu ändern.

CSS-Klassen für verschiedene Komponenten css-classes-for-different-components

Komponente
Typ
Name
Seite
page
Benutzerdefinierter Name
oder
Seite<pagenumber> (Standard)
Inhaltsbereich
contentarea
Benutzerdefinierter Name
Teilformular
Teilformular
Benutzerdefinierter Name
Ausschlussgruppe
exclgroup
Benutzerdefinierter Name
Draw
draw
Benutzerdefinierter Name
Feld
field
Benutzerdefinierter Name
Beschriftung
caption
nicht vorhanden
Widget
Widget
Der Widget-Entwickler definiert sie (für benutzerdefinierte Widgets siehe die Tabelle im folgenden Abschnitt)

CSS-Klassen für verschiedene Felder css-classes-for-different-fields

AEM Forms Designer unterstützt verschiedene Feldtypen in einem Formular wie NumericField, DecimalField und Date Field. Alle diese Felder in HTML enthalten die oben genannten CSS-Klassen. Je nach Feldtyp enthalten sie auch einige zusätzliche Klassen.

Jedem Feld ist ein Widget zugeordnet, das das UI-Element darstellt. Die Klassen der einzelnen Felder und die mit jedem Feld verknüpften Widgets sind unten aufgeführt.

Feldtyp
Untertyp
Widget-Name
Widget-Typ
HTML-Benutzeroberflächen-Tag
Schaltfläche
nicht vorhanden
xfaButton
buttonfieldwidget
input type=button
CheckButton
checkboxfield
XfaCheckBox
checkboxfieldwidget
input type=checkbox
DateField
datefield
dateField
datefieldwidget
inputtype = text
DateTimeField
textfield
textField
textfieldwidget
inputtype = text
DecimalField
numericfield
numericInput
numericfieldwidget
inputtype = text
DropDown
choicelist
dropDownListWidget
choicelistwidget
auswählen
ListBox
choicelist
listBoxWidget
choicelistwidget
ol
NumericField
numericfield
numericInput
numericfieldwidget
inputtype = text
PasswordField
passwordfield
defaultWidget
passwordfieldwidget
input type=password
RadioButton
radiofield
XfaCheckBox
radiofieldwidget
input type=radio
TextField
textfield
textField
textfieldwidget
inputtype = text
TimeField
textfield
textField
textfieldwidget
inputtype = text

CSS-Klassen für verschiedene Zeichenelemente css-classes-for-different-draw-elements

Mit AEM Forms Designer können Sie statische Zeichenelemente wie Text und Bilder einfügen. Für jedes Zeichenelement wird eine separate CSS-Klasse mit diesem Element verknüpft. Die Liste der CSS-Klassen für Zeichenelemente ist unten aufgeführt. Jedem Zeichenelement ist eine Zeichenklasse zugeordnet.

Zeichentyp
CSS-Klasse
Text
text
Bild
image
Rechteck
Rechteck
Line
Zeile

Formatieren anderer Formularteile styling-other-parts-of-the-form

Neben dem Aussehen der Benutzerflächen-Komponenten im HTML-Formular können Sie auch den Stil von Elementen wie Inline-Fehler, Inline-Warnungen und Felder mit Überprüfungsfehlern ändern.

Styling Inline Errors

Wenn die Überprüfung eines Felds zu einem Fehler führt, wird ein Inline-Fehler angezeigt, wenn das Feld aktiv ist. Um den Stil von Inline-Fehlern zu ändern, überschreiben Sie die CSS-ID error-msg.

Styling Inline Warnings

Wenn die Überprüfung eines Felds zu einer Warnung führt, wird eine Inline-Warnung angezeigt, wenn das Feld aktiv ist. Um den Stil dieser Inline-Warnungen zu ändern, überschreiben Sie die CSS-ID warning-msg.

Styling Fields with Validation Errors

Wenn die Überprüfung eines Feldes fehlschlägt, wird der Stil des Widgets geändert. Diese Änderung des Stils wird ausgeführt, indem die CSS-Klasse widgetError auf die Widget-Komponente angewendet wird. Um den Standardstil zu ändern, muss die Klasse widgetError außer Kraft gesetzt werden.

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