Vous consultez actuellement l'aide de la version:

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 nom 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
Dessin draw Nom défini par l’utilisateur
Champ field Nom défini par l’utilisateur
Légende caption ND
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
ND 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

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

Style des erreurs en ligne

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.

Style des avertissements en ligne

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.

Style des champs contenant des erreurs de validation

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne