Les commandes de la Section Style

Étape 4 - Pages > Objet Formulaire de Contact >

Les commandes de la Section Style

Previous pageReturn to chapter overviewNext page

Les commandes permettent de définir certains paramètres graphiques du formulaire de Contact que vous êtes en train de créer.

Vous devez, tout d'abord, sélectionner l'Élément du formulaire sur lequel vous voulez travailler : pour cela, utilisez le menu à liste déroulante ou cliquez directement sur l'élément dans la fenêtre Aperçu.

Voici les éléments sur lesquels vous pouvez agir :

Étiquettes : c'est le texte qui décrit le champ où vous pouvez taper l'information requise ou le texte de la question à poser.

Champs : c'est le cadre où l'utilisateur pourra saisir l'information requise.

Boutons 'Envoyer' : ces boutons sont insérés automatiquement au bas du formulaire de Contact. Ils servent, respectivement, à envoyer toutes les données entrées dans les champs et à supprimer les valeurs éventuellement présentes dans les champs

Description de champ et validation: il s'agit de messages donnant des informations supplémentaires sur la manière de remplir les champs, invitant à corriger une donnée saisie ou invitant à remplir un champ obligatoire.

En fonction de l'élément du formulaire sélectionné, vous pouvez agir sur les différentes options de la section Style:

Pour l’élément Étiquettes les options disponibles sont les suivantes :

Police  : spécifie le type de Police, le Style et la taille du texte. La liste déroulante propose toutes les polices présentes sur l'ordinateur, la commande pour appliquer la Police par défaut (définie par le Style de l’élément Texte de la page dans la fenêtre Style du texte) ; la liste des Polices sécurisées, c'est-à-dire des polices présentes sur tous les dispositifs et qui ne requièrent aucune publication,  tous les Google Fonts et les Polices Web ajoutés à l’aide de la fenêtre Ajouter des polices web rappelée par la commande Autres types de caractère.
Couleur  : permet d'indiquer la couleur à utiliser pour le texte.
Disposition  : définit l’emplacement de l'Étiquette par rapport au Champ. Vous pouvez choisir entre trois options : Afficher les étiquettes au-dessus des champs, Afficher les étiquettes à l'intérieur des champs et Afficher les étiquettes à gauche des champs. Si vous choisissez de placer les Étiquettes à gauche des Champs, vous pouvez définir la (%) largeur , c’est-à-dire le pourcentage de l'espace de la ligne qui devra etre occupé par l’Étiquette, et Alignement du texte de l’Étiquette.

Pour l’élément Champs, en revanche, les options disponibles sont les suivantes :

Bordure : spécifie l’épaisseur des bords et le facteur d’arrondissement des angles, même séparément.
Marge  : configure les valeurs en pixels des marges internes appliquées au texte des champs du formulaire.
Ombre portée : applique une ombre à l’intérieur des champs pour donner une impression de profondeur.
Couleurs : une fois défini l’élément sur lequel travailler (Champ, Champ sur sélection, Champ sur erreur), configure les couleurs à utiliser pour le Fond, le Texte et la Bordure.

Pour l’élément Boutons 'Envoyer' les options disponibles sont les suivantes :

Contenu  : spécifie le texte qui doit s’afficher dans le Bouton d’Envoi, au lieu du texte prévu par défaut.
Police  : spécifie le type de Police, le Style et la taille du texte. La liste déroulante propose toutes les polices présentes sur l'ordinateur, la commande pour appliquer la Police par défaut (définie par le Style de l’élément Texte de la page dans la fenêtre Style du texte) ; la liste des Polices sécurisées, c'est-à-dire des polices présentes sur tous les dispositifs et qui ne requièrent aucune publication,  tous les Google Fonts et les Polices Web ajoutés à l’aide de la fenêtre Ajouter des polices web rappelée par la commande Autres types de caractère.
Couleur de texte  / Couleur d'arrière-plan  : spécifient les couleurs à utiliser pour le texte et pour l'arrière-plan du texte des boutons.
Bordure : spécifie la couleur et l’épaisseur des bords et le facteur d’arrondissement des angles des boutons.
Marge  : configure les valeurs en pixels des marges internes appliquées au texte des boutons.
Image d'arrière-plan  : sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan.
Alignement : spécifie l’alignement des boutons insérés, en choisissant entre Gauche, Centre et Droite.

Enfin, pour l’élément Description de champ et validation les options disponibles sont les suivantes :

Fichier icône Description de champ  : importe un fichier graphique (format .JPG, .GIF et .PNG) à utiliser comme icône associée au Champ pour indiquer la disponibilité d’informations supplémentaires.
Afficher la description sur la sélection de champ : en activant cette option, le message contenant les informations supplémentaires s’affiche automatiquement dès que l’on clique dans le Champ.
Si une erreur survient au cours de la validation des données  : définit comment doit s’afficher le message prévu lorsqu’un Champ n’a pas été rempli correctement ou, si le champ est Obligatoire, lorsqu’il n’a pas été rempli. Vous pouvez choisir parmi l’une des options suivantes : Afficher la fenêtre de dialogue du navigateur, Afficher la fenêtre contextuelle interne ou Afficher le Conseil à côté du champ invalide.