Créer des styles CSS pour des formulaires HTML5

Le rendu HTML5 d’un modèle de formulaire XFA comporte 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.

REMARQUE

Dans les classes CSS, ne modifiez pas les attributs de position et de taille, tels que la largeur, la hauteur, l’épaisseur de la bordure, le haut, la gauche, la droite, le bas, le remplissage et la marge. Modifier les attributs de position et de taille modifie la disposition du formulaire.

Classes CSS pour les éléments

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.

Le type classe représente le type du champ XFA. Vous pouvez remplacer la classe type pour modifier les styles de tous les éléments d’un type donné.
Le nom de classe correspond au nom du champ XFA. Vous pouvez remplacer la classe name pour modifier un élément et lui appliquer un style personnalisé.

REMARQUE

certains éléments de XFA n’ont pas de nom. Pour modifier les styles de ces composants, modifiez tous les éléments de ce type particulier.

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.

Elément de champ

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

Elément widget

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

Widget : chaque widget comporte cette classe.
nom : tous les widgets fournis avec AEM contiennent la classe de nom widget. Pour les widgets personnalisés, le développeur de widgets fournit la classe de nom Widget.
type : chaque widget comporte un élément d’interface utilisateur. Cette classe définit le type de l’élément d’interface utilisateur.

<!--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 les classes type et name, le composant de champ contient également une autre classe CSS nommée subtype. Un sous-type identifie le type du 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

Composant	Type	Nom
Page	page	Nom défini par l’utilisateur ou Page<pageNumber> (valeur par défaut)
Zone de contenu	contentarea	Nom défini par l’utilisateur
Sous-formulaire	sous-formulaire	Nom défini par l’utilisateur
Groupe d’exclusion	exclgroup	Nom défini par l’utilisateur
Draw	draw	Nom défini par l’utilisateur
Champ	field	Nom défini par l’utilisateur
Légende	caption	s.o.
Widget	widget	Le développeur du widget le définit (pour les widgets définis par l’utilisateur, voir le tableau de la section suivante)

Classes CSS des différents champs

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 au format HTML contiennent les classes CSS mentionnées ci-dessus. Ils contiennent également certaines classes supplémentaires selon le type de zone.

Chaque champ contient un widget associé qui représente 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.

Type de champ	Sous-type	Nom du widget	Type de widget	Balise d’interface utilisateur HTML
Bouton	s.o.	xfaButton	buttonfieldwidget	input type=button
CheckButton	checkboxfield	XfaCheckBox	checkboxfieldwidget	input type=checkbox
DateField	datefield	dateField	datefieldwidget	inputtype = text
DateTimeField	textfield	textField	textfieldwidget	inputtype = text
DecimalField	numericfield	numericInput	numericfieldwidget	inputtype = text
DropDown	choicelist	dropDownListWidget	choicelistwidget	select
ListBox	choicelist	listBoxWidget	choicelistwidget	ol
NumericField	numericfield	numericInput	numericfieldwidget	inputtype = text
PasswordField	passwordfield	defaultWidget	passwordfieldwidget	input type=password
RadioButton	radiofield	XfaCheckBox	radiofieldwidget	input type=radio
TextField	textfield	textField	textfieldwidget	inputtype = text
TimeField	textfield	textField	textfieldwidget	inputtype = text

Classes CSS des différents éléments de dessin

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

Type de dessin	Classe CSS
Texte	text
Image	image
Rectangle	rectangle
Ligne	line

Style des autres parties du formulaire

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 aboutit à une erreur, une erreur en ligne est affichée lorsque le champ est actif. Pour modifier le style des erreurs en ligne, remplacez l’ID CSS error-msg.

Styling Inline Warnings

Lorsque la validation d’un champ résulte en un avertissement, un avertissement en ligne s’affiche lorsque le champ est actif. Pour modifier le style de ces avertissements en ligne, 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.