{"id":124630,"date":"2019-02-15T22:40:35","date_gmt":"2019-02-15T21:40:35","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/prototyping-forms-and-inputs\/"},"modified":"2025-02-03T16:44:32","modified_gmt":"2025-02-03T15:44:32","slug":"prototyping-forms-and-inputs","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/formulaires-et-intrants-de-prototypage","title":{"rendered":"Formulaires et donn\u00e9es"},"content":{"rendered":"

Avec Justinmind, vous pouvez cr\u00e9er des prototypes de formulaires interactifs pour simuler des exp\u00e9riences d’entr\u00e9e utilisateur, telles que des formulaires d’enregistrement, de connexion et de recherche.<\/p>\n

<\/a>Cr\u00e9ation d’un formulaire<\/h2>\n

Pour cr\u00e9er un formulaire dans Justinmind, vous devez utiliser des widgets. Consultez la barre d’outils situ\u00e9e sous le signe plus dans le coin sup\u00e9rieur gauche de votre \u00e9cran. Vous y trouverez des widgets couramment utilis\u00e9s dans les formulaires, notamment : Champs de texte, cases \u00e0 cocher et boutons radio, listes de s\u00e9lection, et plus encore.
\nVous pouvez \u00e9galement t\u00e9l\u00e9charger nos formulaires pr\u00e9-fabriqu\u00e9s et les importer dans votre palette Widgets.
\nIl vous suffit de faire glisser un widget sur le Canvas pour commencer \u00e0 cr\u00e9er votre formulaire.
\n\"Widgets<\/p>\n

Tous les widgets de formulaire et de saisie sont automatiquement interactifs pendant la simulation – aucun \u00e9v\u00e9nement n’est n\u00e9cessaire. Il suffit de cliquer sur \u00ab\u00a0Simuler\u00a0\u00bb pour pouvoir interagir avec eux. <\/p>\n

L’apparence et la fonctionnalit\u00e9 de ces widgets varient en fonction de l’appareil que vous utilisez dans votre prototype. Par exemple, dans les prototypes d’appareils iPhone, le fait de mettre l’accent sur un champ de texte d’entr\u00e9e pendant la simulation affichera automatiquement le clavier interactif de l’appareil. <\/p>\n

Vous pouvez ajouter des widgets suppl\u00e9mentaires avec un style d’entr\u00e9e dans votre prototype en ajoutant d’autres biblioth\u00e8ques de widgets.
\n\"Cliquez<\/p>\n

Une fois que vous avez con\u00e7u votre formulaire, vous pouvez commencer \u00e0 ajouter des \u00e9v\u00e9nements pour cr\u00e9er des interactions sophistiqu\u00e9es. Nous avons cr\u00e9\u00e9 quelques exemples d’exercices pour vous donner une id\u00e9e de quelques fa\u00e7ons de proc\u00e9der. Consultez-les ci-dessous. <\/p>\n

<\/a>Remplir automatiquement les formulaires<\/h2>\n

Dans cet exercice, vous apprendrez \u00e0 remplir automatiquement deux champs de texte de saisie apr\u00e8s avoir appuy\u00e9 sur la touche de tabulation dans le premier champ de texte de saisie.<\/p>\n

Suivez les \u00e9tapes suivantes pour r\u00e9aliser l’exercice :<\/p>\n

    \n
  1. Cr\u00e9ez un nouveau prototype pour votre formulaire ; utilisez un texte, des champs de saisie et un bouton de la barre d’outils.<\/span><\/li>\n
  2. S\u00e9lectionnez le bouton et acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements<\/span>.<\/li>\n
  3. Cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb et s\u00e9lectionnez le d\u00e9clencheur \u00ab\u00a0On Click\u00a0\u00bb ; s\u00e9lectionnez une action \u00ab\u00a0Set Value\u00a0\u00bb.<\/span><\/li>\n
  4. Pour la cible, s\u00e9lectionnez le deuxi\u00e8me champ de texte d’entr\u00e9e et saisissez \u00ab\u00a0Nom du produit\u00a0\u00bb comme valeur. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l’\u00e9v\u00e9nement. <\/span>\"D\u00e9finir<\/li>\n
  5. Allez dans la palette \u00c9v\u00e9nements, cliquez sur l’ic\u00f4ne en forme de roue dent\u00e9e \u00e0 c\u00f4t\u00e9 du mot \u00ab\u00a0Faire\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0Ajouter une action\u00a0\u00bb. Cr\u00e9ez une autre action \u00ab\u00a0Sur clic\u00a0\u00bb + \u00ab\u00a0D\u00e9finir une valeur\u00a0\u00bb, s\u00e9lectionnez le troisi\u00e8me champ de texte de saisie comme cible et saisissez quelque chose comme valeur d\u00e9finie par l’action. \"Wireframes<\/li>\n
  6. Dans la palette \u00c9v\u00e9nements, cliquez sur \u00ab\u00a0Ajouter une interaction\u00a0\u00bb. Laissez le d\u00e9clencheur \u00e0 \u00ab\u00a0Sur le clic\u00a0\u00bb et changez l’action r\u00e9sultante en \u00ab\u00a0Mettre l’accent sur\u00a0\u00bb et s\u00e9lectionnez le deuxi\u00e8me champ de texte d’entr\u00e9e comme cible sur laquelle l’accent doit \u00eatre mis.\"\"Voici \u00e0 quoi devraient ressembler tous vos \u00e9v\u00e9nements :
    \n\"Wireframes<\/li>\n<\/ol>\n

    Voil\u00e0, c’est fait ! Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et saisissez du texte dans le premier champ de saisie. Ensuite, appuyez sur la touche TAB et vous vous concentrerez sur le deuxi\u00e8me champ de texte de saisie et verrez les valeurs se remplir automatiquement. <\/p>\n

    Vous pouvez t\u00e9l\u00e9charger l’exemple ici.<\/a><\/p>\n

    <\/a>Validation du flux d’\u00e9crans<\/h2>\n

    Avec Justinmind, vous pouvez cr\u00e9er et simuler un formulaire \u00e0 plusieurs \u00e9tapes en utilisant des variables et la validation du flux d’\u00e9cran. Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er un formulaire de saisie mobile avec plusieurs \u00e9crans. Dans le dernier \u00e9cran, l’utilisateur verra un r\u00e9sum\u00e9 de tous les d\u00e9tails qu’il a remplis. <\/p>\n

    Pour concevoir un formulaire \u00e0 plusieurs \u00e9tapes dans votre prototype, suivez les \u00e9tapes ci-dessous :<\/p>\n

    Design des \u00e9crans<\/h3>\n
      \n
    1. Cr\u00e9ez un nouveau prototype avec deux \u00e9crans.<\/li>\n
    2. Sur le premier \u00e9cran, faites glisser trois textes et nommez-les \u00ab\u00a0Nom d’utilisateur\u00a0\u00bb, \u00ab\u00a0Adresse \u00e9lectronique\u00a0\u00bb et \u00ab\u00a0Mot de passe\u00a0\u00bb<\/li>\n
    3. Faites glisser un champ de texte de saisie sous chaque champ de texte, il doit y en avoir trois au total.<\/li>\n
    4. Ajoutez un bouton dans le coin inf\u00e9rieur droit de l’\u00e9cran qui sera utilis\u00e9 pour naviguer vers l’\u00e9cran suivant.<\/li>\n
    5. Passez \u00e0 l’\u00e9cran 2 et ajoutez les m\u00eames champs de texte avec les champs de texte de saisie sous chaque texte.<\/li>\n
    6. Allez dans la palette Variables et ajoutez trois variables, une pour chaque champ de saisie.<\/li>\n<\/ol>\n

      Ajout des \u00e9v\u00e9nements<\/h3>\n
        \n
      1. Allez \u00e0 l’\u00e9cran 1 et cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Tap\u00a0\u00bb + \u00ab\u00a0Link To\u00a0\u00bb, et reliez-le \u00e0 l’\u00e9cran
      2. R\u00e9p\u00e9tez l’\u00e9tape 2 pour les deux champs de texte suivants.<\/li>\n
      3. Allez \u00e0 l’\u00e9cran 2 et regardez la palette Variables. S\u00e9lectionnez une variable et faites-la glisser vers l’\u00e9l\u00e9ment de texte correspondant sur l’\u00e9cran. Cela cr\u00e9era un \u00e9v\u00e9nement \u00ab\u00a0On Page Load\u00a0\u00bb + \u00ab\u00a0Set Value\u00a0\u00bb et fixera la valeur de l’\u00e9l\u00e9ment de texte \u00e0 la valeur de la variable. <\/li>\n
      4. R\u00e9p\u00e9tez l’\u00e9tape 3 jusqu’\u00e0 ce que la variable correspondante ait \u00e9t\u00e9 attribu\u00e9e \u00e0 chaque \u00e9l\u00e9ment de texte.<\/li>\n
      5. Et c’est tout ! Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et interagissez avec votre prototype. Vous verrez que vos r\u00e9ponses apparaissent dans le r\u00e9sum\u00e9 de la derni\u00e8re page. <\/li>\n<\/ol>\n

        Vous pouvez t\u00e9l\u00e9charger l’exemple ici.<\/a><\/p>\n

        <\/a>Validation des champs obligatoires<\/h2>\n

        Dans cet exemple, nous allons apprendre \u00e0 utiliser des conditions pour valider un formulaire de saisie afin que tous les champs obligatoires soient remplis correctement.<\/p>\n

        Suivez les \u00e9tapes suivantes pour apprendre \u00e0 le faire :<\/p>\n

        Design du formulaire<\/h3>\n
          \n
        1. Cr\u00e9ez un prototype et cr\u00e9ez trois champs de texte de saisie dans le canevas (vous pouvez trouver les champs de saisie dans la barre d’outils \u00e0 l’int\u00e9rieur du menu de l’ic\u00f4ne plus).<\/li>\n
        2. Dans la palette Propri\u00e9t\u00e9s, attribuez \u00e0 chaque champ de texte de saisie une valeur d’espace r\u00e9serv\u00e9 de \u00ab\u00a0Pr\u00e9nom\u00a0\u00bb, \u00ab\u00a0Courriel*\u00a0\u00bb et \u00ab\u00a0Num\u00e9ro de t\u00e9l\u00e9phone*\u00a0\u00bb. Vous pouvez d\u00e9finir le texte de l’espace r\u00e9serv\u00e9 dans la palette Propri\u00e9t\u00e9s.\n
          Remarque :<\/strong> Les champs de saisie qui contiennent le caract\u00e8re \u00ab\u00a0*\u00a0\u00bb exigent que l’utilisateur y saisisse du texte pour remplir le formulaire. De plus, notez que le champ \u00ab\u00a0email\u00a0\u00bb doit \u00eatre au format \u00ab\u00a0xxx@xxx\u00a0\u00bb. <\/div>\n<\/li>\n
        3. Cr\u00e9ez un widget Bouton au bas de l’\u00e9cran 1.<\/li>\n
        4. Passez \u00e0 l’\u00e9cran 2 et cr\u00e9ez un message \u00ab\u00a0Succ\u00e8s\u00a0\u00bb pour informer l’utilisateur qu’il a saisi ses donn\u00e9es avec succ\u00e8s.<\/li>\n<\/ol>\n

          Ajout des \u00e9v\u00e9nements<\/h3>\n

          Nous avons cr\u00e9\u00e9 un formulaire de saisie statique. Nous allons maintenant ajouter des \u00e9v\u00e9nements en utilisant des conditions pour rendre notre formulaire interactif et identifier les champs qui doivent \u00eatre remplis pour passer \u00e0 l’\u00e9cran suivant. <\/p>\n

            \n
          1. S\u00e9lectionnez le bouton dans l’\u00e9cran 1 et allez dans la palette \u00c9v\u00e9nements. Ajoutez une action \u00ab\u00a0On Click\u00a0\u00bb + \u00ab\u00a0Change Style\u00a0\u00bb, en s\u00e9lectionnant le champ de texte \u00ab\u00a0Email*\u00a0\u00bb \u00ab\u00a0Email*\u00a0\u00bb. S\u00e9lectionnez les options de couleur de bordure et de texte dans la liste d\u00e9roulante et d\u00e9finissez-les sur la couleur actuelle du champ de texte de saisie. Cliquez ensuite sur \u00ab\u00a0OK\u00a0\u00bb pour quitter la bo\u00eete de dialogue. Cette action modifiera l’apparence du champ de saisie et lui donnera sa couleur par d\u00e9faut lorsque l’utilisateur aura saisi les informations correctes. \"Modifier<\/li>\n
          2. Revenez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le texte \u00ab\u00a0ajouter une condition\u00a0\u00bb au-dessus de l’\u00e9v\u00e9nement que vous venez de cr\u00e9er. Dans le g\u00e9n\u00e9rateur d’expressions conditionnelles, proc\u00e9dez comme suit pour cr\u00e9er la condition :
            \n\"interactive-prototypes-input-form-expression-1\"
            \n1.<\/strong> Faites glisser la fonction de texte Expression r\u00e9guli\u00e8re sur le premier espace de l’expression. 2.<\/strong> Dans l’espace qui appara\u00eet, faites glisser le champ de texte de saisie du code postal depuis le canevas de la bo\u00eete de dialogue ou depuis le contour de la bo\u00eete de dialogue. 3.<\/strong> Dans le deuxi\u00e8me espace, faites glisser la constante Code postal. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de la condition.<\/p>\n<\/li>\n
          3. Regardez les \u00e9v\u00e9nements que vous venez de cr\u00e9er et cliquez sur le texte \u00ab\u00a0Autre\u00a0\u00bb. Ajoutez une autre action \u00ab\u00a0On Click\u00a0\u00bb + \u00ab\u00a0Change Style\u00a0\u00bb, en s\u00e9lectionnant \u00e0 nouveau le champ de texte \u00ab\u00a0Postal Code*\u00a0\u00bb et en s\u00e9lectionnant les options de couleur de bordure et de couleur de texte dans la liste d\u00e9roulante. et s\u00e9lectionnez les options Couleur de la bordure et Couleur du texte dans la liste d\u00e9roulante. Cette fois, changez le style de la bordure et du texte en rouge. Le style rouge indiquera aux utilisateurs que le champ de saisie du code postal n’a pas \u00e9t\u00e9 rempli correctement. \"Changez<\/li>\n
          4. R\u00e9p\u00e9tez les \u00e9tapes 1 \u00e0 3 pour l’autre champ de saisie obligatoire (num\u00e9ro de t\u00e9l\u00e9phone). N’oubliez pas de modifier les composants du g\u00e9n\u00e9rateur d’expression et des champs de saisie en cons\u00e9quence. <\/li>\n
          5. Une fois que vous avez cr\u00e9\u00e9 des \u00e9v\u00e9nements pour les deux champs obligatoires, ajoutez un \u00e9v\u00e9nement suppl\u00e9mentaire au bouton. Cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Click\u00a0\u00bb + \u00ab\u00a0Navigate to\u00a0\u00bb, puis s\u00e9lectionnez Screen 2. <\/li>\n
          6. Cliquez sur le texte \u00ab\u00a0ajouter une condition\u00a0\u00bb pour cet \u00e9v\u00e9nement. Ajoutez l’expression suivante : \"Condition\n
            Remarque :<\/strong> la condition doit correspondre exactement \u00e0 cette image pour que l’\u00e9v\u00e9nement se d\u00e9clenche correctement.<\/div>\n<\/li>\n<\/ol>\n

            Et c’est tout ! Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb pour interagir avec votre formulaire de saisie et l’appr\u00e9cier dans votre prototype. <\/p>\n

            Vous pouvez t\u00e9l\u00e9charger l’exemple ici.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

            Avec Justinmind, vous pouvez cr\u00e9er des prototypes de formulaires interactifs pour simuler des exp\u00e9riences d’entr\u00e9e utilisateur, telles que des formulaires d’enregistrement, de connexion et de recherche….<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8423],"tags":[],"class_list":["post-124630","post","type-post","status-publish","format-standard","hentry","category-formation","category-formulaires-et-donnees"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124630"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124630"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124630\/revisions"}],"predecessor-version":[{"id":126160,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124630\/revisions\/126160"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}