### [Comment limiter la plage autorisée dans le champ Numéros](https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/) **Publié le :** 27 octobre 2020 **Auteur :** Umair Majeed **Extrait :** Ce tutoriel vous montrera comment limiter la plage pour un champ Numéros. **Contenu :** Souhaitez-vous limiter la plage autorisée dans le champ Numéros avec WPForms ? Il existe plusieurs façons de définir des valeurs minimales et maximales pour la saisie numérique. Ce tutoriel vous présentera les méthodes disponibles pour implémenter des limites de plage dans vos formulaires. ## Configuration du formulaire Commençons par créer notre formulaire et y intégrer le champ **Numéros**. Si vous avez besoin d’aide pour créer votre formulaire, [veuillez consulter cette documentation pour des instructions étape par étape](https://wpforms.com/docs/creating-first-form/ "Créer votre premier formulaire"). ## Configuration des limites de plage de base Le champ Numéros inclut des contrôles de plage dans le panneau Options du champ. Entrez simplement vos valeurs minimale et maximale dans les champs **Plage** pour restreindre la saisie de l’utilisateur. Pour plus de détails sur les fonctionnalités du champ Numéros, consultez notre guide sur [l’utilisation du champ Numéros](https://wpforms.com/docs/using-the-numbers-field). ## Mise en œuvre de contrôles de plage avancés Pour des exigences spécialisées telles que l’application de nombres pairs ou de messages de validation personnalisés, vous pouvez utiliser JavaScript pour implémenter des contrôles de plage personnalisés. Si vous avez besoin d’aide pour ajouter des extraits de code, veuillez vous référer à ce guide sur [l’ajout de code personnalisé dans WordPress](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). ### Ajout de la classe CSS Tout d’abord, nous allons ajouter une classe CSS au champ pour nous assurer que chaque fois qu’il y a un champ **Numéros** avec cette classe particulière, cet extrait de code sera activé. Pour ajouter une classe CSS à un champ, ouvrez le constructeur de formulaire, cliquez sur **Numéros** pour ouvrir le panneau **Options du champ**. Ensuite, cliquez sur **Avancé** et dans les **Classes CSS**, ajoutez `wpf-num-limit` . ### Ajout de l’extrait de code Maintenant, intégrons l’extrait. Cet extrait particulier applique une valeur minimale de **5** et une valeur maximale de **20** à tout champ **Numéros** comportant une classe CSS nommée `wpf-num-limit`. ``` /** * Limiter la plage de nombres autorisée pour un champ Numéros * Appliquez la classe "wpf-num-limit" au champ pour l’activer. * * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/ */ function wpf_dev_num_limit() { ?> **Catégories :** Champs **Tags :** Javascript, JS ---