- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Quand on crée un formulaire, on renseigne directement dans notre classe le type dechamp que l'on souhaite utiliser, par exemple un charField, un emailField, etc.
00:00:08 :Si on va voir dans les champs de formulaire dans la documentation, vous allez voir quechaque type de champ a un composant par défaut qui est utilisé.
00:00:16 :Donc par exemple pour les charField, le composant par défaut c'est le textInput.Et c'est ça qui fait en fait que quand on va afficher dans notre page HTML,eh bien ici à partir du charField, je vais avoir un champ qui me permet de rentrer du texte.
00:00:29 :Si on va voir par exemple pour le emailField, donc si je descends un petit peu dans la listepour aller voir dans les E, on va avoir le emailField et le emailField par défaut c'estun emailInput.
00:00:40 :Et donc si on veut voir à quoi ressemble le emailInput, vous allez voir que c'est uninput de type email.Donc au niveau du HTML, on a inputType égale à email.
00:00:49 :Et on va avoir différents types de composants qu'on peut utiliser.Donc en anglais on appelle ça des widgets, en français ils appellent ça des composants.
00:00:56 :Et ce qui est très intéressant, c'est qu'on va pouvoir modifier le composant qui est utilisépour chacun de nos champs.Par exemple ici pour le password, si on retourne voir dans les champs qui sont disponibles,ici vous avez peut-être remarqué qu'il n'y a pas de champ password.
00:01:10 :Donc si je descends un peu ici, que je me rends dans les P, vous allez voir qu'on n'a pas depassword.Donc vous voyez qu'on passe du nul booleanField au regexField.
00:01:21 :Donc on n'a pas de champ qui commence par P, on n'a pas de passwordField.Le problème c'est que quand on se rend ici dans notre fichier HTML et que l'on rentre notre motde passe, et bien du coup il est affiché en clair.
00:01:32 :Alors que normalement ce qu'on peut faire dans un fichier HTML, c'est avoir un champ ici qui vaêtre de type password et qui va me permettre de masquer le mot de passe qui est rentré.
00:01:42 :Pour que les gens par exemple qui soient derrière moi ne puissent pas voir le mot de passe que jerentre dans l'interface.Donc ce qu'on peut faire, c'est sur notre password ici qui est un champ de type charField,c'est modifier le widget que l'on va utiliser.
00:01:53 :Donc si on va voir dans les composants de formulaire, donc dans les widgets qui sontdisponibles, on a le textInput qui est le composant par défaut qui est utilisé pour les charField,mais là par contre si on descend vous voyez qu'on a un passwordInput.
00:02:04 :Et si on regarde au niveau du HTML, on voit que le type n'est pas le même donc ce n'est pas dutexte, on a password ici.
00:02:10 :Si je vais voir dans mon HTML et que je modifie mon HTML, donc par exemple je vais faire unclic droit inspect et je vais aller modifier le champ pour le mot de passe.
00:02:19 :Donc dans notre formulaire ici, on va aller chercher le mot de passe qui doit être ici etlà à la place de texte, on va mettre password.
00:02:26 :Je valide en appuyant sur entrée et si je retourne dans mon interface, maintenant vous voyez quequand je rentre du texte, il est correctement masqué.
00:02:34 :Donc nous ce qu'on va faire, c'est qu'on ne va pas en fait avoir envie de modifier leHTML à la main, forcément ça ne marcherait pas, c'est qu'on va modifier le widget quiest utilisé pour notre mot de passe.
00:02:43 :Donc pour ça on va le renseigner ici, on va dire widget égale et on va aller chercherdans form le password input tout simplement.Et là il ne faut pas oublier de mettre les parenthèses puisqu'on va créer une instancede ce widget.
00:02:54 :Donc on met password input, on met les parenthèses et si je reviens ici dans mon formulaire quej'actualise, automatiquement vous voyez maintenant que quand je rentre un mot de passe, eh bienil est correctement masqué.
00:03:03 :Et ce qui est très intéressant, c'est qu'on a beaucoup de widgets qui sont disponibleset qu'on peut modifier donc sur chacun des champs.Par exemple, je peux mettre un textarea pour le pseudo.
00:03:13 :Donc widget égale forms.textarea, je mets les parenthèses, je reviens ici, j'actualiseet là vous voyez que cette fois-ci je n'ai plus juste une ligne mais vraiment une boîtede texte qui me permet de rentrer pas mal d'éléments à l'intérieur de cette boîte.
00:03:28 :Donc là dans ce cas-ci j'ai mis un max length qui est égal à 8, donc je ne peux pas mettreplus que 8 caractères donc ça n'a pas vraiment d'intérêt, mais c'est juste pour vous montrerqu'on peut vraiment mettre à peu près n'importe quel type de widget sur nos champs.
00:03:39 :Ce qui va être assez intéressant aussi c'est pour les champs de type choice field.Donc par défaut vous voyez qu'on a une liste comme ça déroulante,mais on pourrait mettre pas mal d'autres widgets intéressants.
00:03:49 :Notamment j'aime bien mettre le radio select qui va me permettre d'avoir une sélectionavec ce qu'on appelle des boutons radio comme ça, donc radio button en anglais.
00:03:59 :On va avoir également les checkboxes, donc on peut mettre un checkbox select multipleet là ça va permettre de sélectionner plusieurs entrées.Donc par exemple si vous êtes à la fois développeur Python et JavaScript,vous pouvez cocher plusieurs options comme ça ici.
00:04:12 :Et on a également le select multiple qui permet d'avoir ce même type de sélection,mais cette fois-ci non pas avec des checkboxes mais une liste comme ceci.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.