[]{class="badge informative"}

Définir la disposition des formulaires web defining-web-forms-layout

Créer des conteneurs creating-containers

Les conteneurs permettent de regrouper les champs d’une page et d’en paramétrer la mise en page. Ils permettent d’organiser les éléments dans la page.

Pour chaque page du formulaire, les conteneurs sont créés à partir du bouton Conteneurs de la barre d’outils.

Utilisez un conteneur pour regrouper des éléments de la page sans ajouter de libellé dans le rendu final.Les éléments sont regroupés dans la sous-arborescence du conteneur.Les conteneurs standards vous permettent de gérer la disposition.

Par exemple :

La position des libellés est appliquée aux éléments placés sous le conteneur dans la hiérarchie.Elle peut être surchargée pour chaque élément si nécessaire.Ajoutez ou supprimez des colonnes pour modifier la disposition.Voir Placer les champs de la page.

Dans l’exemple ci-dessus, le rendu sera le suivant :

Placer les champs de la page positioning-the-fields-on-the-page

La mise en page du formulaire web est définie page par page, pour chaque conteneur et peut être surchargée si nécessaire.

Les pages sont organisées en colonnes : chaque page contient un certain nombre de colonnes. Chaque champ de la page occupe n cellules. Les conteneurs s’étendent eux aussi sur un certain nombre de colonnes et les champs qu’ils contiennent s’étendent sur un certain nombre de cellules.

Par défaut, les pages sont construites sur une seule colonne et chaque élément occupe une cellule.Ainsi, les champs sont affichés les uns en dessous des autres, chacun occupant toute la ligne, comme ci-dessous :

Dans l’exemple suivant, la configuration par défaut a été conservée.La page occupe une seule colonne qui comprend quatre conteneurs.

Chaque conteneur s’étend sur une colonne et chaque élément occupe une cellule :

Le rendu est le suivant :

Vous pouvez adapter les paramètres d’affichage pour obtenir le rendu suivant :

Dans l’exemple de rendu ci-dessus, chaque zone de saisie, chaque titre et chaque image occupent une seule cellule dans les colonnes des conteneurs.

Vous pouvez modifier la mise en forme dans chaque conteneur.Dans notre exemple, vous pouvez passer le contenu du conteneur 4 sur deux colonnes et répartir les éléments.

Le titre et la liste occupent une cellule chacun (et donc une ligne entière du conteneur) et la case à cocher s’étend sur deux cellules. Le nombre de cellules attribuées au champ de saisie est défini dans l’onglet Général ou l’onglet Avancé , en fonction du type de champ :

Définir la position des libellés defining-the-position-of-labels

Vous pouvez définir l’alignement des champs et des libellés du formulaire.

Par défaut, les paramètres d’affichage des champs et autres contenus de la page sont hérités du paramétrage général du formulaire, le paramétrage de la page ou celui du conteneur parent, s’il existe.

Les paramètres d’affichage globaux pour tout le formulaire sont indiqués dans la boîte de propriétés du formulaire. L’onglet Rendu permet de sélectionner la position des libellés.

Cette position peut être surchargée au niveau de chaque page, puis de chaque conteneur et enfin au niveau de chaque champ, à partir de l’onglet Avancé.

Les alignements supportés sont les suivants :