Cette vidéo, de la formation HTML et CSS, présente la manière de créer un formulaire en HTML. Nous verrons les balises FORM, INPUT et LABEL.
>> Mettre du style à une page HTML
Bonjour et bienvenue dans cette vidéo, nous allons poursuivre notre formation HTML et aujourd’hui nous allons voir les formulaires. Comme d’habitude, je vais créer un nouveau fichier, 05-formulaire.html. Je crée ma structure de base, point d’exclamation, entrée, aussi je peux remplacer le title, les formulaires. On va peut-être faire un petit affichage de retour à la ligne et on va pouvoir commencer à créer notre formulaire.
En HTML, pour créer un formulaire, on va d’abord saisir une balise FORM. Visual Studio Code nous propose déjà un attribut, l’attribut ACTION. L’attribut ACTION va être destiné à indiquer ici un fichier qui va se charger de traiter les données du formulaire.
Généralement on aura un script PHP, on aura peut-être un fichier traitement.php qui sera chargé soit de récupérer les données pour les ajouter dans une base de données, soit d’envoyer un email s’il s’agit d’un formulaire de contact. Pour l’instant, bien évidemment, on n’a pas vu le PHP, donc on va laisser vide le champ ACTION. Deuxième attribut important au niveau de la balise FORM, ce sera l’attribut METHOD.
L’attribut METHOD, on aura la possibilité de mettre une méthode GET. Cette méthode GET va permettre de faire transiter les données du formulaire via l’URL. L’utilisateur va pouvoir voir les données qui transitent.
Donc ça, c’est une méthode qu’il ne faudra pas utiliser quand on veut créer des comptes utilisateurs, des comptes clients où il y a notamment des mots de passe. Bien évidemment, on utilisera plutôt la méthode POST. La méthode POST qui va faire transiter les données via HTTP, ce sera plus transparent et là c’est vraiment ce qui est recommandé au niveau sécurité si vous voulez demander à l’utilisateur un mot de passe ou des données sensibles, soit même son adresse email, etc.
Donc ça, ça sera transparent et c’est ce qu’on utilisera principalement. Puisque la méthode GET, je le répète, va nous permettre de faire transiter les données via l’URL et on va pouvoir voir toutes ces données qui transitent. Donc là je vais laisser éventuellement la méthode GET, c’est juste pour vous montrer un peu par la suite comment ça se présente.
Donc là on a fait notre balise de formulaire, notre balise principale et puis maintenant on va y ajouter des champs. Alors pour ceci, on va ajouter la balise INPUT. La balise INPUT qui va donc créer un champ de saisie.
Donc là il est de type texte, Visual Studio Code nous rajoute un attribut type, donc de type texte. On va faire un petit tour aussi sur le MDN pour voir au niveau du formulaire qu’est-ce qui existe comme type. Alors là on va revenir sur la balise INPUT ici et on voit les différents types qui existent.
Donc les types les plus utilisés sont le type texte, comme on vient de le voir, c’est de la saisie de texte pure. Le type email qui va permettre aussi de contrôler s’il y a bien l’arrobase et si l’adresse email semble correcte. Donc ça c’est utilisé souvent.
Le type password bien évidemment, quand on va saisir ici le mot de passe et bien évidemment les caractères sont cachés. Donc là je vous renvoie vers la documentation pour voir tous les types qui existent. On va faire le type button qui permettra de faire un bouton.
Après on peut très bien avoir besoin aussi de cases à cocher, donc le type checkbox. Qu’est-ce qu’on peut avoir d’intéressant ? Le type file pour faire transiter un fichier via le formulaire. Le type number pourquoi pas si on veut mettre des nombres, incrémenter ou décrémenter des nombres.
Le type range pourquoi pas si on fait des curseurs comme ceci. Le type reset qui permettra d’effacer les données du formulaire. Le type submit évidemment qui permettra d’envoyer les données.
Donc voilà un petit peu rapidement les différents types qui existent. Je vous renvoie à la documentation. N’hésitez pas à revenir à la documentation pour vous assurer que vous avez bien mis le type approprié au champ de formulaire.
Donc je reviens ici. Donc là on va faire le type texte. Alors en plus de l’attribut type, on va pouvoir ajouter aussi un attribut name.
Et puis là pour le moment on va dire je voudrais saisir un prénom. D’accord ? Donc je vais juste enregistrer. Je vais voir un peu ce que ça donne au niveau du navigateur.
Donc là j’ai bien mon champ de formulaire. Ce qui sera intéressant, parce qu’on ne sait pas de quoi il s’agit, il va être intéressant de rajouter une étiquette. Et ça va se faire avec la balise LABEL. Voilà, qui nous propose aussi un attribut fort. Donc on va voir tout de suite après. Et ici je vais mettre prénom.
Voilà. Donc pour faire un formulaire, on a une étiquette. Donc label, prénom et son champ de saisie de type texte que j’ai nommé prénom.
Donc maintenant on regarde dans le navigateur. On voit bien qu’on a prénom. On invite l’utilisateur à saisir son prénom.
Alors je reviens sur l’attribut fort qui va en fait, donc je vais pareil mettre ici prénom. En fait l’attribut fort va permettre d’associer l’étiquette, le label donc à son champ de saisie. Et pour faire cette association, je vais avoir au niveau du label l’attribut « for ». Par contre au niveau du champ input, je vais avoir l’attribut ID égal. Et là on va prendre la même valeur. Donc je l’ai nommé dans « for », je l’ai nommé prenom. Je vais donc me nommer prénom également. Donc l’attribut fort du label et l’attribut ID du champ input permet d’associer le prénom, enfin le champ avec son étiquette. Et ça va servir notamment, alors là je vais enregistrer, ça va servir par exemple pour saisir ici au niveau du champ de saisie prénom.
Je peux simplement cliquer à ce niveau-là et vous voyez que mon curseur va se positionner directement dans le champ associé. Donc on n’est pas obligé de cliquer à l’intérieur du champ. On verra qu’on pourra cliquer directement sur le libellé, sur l’étiquette pour avoir le curseur sur le champ de saisie.
Donc on va ensuite créer un autre champ de saisie qu’on va appeler, cette fois on va inviter l’utilisateur à saisir son nom. Donc dans le label je mets le nom et je mets un champ input associé que je vais nommer name égal nom. Donc ça, ça n’a rien à voir avec, j’ai mis les mêmes valeurs, mais le nom c’est simplement pour nommer ce champ.
C’est de savoir de quel champ on parle quand on va transmettre les données par la suite. Et ensuite j’ai bien mon ID, ici, où je mets le nom et j’associe donc mon champ nom à mon label nom. Donc là si on regarde ce que ça donne, on voit que bien que j’ai mis des retours à la ligne dans mon code, on sait que le HTML va suivre le flux et va faire tout sur la même ligne.
Donc ce qu’on peut faire c’est éventuellement, au niveau de mon input ici, ajouter un petit br pour faire un retour à la ligne. Voilà, donc c’est pas très joli, mais après on pourra faire de la disposition en CSS comme on le verra ou alors encore mieux, on peut très bien mettre un paragraphe. Je vais mettre un paragraphe ici, je vais mettre ça dans un premier paragraphe.
Et puis après on va se mettre ici aussi un deuxième paragraphe pour mettre le deuxième champ. Et comme ça on sera déjà beaucoup plus aéré, même si ça reste pas très joli pour l’instant en HTML, mais ce n’est pas le souci, on le verra ça en CSS. Et puis ensuite je vais rajouter un champ pour transmettre ces données.
Donc on a vu que c’était input et ça sera le type de type submit. Et on va lui mettre un attribut value. Et ici on va saisir le libellé qu’on souhaite mettre sur le bouton.
Puisque là le type submit va nous créer un bouton d’envoi de formulaire. Donc je vais ajouter envoyer tout simplement. Et si on regarde, j’ai bien maintenant mon bouton.
Donc on va tester ce petit formulaire, pourquoi pas. Donc on va dire prénom, peu importe, et puis ici le nom. Donc je vais envoyer.
Et comme j’ai utilisé la méthode get, comme je vous disais tout à l’heure, les données du formulaire sont envoyées via l’URL. Donc après ma page laformulaire.html, je vais avoir un petit point d’interrogation. Je vais avoir prénom, ça c’est le nom du champ, que je l’ai nommé prénom, égale sa valeur.
Donc là, Michel, toutes ces valeurs sont séparées par un et commercial. Donc suivi maintenant du nom. Mon champ nom est égal à Dupont.
C’est comme ça que transitent les données via l’URL. Donc évidemment à ne pas utiliser quand il s’agit de faire transiter des données sensibles. Donc voilà comment on constitue un formulaire, comment on crée un bouton pour envoyer toutes ces données.
Donc je vous referme évidemment toujours à la documentation HTML pour continuer votre apprentissage, voire les tester peut-être d’autres types de champs si vous le souhaitez. Puis après on verra un petit peu comment on peut mettre tout ça en place avec le CSS. Ce sera beaucoup plus sympa, plus joli que le HTML pur.
Voilà, écoutez je vous laisse pour cette vidéo. Je vous retrouve bientôt pour une prochaine. Donc à très bientôt.
