DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

  • Présentation du champ de saisie
  • Créer un champ de type "Champ de saisie"
  • Principales caractéristiques d'un champ de saisie
  • Type d'un champ de saisie
  • Type et masques
  • Afficher un texte d'indication dans un champ de saisie
  • Style du champ de saisie
  • Validation par la touche Entrée des champs de saisie
  • Fonctionnalités spécifiques HTML 5
  • 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 d'un champ de saisie

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, ...).
  • Texte multiligne pour afficher ou saisir plusieurs lignes séparées par un "Retour Chariot".
  • WEBDEV - Code Serveur Texte HTML pour saisir et mettre en page des textes avec enrichissement.
  • 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, ...). 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.
  • WEBDEV - Code Serveur Upload pour gérer l'upload de fichiers.

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.
WEBDEV - Code Serveur

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.
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.
WEBDEV - Code Serveur Le style de l'indication correspond au style de la zone de saisie, en italique et gris.
  • Windows un historique des saisies : Lors de la saisie dans le champ, la liste des précédentes valeurs précédemment saisies dans ce champ sera automatiquement proposée. Cet historique des saisies n'est pas proposé pour les champs multilignes. Pour plus de détails, consultez Mémoriser la saisie effectuée (FAA).
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.

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.
  • ...
WEBDEV - Code Serveur

Validation par la touche Entrée des champs de saisie

Pour chaque champ de saisie d'une page, il est possible de spécifier l'action qui sera exécutée lorsque l'internaute appuiera sur la touche ENTREE.
Cela permet par exemple d'affiner les événements par défaut dans une page. Il est par exemple possible d'avoir plusieurs champs de recherche sur une même page et de pouvoir valider chaque champ en appuyant sur la touche Entrée. L'action effectuée sera celle associée au champ de saisie ayant le focus.
Pour définir l'action associée à un champ de saisie :
  1. Créez dans votre page un bouton contenant le code voulu.
  2. Affichez la description du champ de saisie. Dans l'onglet "UI", sélectionnez le bouton voulu dans l'option " Action sur 'Entrée' ".
WEBDEV - Code Serveur

Fonctionnalités spécifiques HTML 5

Certaines caractéristiques des champs de saisie utilisent des fonctionnalités HTML 5 :
  • Masques de saisie. En choisissant un masque de saisie HTML 5, le site laisse la gestion de la saisie et son contrôle au navigateur. Ce n'est plus la page (le site) qui effectue les contrôles, mais directement le navigateur. Bien sûr, il est possible dans tous les cas d'exécuter un code WLangage en sortie de champ pour effectuer des contrôles supplémentaires sur les données saisies. Ces fonctionnalités ne sont disponibles que sur certaines navigateurs à partir des versions suivantes : FireFox 5, Chrome 12, Opéra 11, Safari 5, ...
    Pour plus de détails, consultez l'aide sur les masques de saisie des champs texte, numériques, date et heure.
  • Champ de recherche HTML 5 : Si cette option est sélectionnée pour un champ de type texte, le navigateur affichera une croix sur la droite du champ. Cette croix permettra à l'internaute de vider le contenu du champ.
    Cette option est disponible dans l'onglet "Général" de la fenêtre de description du champ.
    Attention : Cette option est prise en compte uniquement sur les navigateurs supportant HTML 5, notamment Chrome 12 et Safari 5.
  • Complétion automatique : Cette option (présente dans l'onglet "Détail" de la fenêtre de description du champ) permet d'activer ou non l'auto-complétion sur les champs de saisie. Par défaut, l'auto-complétion est activée. Lorsque l'internaute commence à saisir des informations dans un formulaire, tous les champs de la page se remplissent immédiatement et automatiquement avec les données des précédentes saisies réalisées sur le poste.
    L'auto-complétion est une fonctionnalité dangereuse, à débrancher pour les données confidentielles.
    Cette fonctionnalité est gérée par la plupart des navigateurs supportant HTML 5 (Firefox, Chrome, Safari, Opéra, ...).
Permuter un champ de saisie en champs Libellé
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