Erstellen von CSS-Stilen für HTML5-Formulare creating-css-styles-for-html-forms
Die HTML5-Wiedergabe 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 die CSS-Klassen verwenden, um das Erscheinungsbild eines Elements 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.
Die Seiten, die in AEM Forms Designer nicht benannt wurden, werden in einem HTML5-Formular in aufsteigenden Reihenfolge ihrer Zahl 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 den Benutzenden. 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>
Zusätzlich zu den Klassen „type“ und „name“ enthält die Feldkomponente noch eine weitere CSS-Klasse: subtype. Eine subtype-Klasse zeigt an, um welchen Feldtyp es sich handelt, z. B. NumericField, DateField, TextField. Sie können die subtype-Klasse außer Kraft setzen, um die Stile aller Felder des Typs „subtype“ zu ändern.
CSS-Klassen für verschiedene Komponenten css-classes-for-different-components
CSS-Klassen für verschiedene Felder css-classes-for-different-fields
Der AEM Forms Designer unterstützt unterschiedliche Typen von Feldern in einem Formular wie NumericField, DecimalField und DateField. All diese Felder in HTML enthalten die oben genannten CSS-Klassen. Je nach Feldtyp enthalten sie auch ein paar zusätzliche Klassen.
Jedes Feld verfügt über ein zugehöriges Widget, das das Benutzeroberflächen-Element darstellt. Die Klassen jedes Feldes und die mit den Feldern verknüpften Widgets sind unten aufgeführt.
CSS-Klassen für verschiedene Zeichenelemente css-classes-for-different-draw-elements
Mithilfe des AEM Forms Designer können Sie statische Zeichenelemente wie Text und Bilder einfügen. Jedes Zeichenelement ist mit einer separaten CSS-Klasse verknüpft. Die Liste der CSS-Klassen für Zeichenelemente ist unten aufgeführt. Jedes Zeichenelement ist mit einer Zeichenklasse verknüpft.
Gestalten des Stils 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 Feldes einen Fehler ergibt, wird ein Inline-Fehler angezeigt, wenn das Feld aktiv ist. Um den Stil von Inline-Fehlern zu ändern, muss die CSS-ID error-msg überschrieben werden.
Styling Inline Warnings
Wenn die Überprüfung eines Feldes eine Warnung ergibt, wird eine Inline-Warnung angezeigt, wenn das Feld aktiv ist. Um den Stil von Inline-Warnungen zu ändern, muss die CSS-ID warning-msg überschrieben werden.
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.