Apprendre le HTML (3/4) - Les formulaires

Bonjour et bienvenue dans cette nouvelle leçon qui sera consacrée aux formulaires HTML. Pour avoir une idée de ce que c'est qu'un formulaire, jetons un coup d'œil sur la page d'accueil de Facebook. Il contient 2 zones: une pour l'authentification si vous êtes déjà un utilisateur, une pour l'inscription si vous êtes un nouvel utilisateur. Les 2 zones contiennent des petits rectangles où l'on peut écrire un texte. Ces rectangles-là constituent ce que l'on appelle des champs de formulaire. Alors, un formulaire n'est rien d'autre qu'un ensemble de champs qui permettent de saisir un texte, de charger un fichier sur le serveur ou de valider un choix. Pour créer un formulaire, on va utiliser le langage HTML. On va reprendre cette page index.html, on va essayer de créer un formulaire. Il faut d'abord commencer par déclarer la balise form. En lui donnant des attributs. Il y a plein d'attributs que l'on peut déclarer, mais on va se contenter des plus importants. On va commencer par name, on va l'appeler par exemple mon-forme. Ensuite, on va mettre method égal à POST et action égal par exemple la page courante. Ensuite, on va fermer la balise form. Expliquons d'abord ce que ça signifie. Name, ça donne un nom à un formulaire. C'est un nom unique dans la page qui permet d'identifier un formulaire parmi d'autres. Imaginons par exemple que vous utilisez des langages comme JavaScript ou bien PHP. Afin de pouvoir accéder à ce formulaire et tous les champs qu'il peut contenir, alors il faut distinguer celui-ci parmi les autres. Et pour le distinguer, il y a plusieurs manières. La plus connue, c'est d'utiliser l'attribut name. Method sert tout simplement à spécifier la méthode avec laquelle on va poster le formulaire vers le serveur. Parce qu'à la fin, quand on va remplir un formulaire, par exemple quand vous saisissez votre login et votre mot de passe sur Facebook, et que vous cliquez sur le bouton, dans ce cas ces informations-là seront envoyées au serveur afin qu'ils soient traités et vérifiés si vous êtes vraiment un utilisateur légitime ou non. Pour envoyer les formulaires vers le serveur, il y a 2 méthodes: soit POST ou bien GET. GET permet d'envoyer les informations via l'URL, c'est-à-dire à côté de l'adresse de la page web, alors que POST permet d'envoyer les informations dans un en-tête que l'on ne peut pas voir. Mais ça ne veut pas dire que POST est une méthode sécurisée par rapport à GET. Toutes les deux ne sont pas sécurisées. Quand on parle de la sécurité, il faut penser à utiliser le protocole HTTPS au lieu de HTTP. La seule différence, c'est que POST va masquer les informations alors que GET va les divulguer sur la barre d'adresse. Action, quant à elle, permet de spécifier la page qui va intercepter les informations afin de les traiter. C'est-à-dire que sur Facebook, si vous mettez votre login et votre mot de passe, la page qui va accueillir ces informations-là après leur poste sur le serveur, c'est la page que l'on va spécifier dans Action. Dans ce cas, quand j'ai mis action avec un attribut sans valeur, ça signifie tout simplement que c'est la page courante même qui va traiter le formulaire au cas où je le poste. Maintenant que le formulaire est déclaré, quand j'exécute pour voir ce que ça donne sur le navigateur, je vais voir qu'il n'y a rien vraiment de visible. C'est normal parce qu'un formulaire, ce n'est qu'une zone qui va contenir les champs qui seront réellement visibles sur la page. Commençons maintenant par déclarer le premier champ. La plus célèbre est la zone de texte. Pour déclarer une zone de texte, on utilise la balise input type text. On va lui donner un nom, par exemple name prénom. Tout d'abord, il faut remarquer que la balise input est une balise autofermante. C'est pourquoi nous avons placé espace slash à la fin de la balise. Input permet de spécifier beaucoup de champs. Y compris la zone de texte, la zone de mot de passe, les boutons radio et même les boutons proprement dits. Et pour faire la différence entre une zone de texte et une zone de mot de passe, on fait appel à l'attribut type. Dans ce cas, type avec la valeur text signifie que c'est une zone de texte classique. Si on veut définir un autre type, il suffit d'agir sur l'attribut type. Bon, si on exécute maintenant pour voir le résultat, on va voir qu'une zone de texte classique a été intégrée. Le texte est écrit en clair. Bien sûr, tout ce qui est design, c'est un comportement par défaut du navigateur et ça peut changer d'un navigateur à un autre. Si vous voulez avoir un design unifié, alors dans ce cas, il faut faire appel au CSS. Deuxième champ maintenant, on va mettre br parce que les inputs sont des balises inline, alors il faut forcer un retour à la ligne. Maintenant, on va déclarer la zone de texte grâce à input type password Name, on va l'appeler par exemple MDP. On exécute. Le premier champ, c'est la zone de texte. Le deuxième champ, c'est la zone de mot de passe où les informations ou bien où les textes ont été symbolisés. Maintenant, il y a une chose importante, c'est que nous disposons de deux zones qui, a priori, se ressemblent tellement. Comment l'internaute saura-t-il que sur la première zone de texte, il doit écrire un login et sur la deuxième c'est un mot de passe. Alors on peut faire appel soit aux balises label ou bien à un attribut qui a été intégré avec le HTML5 qui s'appelle placeholder. Il suffit de spécifier placeholder sur chacune des balises. On va écrire un texte descriptif, par exemple prénom. Donc on va mettre placeholder et là on va mettre mot de passe. On exécute. On va voir que même si les champs sont vides, il y a quand même le texte descriptif qui est intégré dedans et qui indique à l'internaute la nature de l'information qu'il faut saisir. Alors là, par exemple, je vais mettre le prénom. Bon, une fois je commence à écrire, je constate que le texte descriptif, c'est-à-dire le placeholder, disparaît. Même chose pour le mot de passe. Nous allons voir un autre champ, c'est le bouton radio. On va mettre br pour forcer un retour à la ligne. Ensuite, on va mettre input type radio avec nom par exemple civilité. Sur navigateur, on aura un bouton de cette forme. C'est un bouton qui est généralement à choix unique, c'est-à-dire si nous avons beaucoup de boutons radio, en général on peut en choisir qu'un seul. On va intégrer maintenant un autre bouton de même type, ça veut dire radio. Alors il suffit de mettre copier-coller et là je vais conserver le même nom, bien que tout à l'heure j'ai dit que normalement le nom c'est unique, c'est-à-dire ça doit pas se répéter sur le même formulaire. Mais pour les boutons radio et les boutons checkbox que l'on va voir par la suite, c'est un cas exceptionnel. Ça veut dire qu'on peut donner le même nom pour constituer ce qu'on appelle un groupe d'éléments. Dans ce cas, regardez ce qui va se passer. Quand je coche le premier, bien sûr je peux pas décocher en recliquant dessus, mais quand je clique sur le deuxième, il décoche automatiquement le premier. Ça veut dire qu'a priori ces boutons radio, ils sont destinés à un choix unique. Mais si je change le nom, ça veut dire si le premier nom est différent du deuxième, alors dans ce cas le comportement va radicalement changer. C'est-à-dire je peux cocher le premier et je peux cocher le deuxième. Alors si vous avez un groupe d'éléments où vous permettez uniquement un seul choix, Alors il faut mettre le même nom. Maintenant, les boutons checkbox ou bien les cases à cocher, on peut les intégrer grâce à input type checkbox. Name, on va donner par exemple le nom loisirs. Comme les loisirs, on peut en avoir beaucoup, alors on peut autoriser ce qu'on appelle un choix multiple. BR. Bon, je vais intégrer un autre. Avec le même nom ou bien des noms différents, ça fait pas une grande différence. Voilà, ici je peux cocher, je peux décocher en recliquant, sinon je peux cocher deux simultanément. C'est à l'inverse des boutons radio où je peux cocher uniquement un seul. Ensuite, nous allons voir le input type hidden name, par exemple champ Caché. Bon, tout d'abord, vous avez remarqué que pour le name, j'ai pas mis l'accent pour caché. Il faut se mettre à la tête que le name, ça ressemble un petit peu aux variables, parce que généralement le name, il sert à d'autres langages de programmation comme JavaScript ou bien PHP d'identifier un champ parmi d'autres. Il va le traiter en tant que variable. C'est pourquoi il faut essayer de le manipuler comme étant une variable. Et dans la plupart des cas, la Les langages de programmation autorisent certains caractères bien définis pour les variables comme des caractères alphanumériques et quelques symboles comme le symbole souligné. Le champ hidden maintenant, c'est un champ qui va pas être visible. Ça veut dire que quand j'exécute, il n'y a rien qui va s'ajouter. En réalité, c'est une zone de texte mais qui a été masquée par le navigateur. Vous allez peut-être me dire à quoi ça sert. En fait, pour les gens qui font du PHP, ils ont souvent besoin de stocker des informations provisoirement dans une page en attendant de la traiter ultérieurement. Pour la stocker, il y a beaucoup de manières pour le faire. Soit on le met provisoirement dans un show hidden, ou bien on va la stocker dans des cookies, ou encore des variables de session, voire d'autres solutions. Mais le show hidden, ça reste une des solutions les plus simples à réaliser. Ensuite, on va mettre input type File name, par exemple mon CV. Alors la type file, ça permet tout simplement d'uploader un fichier sur le serveur ou bien de charger un fichier sur le serveur. C'est-à-dire que le fichier était disponible sur notre ordinateur, on va l'envoyer vers le serveur. C'est à l'inverse du download. Le download, c'est le fait de télécharger quelque chose depuis le serveur vers votre ordinateur personnel. Le upload, on l'utilise généralement pour charger une photo de profil sur un réseau social. Ou bien pour joindre une pièce jointe à un email ou envoyer n'importe quel fichier sur un site web. Là par exemple, ça me permet d'uploader mon CV sur un site de recrutement par exemple. Alors quand j'exécute, le champ ressemble à ceci. Quand je clique dessus, il y a l'explorateur du système qui va s'ouvrir et qui permet tout simplement de choisir un fichier parmi ceux qui sont présents ici. Il y a encore input type button. Bon, je vais l'appeler par exemple mon bouton, value valider. Voilà, alors là c'est un bouton dont le name c'est mon bouton et le value c'est tout simplement le texte qui sera écrit dessus. On appelle ça l'étiquette. Alors quand j'exécute Je vais voir que le bouton il est là et voilà le texte valider, c'est l'étiquette qui est écrite sur le dos du bouton. Quand je clique, il se passe vraiment rien parce que tout simplement les types button sont des boutons que l'on peut dessiner avec le HTML mais qui ne font rien, c'est-à-dire qu'ils n'ont aucun comportement par défaut. Afin de les adopter d'un comportement, on fait généralement usage d'un langage de programmation côté client comme le JavaScript. Par contre, il y a un bouton qui est largement utilisé, c'est le bouton type submit. Alors, type submit, c'est un bouton qui ressemble à l'autre, sauf que quand on clique dessus, alors le formulaire sera chargé vers le navigateur. Ça veut dire que la page, elle a été rafraîchie. Toutes les informations que j'ai saisies ici, elles ont été envoyées au serveur afin qu'il soit traité. Le dernier bouton, c'est reset. Reset permet tout simplement de rétablir les valeurs par défaut de mon formulaire. Autrement dit, imaginez que Je vais mettre ça pour rafraîchir. Je vais agrandir un petit peu le texte. Imaginez que j'ai écrit ici A, B. Bon, j'ai choisi ces deux options-là. Voilà. À la fin, je me suis rendu compte que les informations que j'ai saisies sont fausses. Alors, au lieu de les effacer une à une, il suffit de cliquer sur le bouton Reset et il va tout simplement rétablir le formulaire. Il existe d'autres champs que l'on peut intégrer sans utiliser la balise input. Par exemple, l'espace de texte que l'on intègre grâce à la balise text-align. Quand on exécute, on va voir que la zone de texte est intégrée ici. Bon, je peux faire un truc, BR. Voilà. Alors ici, c'est un espace de texte, bien sûr je peux écrire des paragraphes. Si la zone de texte permet d'écrire une seule phrase sur une seule ligne, text-align peut autoriser des retours à la ligne. Mais pour personnaliser mon text-align, bien sûr je peux utiliser le CSS, sinon il y a des attributs HTML que je peux intégrer facilement, comme par exemple name. Je vais donc par exemple dire commentaire pour dire que ça peut accueillir un commentaire. Et ensuite cols égale par exemple 50, rows égale 5. cols, ça veut dire que mon text-align peut contenir 50 caractères Par ligne. Et rows, c'est-à-dire que ma zone de texte, il peut accueillir 5 lignes simultanément, mais rien ne m'empêche d'écrire plus que 5 lignes. Par exemple, je vais écrire première ligne, voilà deuxième ligne, troisième, quatrième, cinquième. Mais au-delà de 5 lignes, il y a le scrollbar qui s'affiche, ou bien la barre de défilement qui permet de parcourir verticalement ma zone de texte. Il y a aussi le champ, ce qu'on appelle la liste de sélection. On peut l'intégrer grâce à la balise select. Là aussi, on va lui donner un nom, name par exemple âge. Et là, bien sûr, le select, ça va donner quelque chose qui ressemble à ça, mais c'est une liste vide. Pour la remplir, on on va intégrer à l'intérieur la balise option, bien option. Dans l'option, on va mettre par exemple langage HTML, CSS, JavaScript, etc. Quand j'actualise et quand je clique, je déroule un menu qui contient les différentes options que j'ai intégrées. Les champs que nous avons vus ici sont des champs qui sont très anciens, c'est-à-dire qu'ils datent même d'avant HTML5. Le HTML5, il a pu intégrer des champs qui sont plus pratiques, surtout avec les appareils mobiles comme les tablettes et les smartphones. Il permet de saisir d'une manière intelligente les zones de texte, ce qui facilite grandement la vie. Là, par exemple, au lieu de mettre le champ texte, je peux mettre le champ number. Quand j'exécute Je vais voir ici que je peux écrire, que ça veut dire quand j'essaie d'écrire du texte normal, de l'alphabet, ça s'écrit pas. Par contre, je peux écrire des chiffres, ou bien je peux carrément incrémenter ou bien décrémenter à travers ces boutons-là qui ont été rajoutés. Il y a aussi le champ Range, ça permet d'avoir une coulisse et qui permet tout simplement de choisir une valeur sans être obligé de la saisir manuellement. Il y a aussi color. Pour le color, il permet de choisir une couleur parmi les couleurs supportées par le navigateur. Généralement, il y en a plus de 16 millions de couleurs et ce champ permet de choisir ou bien de prélever une couleur et retourner sa valeur. Il y a aussi le champ date qui permet d'écrire une date ou bien de dérouler carrément un calendrier qui nous permet de de choisir une date. Il n'y a pas que ces champs, il y en a énormément de champs qui ont été intégrés et qui sont de plus en plus pratiques, surtout comme j'ai dit tout à l'heure avec les appareils mobiles. Une remarque importante, c'est que le HTML5, il permet à l'intégrateur d'imposer quelques restrictions sur la manière de saisir un champ. C'est-à-dire qu'il peut rendre un champ obligatoire ou bien il peut juste imposer la forme du texte à écrire comme une date ou bien des caractères spéciaux, etc. Mais personnellement, je n'utilise pas cette technique parce que le HTML reste un langage côté client. Et du coup, même si vous présentez votre page de cette manière, pour quelqu'un qui s'y connaît en HTML, il peut facilement bidouiller votre code et passer des caractères que vous n'avez pas prévu au préalable. Alors, au lieu de faire le contrôle avec du HTML, on peut faire le contrôle d'une manière plus avancée, soit avec du JavaScript ou bien avec du PHP. Le serveur. Merci pour votre attention et à la vidéo prochaine.