Champ numérique
Collectez des nombres avec précision et élégance. Des simples champs numériques aux curseurs interactifs avec mise en forme monétaire, le champ Nombre offre validation, mise en forme et une expérience utilisateur optimale.
Collecte intelligente de numéros avec validation intégrée
Parfait pour:
Des fonctionnalités puissantes pour chaque cas d'utilisation
🎯 Contrôle de validation précis
Limites min/max
Définissez les valeurs minimale et maximale autorisées. Empêchez les saisies invalides avant la soumission grâce à la validation intégrée du navigateur.
Contrôle de la taille des pas
Définissez les valeurs d’incrément – nombres entiers (1), demi-pas (0.5) ou décimales précises (0.01) pour la devise.
Exemples :
- Champ Âge : Min. 18, Max. 100, Pas 1
- Champ Prix : Min 0, Max 10000, Pas 0.01
- Évaluation : min. 1, max. 5, pas de 0.5
💰 Formatage intelligent des nombres
Options de formats multiples :
- Nombre simple – Saisie numérique simple (123)
- Monnaie – Argent avec symboles (123.00 $, 123.00 €, 123.00 £)
- Pourcentage – Ajout automatique du symbole % (85 %)
- Décimal – Nombre fixe de décimales (123.45)
Symboles monétaires personnalisés
Prise en charge de toutes les devises : $, €, £, ¥, ₹ et plus encore – idéal pour les formulaires internationaux.
Précision décimale
Contrôlez le nombre de décimales de 0 à 4 chiffres pour des calculs précis.
Mode curseur interactif
Sélection visuelle des nombres
Transformez les champs numériques en élégants curseurs. Les utilisateurs font glisser le curseur pour sélectionner des valeurs – idéal pour les notes, les plages de valeurs et les préférences.
Apparence personnalisable
- Choisissez la couleur du curseur pour qu'elle corresponde à votre marque.
- Afficher/masquer l'affichage de la valeur actuelle
- Animations et transitions fluides
Idéal pour:
- Évaluation de la satisfaction (1-10)
- Fourchettes budgétaires (0 $ à 5000 $)
- sélecteurs d'âge
- Niveaux de priorité
- Toute sélection de gamme
🔀 Logique conditionnelle
Visibilité intelligente du terrain
Afficher ou masquer ce champ numérique en fonction des valeurs des autres champs. Créer des formulaires dynamiques qui s'adaptent aux saisies de l'utilisateur.
Règles de logique avancée :
- Logique ET – Toutes les conditions doivent être remplies
- Logique OU – Toute condition peut déclencher l'action
- 8 opérateurs : égal, différent de, supérieur à, inférieur à, contient, est vide, et plus encore.
Cas d'utilisation:
- Afficher le nombre d'invités uniquement si la case « Amener des invités ? » est cochée.
- Afficher « Fourchette de budget » lorsque le type de service est égal à « Premium ».
- Masquer le « code de réduction » lorsque le total de la commande est inférieur à 50 $
- Afficher les options soumises à une restriction d'âge lorsque l'âge est supérieur à 1 an
🎨 Personnalisation complète
- Classes CSS personnalisées
- Mode champ caché
- Entrées optimisées pour les appareils mobiles
- Prise en charge de l'accessibilité
- Intégration avec toutes les fonctionnalités du formulaire
- Pas de mesure, valeur initiale
- Valeur minimale/maximale autorisée
- Champ caché, valeur cachée
⚙️ Configuration intelligente
Les valeurs par défaut
Préremplissez les champs avec des nombres de départ pour guider les utilisateurs ou accélérer la saisie.
Texte d'espace réservé
Afficher des indications utiles telles que « Saisissez la quantité » ou « Votre âge » avant que les utilisateurs ne commencent à saisir du texte.
Texte d'aide
Ajoutez des descriptions pour préciser les chiffres à saisir.
Installation simple en 3 étapes
Préparez votre champ déroulant en quelques minutes.
Ajouter le champ numérique
Faites glisser le champ « Nombre » depuis la section « Champs de base » vers votre formulaire.
Définir les règles de validation
Configurez les valeurs minimales et maximales, la taille du pas et la valeur initiale pour contrôler les nombres que les utilisateurs peuvent saisir.
Choisir le format et le style
Choisissez le format : texte brut, devise, pourcentage ou décimal. Vous pouvez activer le mode curseur pour une sélection visuelle.
🎉 Et voilà ! Votre champ numérique est prêt avec une validation et une mise en forme intelligentes.
Applications du monde réel
Commerce électronique et commandes
- sélecteurs de quantité de produits
- Filtres de gamme de prix
- entrées de pourcentage de remise
- Nombre d'articles et totaux
Sondages et évaluations
- Scores de satisfaction (1-10)
- Nombre d'étoiles
- Classements par priorité
- Échelles de vraisemblance
Fitness et santé
- Suivi du poids
- Mesures de taille
- Répétitions de l'exercice
- Calculateurs d'IMC
Réservations
- Nombre d'invités/participants
- Quantité de pièces
- Durée en heures/jours
- Taille de la fête
Les formulaires de demande
- Verification de l'AGE
- Années d’expérience
- Attentes salariales
- Gammes budgétaires
Affaires et finances
- apports de revenus
- Montants d'investissement
- Pourcentages de retour sur investissement
- Taux de commission
Options complètes pour le terrain
Configuration de base
- Étiquette de champ – Le titre affiché au-dessus du champ numérique
- Texte descriptif/d'aide – Conseils supplémentaires pour les utilisateurs
- Champs requis – Rendre la saisie des numéros obligatoire
- Texte d'espace réservé – Afficher un texte d'indication avant que les utilisateurs saisissent un nombre
Paramètres de validation
- Valeur minimale autorisée (Min) – Plus petit nombre acceptable
- Valeur maximale autorisée (Max) – Nombre maximal acceptable
- Taille de pas – Valeur d'incrément (1, 0.5, 0.01, etc.)
- Valeur de départ – Numéro par défaut prérempli
Nombre formatage
- Format d'affichage
- Nombre simple
- Monnaie (avec symbole)
- Pourcentage (%)
- Décimal (chiffres fixes)
Symbole de la monnaie – $, €, £, ¥, ₹ (lorsque le format est « Monnaie »)
Places décimales – 0, 1, 2, 3 ou 4 chiffres (lorsque le format est décimal)
Options du curseur
- Afficher sous forme de diaporama – Activer le mode curseur interactif
- Couleur du curseur – Sélecteur de couleurs personnalisé pour le branding
- Afficher le nombre à côté du curseur – Afficher la valeur actuelle
logique conditionnelle
- Activer la logique conditionnelle – Afficher/masquer selon les conditions
Type de logique- Toutes les conditions doivent être remplies (ET)
- Toute condition peut être remplie (OU)
- Règles de condition
- Afficher / Masquer – Mesures à prendre
- Champ – Quel champ vérifier
- Opérateur – Égal à, Différent de, Contient, Supérieur à, Inférieur à, Est vide, N'est pas vide
- Valeur – Valeur comparative
- Conditions multiples – Ajouter un nombre illimité de règles
options avancées
- Mode champ caché – Utiliser comme champ caché avec une valeur prédéfinie
- Classes CSS personnalisées – Appliquer un style personnalisé
- Attributs d'accessibilité – Étiquettes et descriptions ARIA
Pourquoi choisir notre champ numérique ?
✅ Ciblage – La validation exacte des valeurs minimales et maximales empêche les entrées invalides.
✅ Flexible – Plusieurs formats pour chaque cas d'utilisation
✅ Visuel – Le mode curseur crée des interactions attrayantes
✅ Smart – La logique conditionnelle crée des formulaires dynamiques
✅ Convivial – Des messages de validation clairs guident les utilisateurs
✅ Professionel – Formatage intégré des devises et des pourcentages
✅ Mobile optimisé – Claviers numériques parfaits sur appareils mobiles
✅ Entièrement synchronisé – Fonctionne parfaitement avec toutes les fonctionnalités du formulaire
Questions fréquemment posées
Q : Quelle est la différence entre Min/Max et la validation ?
A : Les paramètres Min/Max permettent une validation instantanée au niveau du navigateur. Les utilisateurs ne peuvent pas soumettre de nombres invalides, ce qui rend les formulaires sans erreur et conviviaux.
Q : Puis-je utiliser des nombres décimaux ?
R : Oui ! Définissez la valeur du pas pour contrôler le nombre de décimales. Utilisez 0.01 pour les devises (prix), 0.1 pour une décimale, ou toute autre valeur personnalisée.
Q : Comment fonctionne le curseur sur mobile ?
A: Les curseurs sont optimisés pour le tactile et fonctionnent parfaitement sur les appareils mobiles.
Q : Puis-je collectionner les nombres négatifs ?
R : Absolument ! Définissez une valeur minimale négative (par exemple, Min : -100, Max : 100) pour autoriser les nombres négatifs.
Q : Quels symboles monétaires sont pris en charge ?
A: N'importe quel symbole ! Saisissez $, €, £, ¥, ₹ ou tout symbole personnalisé jusqu'à 3 caractères.
Q : Puis-je utiliser une logique conditionnelle basée sur des comparaisons numériques ?
A : Oui ! Utilisez des opérateurs comme « Supérieur à », « Inférieur à » et « Égal à » pour créer une logique basée sur des valeurs numériques.
Q : Comment créer un champ de pourcentage ?
A : Sélectionnez « Pourcentage (%) » comme format d’affichage. Le symbole % apparaît automatiquement et les utilisateurs saisissent des valeurs comprises entre 0 et 100.
Q : Puis-je changer la couleur du curseur ?
R : Oui ! Lorsque le mode curseur est activé, vous pouvez choisir n'importe quelle couleur à l'aide du sélecteur de couleurs.
Q : Que se passe-t-il si les utilisateurs saisissent des nombres en dehors de la plage autorisée ?
A : La validation du navigateur interrompt la soumission et affiche un message d'erreur tel que « La valeur doit être comprise entre 1 et 100 ».
Q : Puis-je utiliser le champ numérique pour des calculs ?
R : Oui ! Les valeurs des champs numériques fonctionnent dans les comparaisons conditionnelles et dans les calculs lors du traitement de vos formulaires.
Q : Quel est le degré de précision maximal des nombres décimaux ?
A : Vous pouvez définir le nombre de décimales de 0 à 4 chiffres, et les valeurs d'incrément peuvent être aussi précises que nécessaire (par exemple, 0.001).
