Créer des styles CSS pour des formulaires HTML5 creating-css-styles-for-html-forms

Le rendu HTML5 d’un modèle de formulaire basé sur XFA se compose de plusieurs éléments HTML. Ces éléments sont organisés dans un ordre. Chaque élément comporte des classes CSS bien définies. Vous pouvez utiliser cette classe CSS pour sélectionner et modifier l’apparence d’un élément.

Classes CSS pour les éléments  css-classes-nbsp-for-elements-nbsp

Chaque élément contient des classes CSS bien définies. Vous pouvez modifier ces classes pour modifier l’apparence d’un élément. Chaque élément, à l’exception des éléments de champ et de dessin, comporte deux classes CSS – Type et Nom.

Pour les pages non mentionnées dans AEM Forms Designer, les pages d’un formulaire HTML5 sont nommées dans l’ordre croissant de leur numéro. Par exemple, pour un formulaire HTML5 comportant deux pages, les pages sont nommées Page1 et Page2.

Élément de champ field-element

L’élément de champ contient deux éléments imbriqués : widget et légende.

Élément widget

L’élément widget contient l’élément d’interface utilisateur pour l’interaction avec les utilisateurs et les utilisatrices. Il a trois classes CSS :

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

Outre la classe de type et de nom, le composant de champ contient également une classe CSS supplémentaire nommée subtype. Un sous-type identifie le type de champ, par exemple NumericField, DateField, TextField. Vous pouvez remplacer la classe subtype pour modifier le style de tous les champs de type sous-type.

Classes CSS des différents composants css-classes-for-different-components

Classes CSS pour différents champs css-classes-for-different-fields

AEM Forms Designer prend en charge différents types de champs d’un formulaire, tels que NumericField, DecimalField et le champ Date. Tous ces champs en HTML contiennent les classes CSS mentionnées ci-dessus. Elles contiennent également des classes supplémentaires en fonction du type de champ.

Chaque champ est associé à un widget représentant l’élément de l’interface utilisateur. Les classes de chaque champ et les widgets associés à chaque champ sont répertoriés ci-dessous.

Classes CSS des différents éléments de dessin css-classes-for-different-draw-elements

Vous pouvez insérer des éléments statiques de dessin comme un texte et des images à l’aide d’AEM Forms Designer. Une classe CSS distincte est associée à chaque élément de dessin. La liste des classes CSS pour les éléments de dessin est détaillée ci-dessous. Chaque élément de dessin est associé à une classe de dessin.

Modifier le style des autres parties du formulaire styling-other-parts-of-the-form

Outre l’aspect des composants de l’interface utilisateur dans le formulaire HTML, vous pouvez modifier le style des éléments comme les erreurs en ligne, les avertissements en ligne et les champs contenant des erreurs de validation.

Styling Inline Errors

Lorsque la validation d’un champ génère une erreur, une erreur intégrée s’affiche lorsque le champ est actif. Pour modifier le style des erreurs intégrées, remplacez l’ID CSS error-msg.

Styling Inline Warnings

Lorsque la validation d’un champ génère un avertissement, un avertissement intégré s’affiche lorsque le champ est actif. Pour modifier le style de ces avertissements intégrés, remplacez l’ID CSS warning-msg.

Styling Fields with Validation Errors

Lorsque la fonction de validation d’un champ échoue, le style du widget change. Cette modification du style est effectuée en appliquant une classe CSS widgetError au composant widget. Pour modifier le style par défaut, remplacez la classe widgetError.