Erstellen von CSS-Stilen für HTML5-Formulare creating-css-styles-for-html-forms
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.
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.
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
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.
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.
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.