DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ de saisie
  • Présentation du champ de saisie
  • Créer un champ de type "Champ de saisie"
  • Principales caractéristiques de l'onglet "Général"
  • Type d'un champ de saisie
  • Type et masques
  • Principales caractéristiques de l'onglet "UI"
  • Etat initial
  • Paramètres
  • Boutons intégrés à la zone de saisie
  • Principales caractéristiques de l'onglet "Détail"
  • Personnalisation du clavier alphabétique
  • Principales caractéristiques de l'onglet "Aide"
  • Afficher un texte d'indication dans un champ de saisie
  • Principales caractéristiques de l'onglet "Style"
  • Style du champ de saisie
  • Permuter un champ de saisie en champs Libellé
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation du champ de saisie
Le Champ de saisie permet à l'utilisateur de saisir directement une information. Le champ de saisie peut être aussi utilisé pour visualiser une information.

Créer un champ de type "Champ de saisie"

Pour créer un champ de type "Champ de saisie" :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
  2. Cliquez dans la fenêtre ou la page à la position où le champ doit être créé. Le champ apparaît en création.
Remarque : Il est également possible de créer un champ de saisie à partir d'une liste de champs prédéfinis livrés en standard en déroulant "Saisie". La liste des champs disponibles avec leur aperçu au gabarit du projet apparaît. Il suffit de cliquer sur le champ voulu pour le créer dans l'éditeur.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Éditeur d'états : Il est également possible de créer un champ de saisie dans un état. Pour plus de détails, consultez Saisie dans les états.
Principales caractéristiques de l'onglet "Général"

Type d'un champ de saisie

Selon le type d'information affichée ou saisie, le format d'un champ de saisie peut varier. Il est ainsi possible de créer un champ de saisie de type :
  • Texte pour afficher ou saisir une chaîne de caractères (nom, adresse, etc.).
  • Texte multiligne pour afficher ou saisir plusieurs lignes séparées par un "Retour Chariot".
  • iPhone/iPad Visualisation Markdown pour afficher des informations au format Markdown.
  • Mot de passe : lors de la saisie d'informations, tous les caractères seront remplacés par des étoiles à l'écran.
  • Numérique pour afficher ou saisir une valeur numérique (poids, etc.). Si le champ n'est pas assez grand pour afficher le chiffre en entier, les caractères "+++" sont affichés.
  • Monétaire pour afficher ou saisir des valeurs monétaires.
  • Monétaire + Euro pour gérer des prix par exemple
  • Date pour afficher ou saisir des dates.
  • Heure pour saisir ou afficher des heures.
  • Durée pour saisir ou afficher des durées.
  • Jetons de texte pour gérer une saisie avec jetons.

Type et masques

  • Masque de saisie : Pour chaque type de champ de saisie, un grand nombre de masques de saisie est utilisable.
    Ces masques de saisie sont multilingues : il est possible de sélectionner des masques de saisies différents selon la langue d'exécution du projet. Pour plus de détails, consultez Multilingue dans les champs.
    Ces masques de saisie peuvent être modifiés en programmation grâce à la propriété MasqueSaisie.
    iPhone/iPad Le clavier affiché lors de l'entrée dans le champ s'adapte automatiquement au masque de saisie sélectionné. Ainsi, le clavier numérique sera automatiquement affiché pour saisir dans un champ de saisie utilisant un masque de saisie numérique.
  • Android Masque d'affichage : Il est également possible de définir des masques d'affichage pour certains types de champs (Monétaire, Monétaire + Euro, Date, Heure et durée). Ces masques d'affichage permettent de définir les caractéristiques du champ lorsqu'il n'est pas en saisie.
    Par exemple, un champ de type Date peut avoir :
    • le masque de saisie : "JJ/MM/AAAA".
    • le masque d'affichage : "JJJJ JJ MMMM AAAA" (correspondant à la date en toutes lettres).
      Les masques d'affichage peuvent être multilingues et peuvent être modifiés par programmation grâce à la propriété MasqueAffichage.
