Comment utiliser le masque de saisie sur les champs de votre formulaire

Le masque de saisie peut sembler superflu au premier abord, mais il se révèle particulièrement utile dans de nombreux cas, notamment pour encadrer et valider des entrées selon un format précis, par exemple pour une date personnalisée, un nombre ou un numéro de téléphone.

Watch on youtube

Input masking in online forms

Pour bien démarrer, examinons deux scénarios distincts.

Scénario de masquage de saisie n° 1

Pour ce premier cas, utilisez un simple champ Texte court (zone de texte). Si ce n’est pas déjà fait, ajoutez-en un à votre formulaire. Pour accéder à l’option de masque de saisie, procédez comme suit :

1. Cliquez sur l’élément Texte court.
2. Sur le côté droit de l’élément, cliquez sur l’icône d’engrenage pour ouvrir le volet Propriétés de texte court.
3. Cliquez sur l’onglet Options.
4. Dans le bas, accédez à la section Masque de saisie et assurez-vous de l’activer.

Avec le masquage de saisie, vous utilisez uniquement trois caractères HTML, détaillés juste sous l’option correspondante :

@  =   Masque les lettres

#    =   Masque les chiffres et nombres

*    =   Masque les lettres, les chiffres et les nombres

En pratique, le masque de saisie vous donne un contrôle précis sur les données saisies, en limitant les entrées aux formats définis.

Si cela reste abstrait, les exemples ci-dessous permettent de mieux comprendre son fonctionnement.

Exemple A :

Dans cet exemple, supposons que vous souhaitez saisir des noms de villes commençant « St » (Saint), comme « St Augustine ». Le masque de saisie correspondant serait alors : “@@ @@@@@@@@@“.

Dans le générateur :

Sur le formulaire :

Vous pouvez même inclure le « St » dans le masque si vous le souhaitez :

Exemple B :

Prenons maintenant un autre cas, où vous souhaitez afficher une série de chiffres espacés, sous la forme : “# # # # #“.

Dans le générateur :

Sur le formulaire :

Exemple C :

Vous pouvez utiliser un masque numérique pour créer des formats de date personnalisés, surtout quand les options standard ne répondent pas à vos besoins, par exemple : “##/##/####“.

Dans le générateur :

Sur le formulaire :

Exemple D :

Ces quatre exemples sont utiles, mais que faire si vous avez besoin d’un peu plus de précision, sans pour autant demander trop d’informations. Par exemple, si vous souhaitez uniquement collecter l’adresse de rue d’une entreprise ?

Dans ce cas, vous pouvez combiner les deux types de masques en utilisant à la fois @ et #, ce qui pourrait donner un format du type : “#### @@@@@@@@@ @@“.

Dans le générateur :

Sur le formulaire :

Exemple E :

N’oubliez pas non plus que vous pouvez autoriser à la fois lettres et chiffres tout en gardant un certain contrôle grâce à la troisième option, le symbole * (astérisque). Le masque pourrait alors prendre une forme comme celle-ci : “** ** **** ** ***“.

Dans le générateur :

Sur le formulaire :

Exemple F :

Mais que faire si aucun des exemples précédents ne correspond à votre besoin. Par exemple dans des contextes plus structurés comme l’administration, le juridique ou l’industrie automobile ?

Vous pouvez aller plus loin en segmentant les caractères pour créer un format précis et systématique, par exemple : “#@-#**#-#@“.

Dans le générateur :

Sur le formulaire :

Exemple G :

Certains des exemples ci-dessus reposent sur des masques de saisie fixes. Mais que faire si vous souhaitez permettre aux utilisateurs de saisir des caractères sans les rendre tous obligatoires ? Par exemple, pour un numéro d’adhérent se terminant par un ou deux caractères.

Vous pouvez configurer le masque de saisie de cette façon : “@@-#####-@[@]“. Comme vous pouvez le constater, les crochets [ ] permettent de définir un caractère optionnel.

Dans le générateur :

Sur le formulaire :

Maintenant, abordons cela d’une manière différente en utilisant le deuxième scénario pour un champ de téléphone.

Scénario de masquage de saisie n° 2

Bien sûr, l’utilisation du masquage de saisie est pratique, mais que faire si vous êtes un fournisseur d’annuaires téléphoniques à la recherche de numéros 07 à répertorier, ou si vos utilisateurs ont des numéros de téléphone étrangers, par exemple ?

Dans de tels cas, le masque de saisie sur un champ de téléphone serait tout aussi utile pour vous permettre de contrôler la manière dont les numéros de téléphone sont saisis et utilisés.

Exemple A :

Pour ce premier exemple, reprenons depuis le début, mais en ajoutant cette fois un champ Téléphone. Vous pouvez accéder à l’option de masque de saisie de la même manière que décrite précédemment dans ce guide.

Vous remarquerez cette fois-ci que vous ne pouvez utiliser qu’un masque numérique avec le caractère #. Vous verrez également que le champ de numéro de téléphone par défaut passe de deux champs à un seul, prérempli avec le format : “(###) ###-####“.

Dans le générateur :

Sur le formulaire :

Exemple B :

Maintenant, si vous souhaitez utiliser cela pour des numéros 1-800 avec un numéro de téléphone, vous pouvez le configurer comme suit : “1-(8##)-###-####“. Cela permettra à vos utilisateurs de savoir quel type d’information est requis.

Dans le générateur :

Sur le formulaire :

Exemple C :

Prenons un autre exemple. Supposons que vous prévoyiez de lancer un programme d’appels de sensibilisation en Australie. Vous auriez besoin de collecter des numéros de téléphone conformes à ce format. Pour cela, vous pouvez utiliser le masquage de saisie suivant : “+(##)#########“. Cependant, vous pouvez formater le masque en fonction du pays spécifique si vous vous trouvez dans un autre pays.

Dans le générateur :

Sur le formulaire :

Nous espérons sincèrement que cela vous aidera à mieux comprendre l’utilisation du Masque de saisie.

N’hésitez pas à expérimenter cette option. Si vous avez des suggestions, des commentaires ou des questions, n’hésitez pas à ajouter vos commentaires ci-dessous ou à poser vos questions sur la page de notre Centre d’aide.