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 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:

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