Show Menu
THEMEN×

Erstellen von CSS-Stilen für HTML5-Formulare

HTML5-Wiedergabe eines 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 Aussehen eines Elements zu ändern.
In den CSS-Klassen dürfen die Werte der Attribute für Breite, Höhe, Rahmenstärke, oberen Bereich, linken Bereich, rechten Bereich, unteren Bereich, Abstand und Rand nicht geändert werden. Änderungen an der Position und den Größenattributen ziehen Änderungen am Layout des Formulars nach sich.

CSS-Klassen für Elemente 

Jedes Element enthält klar definierte CSS-Klassen. Die Klassen können geändert werden, um das Aussehen 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.
Manche XFA-Elemente haben keinen Namen. Um den Stil dieser Komponenten zu ändern, müssen Sie alle Komponenten dieses Typs ändern.
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

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 dem Benutzer. Es enthält drei CSS-Klassen:
  • Widget : Jedes Widget hat diese Klasse.
  • name : Alle mit AEM ausgelieferten Widgets enthalten die Widget-Namensklasse. Für benutzerdefinierte Widgets stellt der Widget-Entwickler die name-Klasse bereit.
  • type : Jedes Widget hat ein Element der Benutzeroberfläche. 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 der type- und name-Klasse enthält die Feldkomponente noch eine weitere CSS-Klasse: subtype . Eine subtype-Klasse zeigt an, welcher Feldtyp es ist, 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

Komponente Typ Name
Seite page Benutzerdefinierter Name oder Seite<Seitenzahl> (Standard)
Inhaltsbereich contentarea Benutzerdefinierter Name
Teilformular subform Benutzerdefinierter Name
Ausschlussgruppe exclgroup Benutzerdefinierter Name
Zeichenelement draw Benutzerdefinierter Name
Feld field Benutzerdefinierter Name
Beschriftung caption nicht vorhanden
Widget Widget Vom Widget-Entwickler definiert (Informationen zu benutzerdefinierten Widgets finden Sie im folgenden Abschnitt)

CSS-Klassen für verschiedene Felder

Der AEM Forms Designer unterstützt unterschiedliche Typen von Feldern in einem Formular wie NumericField, DecimalField und DateField. All diese Felder enthalten in HTML die oben genannten CSS-Klassen. Je nach Typ des Feldes 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üpfte 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 input type=text
DateTimeField textfield textField textfieldwidget input type=text
DecimalField numericfield numericInput numericfieldwidget input type=text
DropDown choicelist dropDownListWidget choicelistwidget select
ListBox choicelist listBoxWidget choicelistwidget ol
NumericField numericfield numericInput numericfieldwidget input type=text
PasswordField passwordfield defaultWidget passwordfieldwidget input type=password
RadioButton radiofield XfaCheckBox radiofieldwidget input type=radio
TextField textfield textField textfieldwidget input type=text
TimeField textfield textField textfieldwidget input type=text

CSS-Klassen für verschiedene Zeichenelemente

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 Zeichnenelement ist mit einer draw-Klasse verknüpft.
Zeichentyp
CSS-Klasse
Text
text
Bild
image
Rechteck
rectangle
Linie
Zeile

Gestalten des Stils anderer Formularteile

Neben dem Erscheinungsbild der Komponenten der Benutzeroberfläche im HTML-Formular können Sie 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 außer Kraft gesetzt 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 außer Kraft gesetzt werden.
Styling Fields with Validation Errors
Wenn die Überprüfung eines Feldes fehlschlägt, wird der Stil des Widgets geändert. This style change is done by applying a CSS class widgetError on the widget component. To modify the default styling, override the widgetError class.