Show Menu
SUJETS×

Création de 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.
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. You can override the name class to modify and apply custom style to an element.
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 comporte trois classes CSS :
  • Widget : Chaque widget a cette classe.
  • name : Tous les widgets fournis avec AEM contiennent la classe de nom du 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 Name (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
Field (Champ) field Nom défini par l’utilisateur
Légende caption N/A
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 N/A 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
Text (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 tels que 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. This style change is done by applying a CSS class widgetError on the widget component. To modify the default styling, override the widgetError class.