Principales caractéristiques de l'onglet "UI"

Etat initial

L'état initial d'un champ de saisie correspond à l'état du champ lors de l'ouverture de la fenêtre ou de la page. Les états possibles sont les suivants :

Paramètres

  • WINDEV Mobile Support du Markdown : Cette option permet d'activer ou non le rendu Markdown. Pour plus de détails, consultez Gestion du Markdown.
  • Gestion de la touche TAB : Cette option permet de rendre un champ accessible ou non par la touche Tabulation. Par défaut, l'option "Accessible par TAB" est sélectionnée lors de la création d'un champ. Si le champ est accessible par la touche Tabulation, ce champ est automatiquement intégré dans l'ordre de navigation de la fenêtre. Par défaut, l'ordre de navigation correspond à l'ordre de création des champs dans la fenêtre. Pour plus de détails, consultez Ordre de navigation dans une fenêtre, une page, etc..
Nouveauté 2024
WINDEV Mobile

Boutons intégrés à la zone de saisie

Un champ de saisie peut comporter plusieurs boutons dans la zone de saisie :
  • Un bouton à gauche.
  • Un bouton à droite.
  • Un bouton de suppression.
Pour plus de détails, consultez Boutons dans la zone de saisie.
Principales caractéristiques de l'onglet "Détail"
Un champ de saisie peut :
    Un champ de saisie peut également proposer :
      AndroidiPhone/iPad

      Personnalisation du clavier alphabétique

      Dans les applications Android et iOS, lors de la saisie dans un champ texte, un clavier alphabétique apparaît automatiquement. Ce clavier permet à l'utilisateur de saisir le texte voulu.
      Ce clavier comporte un bouton en bas à droite qui peut être personnalisé :
      Pour paramétrer ce bouton :
      1. Affichez l'onglet "Détail" de la fenêtre de description du champ de saisie.
      2. Dans l'option "Bouton clavier", sélectionnez le type de bouton voulu. Selon le type sélectionné, le système affichera le bouton correspondant dans la langue en cours sur l'appareil.

        Remarque : L'ajout d'un bouton "Personnalisé" est disponible uniquement sous Android.
      3. Validez.
      L'événement associé à ce bouton peut être saisi dans l'éditeur de code. Il correspond à l'événement optionnel "Validation par le clavier". Pour plus de détails, consultez Evénements associés au champ de saisie.
      Principales caractéristiques de l'onglet "Aide"
      iPhone/iPad

      Afficher un texte d'indication dans un champ de saisie

      Le texte d'indication permet d'afficher un texte d'aide directement dans le champ de saisie vide. Ce texte d'aide s'efface automatiquement dès que l'utilisateur tape le premier caractère dans le champ.
      Exemple de texte d'indication
      Ce texte d'indication est disponible pour :
      • les champs de saisie de type texte.
      • iPhone/iPad les champs de saisie de type Numérique, Monétaire, Monétaire + Euro.
        Pour que le texte d'indication apparaisse dans les champs de type Numérique, Monétaire, Monétaire + Euro, il faut cocher l'option "Mise à blanc si zéro" (onglet "Détail" de la description du champ).
        Il est également possible d'afficher les bornes minimales et maximales du champ de saisie numérique :
        • dans le texte d'indication (option "Afficher les bornes dans le texte d'indication" de l'onglet "Détail" de la description du champ).
        • dans la bulle d'aide du champ (option "Afficher les bornes dans la bulle" de l'onglet "Détail" de la description du champ).
      La saisie du texte d'aide peut être réalisée :
      • dans la fenêtre de description du champ de saisie (onglet "Aide" en WINDEV / WINDEV Mobile et onglet "Contenu" en WEBDEV).
      • par programmation grâce à la propriété Indication.
      iPhone/iPad Le style de l'indication affichée dans le champ est paramétrable dans l'onglet "Style". Par défaut, il correspond au style de la zone de saisie, en gris et italique. Pour le modifier, il suffit de sélectionner l'élément "Texte d'indication" et de cocher l'option "Personnaliser le style du texte d'indication".
      La propriété CouleurTexteIndication permet de connaître et de modifier par programmation la couleur du texte d'indication.
      Principales caractéristiques de l'onglet "Style"

      Style du champ de saisie

      L'onglet "Style" permet de personnaliser le look de tous les éléments du champ de saisie. Les styles peuvent être appliqués à différents éléments :
      • Le libellé du champ : Il est possible de définir la police du libellé, sa position, sa couleur, ...
      • Le cadre extérieur.
      • Le texte de la zone de saisie.
      • La zone de saisie : Il est possible par exemple de définir la couleur de fond, la couleur du cadre, ...
        Remarque : Le bouton "Marges" permet de définir les marges entre le texte et le bord de la zone de saisie.
      • Le texte d'indication.
      • Les jetons (si le champ en possède).
      • L'affichage de la saisie obligatoire ou invalide.
      • ...
      Permuter un champ de saisie en champs Libellé
      Universal Windows 10 AppAndroidiPhone/iPad WINDEV et WINDEV Mobile permettent de transformer automatiquement un champ de saisie en plusieurs libellés :
      1. Sélectionnez le champ de saisie à transformer.
      2. Sous le volet "Modification", dans le groupe "Transformations", déroulez "Refactoring et permutations" et sélectionnez "Champ de saisie vers Libellés".
      Un libellé est automatiquement créé pour le libellé du champ de saisie et un libellé est également créé pour la zone de saisie.
      Liste des exemples associés :
      Le champ de saisie Exemples unitaires (WINDEV) : Le champ de saisie
      [ + ] Utilisation d'un champ de saisie
      Les caractères spéciaux Exemples unitaires (WINDEV) : Les caractères spéciaux
      [ + ] Manipulation de caractères spéciaux dans un champ RTF et visualisation des codes ASCII et ANSI.
      Les fonctions de reconnaissance vocale Exemples unitaires (WINDEV) : Les fonctions de reconnaissance vocale
      [ + ] Utilisation des fonctions de reconnaissance vocale.
      Les commandes vocales de Windows Vista (ou de Windows XP, avec un logiciel tiers) permettent de piloter des applications WINDEV à la voix.
      Par défaut, une application WINDEV répond déjà à la voix, lorsque l'on dicte dans un champ de saisie, ou lorsque l'on énonce le libellé d'un bouton.
      Il est également possible de programmer une commande vocale spécifique pour effectuer une action particulière.
      Masque de saisie avancé Exemples unitaires (WINDEV) : Masque de saisie avancé
      [ + ] Manipulation des masques de saisie dans WINDEV :
      - Définition du format des positifs/négatifs dans un champ de saisie numérique
      - Définition de l'apparence des négatifs dans un champ de saisie numérique
      - Définition de l'apparence de la valeur 0 dans un champ de saisie numérique
      - Utilisation d'une expression régulière pour empêcher la saisie d'autres caractères que les chiffres 1, 2, 3, 4, 5 et 6.
      - Utilisation d'une expression régulière pour "réguler" la saisie d'un numéro de plaque d'immatriculation français
      WD Champ Recherche Exemples didactiques (WINDEV) : WD Champ Recherche
      [ + ] Cet exemple montre comment gérer un champ de saisie permettant de réaliser des recherches FullText de type "google" dans votre base de données.
      WW_Rewali Exemples complets (WEBDEV) : WW_Rewali
      [ + ] Cet exemple est un site de réservation de voyages.

      Il propose des offres de voyages à des prix très attractifs.
      Il est ensuite possible de choisir la durée du voyage, les dates de départ .. puis de valider l'achat jusqu'au paiment via Paypal.

      Il utilise notamment le champ "bandeau défilant" et les plans.
      Version minimum requise
      • Version 9
      Documentation également disponible pour…
      Commentaires
      Cliquez sur [Ajouter] pour publier un commentaire

      Dernière modification : 19/02/2024

      Signaler une erreur ou faire une suggestion | Aide en ligne locale