Erstellen von CSS-Stilen für HTML5-Formulare

Letzte Aktualisierung: 15. Juli 2024
  • Themen:

Erstellt für:

  • Admin
  • Benutzende
  • Entwickler

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.

NOTE
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 sowie für andere Positions- und Größenattribute nicht geändert werden. Änderungen an den Positions- und Größenattributen ziehen Änderungen am Layout des Formulars nach sich.

CSS-Klassen für Elemente

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

KomponenteTypName
SeitepageBenutzerdefinierter Name
oder
Seite<Seitenzahl> (Standard)
InhaltsbereichcontentareaBenutzerdefinierter Name
TeilformularTeilformularBenutzerdefinierter Name
AusschlussgruppeexclgroupBenutzerdefinierter Name
DrawdrawBenutzerdefinierter Name
FeldfieldBenutzerdefinierter Name
captioncaptionnicht vorhanden
WidgetwidgetVon der Entwicklerin bzw. dem Entwickler des Widgets 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 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.

FeldtypUntertypWidget-NameWidget-TypHTML-Benutzeroberflächen-Tag
Schaltflächenicht vorhandenxfaButtonbuttonfieldwidgetinput type=button
CheckButtoncheckboxfieldXfaCheckBoxcheckboxfieldwidgetinput type=checkbox
DateFielddatefielddateFielddatefieldwidgetinputtype = text
DateTimeFieldtextfieldtextFieldtextfieldwidgetinputtype = text
DecimalFieldnumericfieldnumericInputnumericfieldwidgetinputtype = text
DropDownchoicelistdropDownListWidgetchoicelistwidgetauswählen
ListBoxchoicelistlistBoxWidgetchoicelistwidgetol
NumericFieldnumericfieldnumericInputnumericfieldwidgetinputtype = text
PasswordFieldpasswordfielddefaultWidgetpasswordfieldwidgetinput type=password
RadioButtonradiofieldXfaCheckBoxradiofieldwidgetinput type=radio
TextFieldtextfieldtextFieldtextfieldwidgetinputtype = text
TimeFieldtextfieldtextFieldtextfieldwidgetinputtype = 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 Zeichenelement ist mit einer Zeichenklasse verknüpft.

ZeichentypCSS-Klasse
Texttext
Bildimage
rectanglerectangle
LineZeile

Gestalten des Stils anderer Formularteile

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.

Vorherige SeiteZugreifbare komplexe Tabellen in HTML5-Formularen erstellen
Nächste SeiteAnpassen von Fehlermeldungen für HTML5-Formulare

Experience Manager