CM06 HTML Forms

Posté le 09/02/2025

Chargé de TD/CM : M. Zneika.

13 min de lecture

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Page 1 : Programmation WebCoursedescriptions:semester1,DataScienceandBigData..Forms/Formularies

Page 2 : 2PLANFormulairesFormsChamps de forme HTML5

Page 3 : 3LES FORMULAIRESIntroduction aux formulaires Traditionnellement, "formulaire" fait référence à un documentimpriméquicontientdesespacespourremplircertainesinformations.HTML emprunte le concept de formulaire pour faire référence àdifférentsélémentsquivouspermettentdecollecterdesinformations auprès des visiteurs de nos sites.Les formulaires sont partout autour de nouslogin, , formulaire decontact et sign up, etc….

Page 4 : 4LES FORMULAIRESIntroduction aux formulaires Leformulaireestutilisépourenvoyerlesdonnéesquel'utilisateur saisira au serveur qui les traitera.Comment fonctionnent les formulaires :1.Un utilisateur remplit un formulaire puis il appuie sur un bouton desoumission pour soumettre les informations au serveur.2.Le nom de chaque champ de formulaire est envoyé au serveur avecle valeur saisie ou sélectionnée par l'utilisateur.3.Leserveurtraitelesinformationsàl'aided'unlangagedeprogrammation tel que PHP, ASP.net, JSP ou Python.Les actions et les champs que vous autorisez dans votreformulaire déterminent ce que l'utilisateur est autorisé à faire etquelles informations il est autorisé à voir.

Page 5 : 5LES FORMULAIRESLa balise Formulaire FormPour créer une section de formulaire, nous fournissons auformulaire un nom, un identifiant, une action et une méthode. Unexemple avec des attributs vides ressemble à ceci :Le nom et l'identifiant de notre formulaire sont la façon dont nousnous y référerons dans notre code lors de l'interaction avec luien utilisant CSS, JavaScript ou d'autres langages.L'action est l'endroit où la page doit envoyer les informations etoù le navigateur ira lorsque nous appuierons sur envoyer.Notreméthodeestlafaçondontnousenverronsnosinformations, en utilisant GET ou POST.

Page 6 : 6LES FORMULAIRESLes attributs de formulaire : Attribut: DescriptionactionSa valeur est l'URL spécifiant où envoyer les données lorsque le bouton Soumettre est cliqué.methodLes formulaires peuvent être envoyés en utilisant l'un des deux méthodes : "get" : informations passées dans la barre d’adresse"post" : envoie les données dans le corps de la requêtetargetIndique où ouvrir la page envoyée à la suite de la demande target =blank signifie ouvrir dans une nouvelle fenêtre target =top signifie utiliser la même fenêtre idla valeur est utilisée pour identifier la forme distinctement de autres éléments de la page name

Page 7 : 7LES FORMULAIRESMethod Get L'envoi des données à l'aide de la méthode get place tous les champs du formulaire par nom et valeur appelée paire clé et valeur dans la barre d'adresse, ce qui allonge notre URI en ajoutant chaque élément à l'adresse de la page de réception.L'avantage d'utiliser la méthode get est que Les paramètres de l’URL peuvent être enregistrés avec l’adresse du site Web. Cela permet de mettre une requête de recherche en marque-page et de la récupérer plus tard.Bien que bénéfique, il existe deux cas dans lesquels nous ne voulons PAS utiliser get : soit nous ne voulons pas que l'utilisateur ou quiconque voie ce qui a été envoyé, comme des mots de passe ou des informations confidentielles, soit nous voulons envoyer beaucoup d'informations .

Page 8 : 8LES FORMULAIRESMethod Post Les données publiées sont envoyées du navigateur au serveur en arrière-plan, lorsque le client et le serveur commencent à parler. Les données sont envoyées dans les en-têtes voir de la communication, et ne sont pas visibles pour l'utilisateur final. Les pages mises en signet avec la méthode de publication n'auront plus accès aux informations par la suite, et ces informations sont perdues si l'utilisateur quitte la page.La manière dont les données sont utilisées et les valeurs ou le nouveau contenu renvoyés nous amènent aux langages de script.

Page 9 : 9LES FORMULAIRESGET VS POSTGET POST Visibilité Visible pour l’utilisateur dans le champ d’adresse Invisible pour l’utilisateur Marque-page et historique de navigation Les paramètres de l’URL sont stockés en même temps que l’URL. L’URL est enregistrée sans paramètres URL. Cache et fichier log du serveur Les paramètres de l’URL sont stockés sans chiffrement Les paramètres de l’URL ne sont pas enregistrés automatiquement. Comportement lors de l’actualisation du navigateur / Bouton « précédent » Les paramètres de l’URL ne sont pas envoyés à nouveau. Le navigateur avertit que les données du formulaire doivent être renvoyées. Type de données Caractères ASCII uniquement. Caractères ASCII mais également données binaires. Longueur des données Limitée - longueur maximale de l’URL à 2 048 caractères. Illimitée

Page 10 : 10LES FORMULAIRESTypes de contrôles de formulaireIl existe plusieurs types de contrôles de formulaireRadio Buttons: Check BoxexText BoxPasswordFile uploadSubmit buttons

Page 11 : 11LES FORMULAIRESla balise input la balise input est utilisée pour créer plusieurs formulaires différents.Le type d'attribut indique de quel type d'élément il s'agitla valeur de l'attribut type peut être:o texto checkboxo radioo passwordo hiddeno Submito reseto Buttono fileo image

Page 12 : 12LES FORMULAIRESla balise input la balise input est utilisée pour créer plusieurs formulaires différents.Le type d'attribut indique de quel type d'élément il s'agitla valeur de l'attribut type peut être:o Text, checkbox, radio, password, hidden, Submit, reset, Button, file, imageAttributs communs de la balise input :oname : le nom de l'élément, chaque input élément doit avoir un nom pour que l'on peut récupérer sa valeur . Ce nom n'est pas visible sur la page.ovalue : la valeur de l'élément ; utilisé de différentes manières pour différents valeurs de type.oreadonly : la valeur ne peut pas être modifiée.odisabled : l'utilisateur ne peut rien faire avec cet élément

Page 13 : 13LES FORMULAIRESZone de texteTextboxLorsque l'attribut type a du text comme valeur , le navigateur crée une zone de texte sur une seule ligne. La balise input est auto-fermante.l'attribut maxlength définit le nombre de caractères maximum acceptés dans le champ. Par exemple, si nous demandions un code postal en France, l'attribut maxlength pourrait avoir une valeur de 5.

Page 14 : 14LES FORMULAIRESLe Label chaque contrôle de formulaire doit avoir son propre élément label qui décrit aux utilisateurs la fonctionnalité du champ.Il peut être utilisé de deux manières :Enroulez autour de la description textuelle et de l'élément de contrôle de formulaire.Séparé du contrôle de formulaire et utilisez le for pour indiquer à quel contrôle de formulaire il s'agit d'une étiquette.

Page 15 : 15LES FORMULAIRESPremier exemple :

Page 16 : 16LES FORMULAIRESZone de texte multiligne textareaL'élément textarea est utilisé pour créer une zone de texte multiligne .Une balise qu’il faut ouvrir et fermer.Pas de value= " ", le texte par défaut se met entre les deux balises ouvrante et fermante.L'attribut cols indique la largeur de la zone de texte.L'attribut rows indique combien de lignes la zone de texte doit occuper verticalement.

Page 17 : 17LES FORMULAIRESChamp de mot de passePassword inputla balise input avec une valeur de type "password" est utilisée pour créer une zone de texte dont ses caractères sont masqués.Même si le mot de passe est masqué à l'écran, les données d'un champ "mot de passe" ne sont pas nécessairement envoyées de manière sécurisée au serveur.Il peut également avoir les attributs size et maxlength comme le la zone de texte d'une seule ligne.

Page 18 : 18LES FORMULAIRESLes boutons radio input type="radio"Les boutons radio permettent aux utilisateurs de sélectionner une seule option parmi plusieurs.La valeur est importante : c'est elle qui est renvoyée au serveur.La valeur de chacun des boutons dans un groupe devrait être différent .Les boutons radio d'un groupe doivent avoir le même nom.L'attribut " checked " est utilisé pour indiquer quelle valeur doit être sélectionnée lors du chargement de la page.Un seul bouton radio dans un groupe doit utiliser l'attribut "checked".

Page 19 : 19LES FORMULAIRESLes cases à cocher checkbox input type="checkbox"Les cases à cocher permettent aux utilisateurs de sélectionneret désélectionnez un ou plusieur soptions. L'attribut value indique la valeur envoyée au serveur si cela la case est cochée.L'attribut " checked " est utilisé pour indiquer quelle valeur doit être sélectionnée lors du chargement de la page.

Page 20 : 20LES FORMULAIRESLa liste déroulanteDrop Down ListLa balise select est utilisée pour créer une liste déroulante.La balise select contient au moins deux option éléments. La balise option est utilisée pour spécifier les options que le l'utilisateur peut choisir.l'attribut value de l'élément option indique le valeur qui est envoyée au serveur.L'attribut "selected" est utilisé pour indiquer l'option qui doit être sélectionné lors du chargement de la page.

Page 21 : 21LES FORMULAIRESLa liste déroulanteDrop Down List:ExempleSi l'utilisateur ne sélectionne pas d'option, alors la premièreoption France dans notre exemple sera envoyée à le serveurcomme valeur pour ce contrôler.

Page 22 : 22LES FORMULAIRESLa liste déroulanteDrop Down Listles attributs « size » et « multiple » de la balise select peut transformer une liste déroulante en une liste d'options multiples qui affiche plusieurs options à la fois.

Page 23 : 23LES FORMULAIRESLa liste déroulanteDrop Down ListLa balise optgroup, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément select.

Page 24 : 24LES FORMULAIRESZone d'entrée de fichier input type="file".La zone de saisie de fichier aide les utilisateurs à uploader leurs fichiers ver le serveur . Utiliser les attributs suivants:AttributDescriptionacceptnous permet de définit les types de fichier qui doivent être acceptés. filesUn objet Filelist qui liste les fichiers choisiscaptureLa source à utiliser pour capturer des images ou des vidéosmultipleUn attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.

Page 25 : 25LES FORMULAIRESZone d'entrée de fichier input type="file"Exemples:.

Page 26 : 26LES FORMULAIRESBouton d’envoiSubmit ButtonLe bouton d’envoi input type="submit" est utilisé pour envoyer les informations saisies dans les éléments de contrôle du formulaire au serveur. L’attribut value est obligatoire et permet de donner le « titre » du bouton.les boutons de soumission peuvent être affichés dans différents manières basées sur les navigateurs.CSS peut être utilisé pour contrôler l'apparence des boutons de soumission

Page 27 : 27LES FORMULAIRESBouton de resetReset ButtonLe bouton de reset input type= " reset" est utilisé pour remettre à zéro toutes les informations saisies dans les éléments de contrôle du formulaire. L’attribut value permet de donner le « titre » du bouton.les boutons de reset peuvent être affichés dans différents manières basées sur les navigateurs.CSS peut être utilisé pour contrôler l'apparence des boutons de reset.

Page 28 : 28LES FORMULAIRESBouton image Image ButtonLe input type= " image" est utilisé pour ajouter une image pour le bouton d'envoi . nous pouvons utiliser "src, width, height, et alt" attribues tels que nous les utilisons avec les Balise img

Page 29 : 29LES FORMULAIRESBoutonUn bouton est similaire au bouton d'envoi, mais contrairement aux autres styles de saisie, il peut inclure du texte ou une image. Sa mise en forme par défaut lui donne un aspect de bouton biseauté.Trois types : button, reset, submit

Page 30 : 30LES FORMULAIRESChamp cachéHidden inputOn peut cacher un champ avec input type="hidden".Les données dans les contrôles cachés ne sont pas affichéessur le page mais nous pouvons les voir si nous utilisons l'option« Afficher la source ».les données sont dans l'attribut value

Page 31 : 31LES FORMULAIRESChamps de forme HTML5Bon nombre des nouveaux éléments HTML5 que nous examinonsnous aideront également dans nos tâches de validation lorsque lesutilisateurs remplissent des formulaires.Ces entrées tenteront de valider et/ou de limiter l'entrée de l'utilisateuraux seules données valides. En faisant cela immédiatement, nouscréons une meilleure expérience à la fois pour l'utilisateur et leprogrammeur.Traditionnellement, la validation devait être effectuée lors de l'envoides données au serveur, ce qui entraînait le rechargement de la pageen cas d'erreurs.L'autre approche populaire consistait à effectuer une validation àl'aide de JavaScript côté client en évitant le rechargement, mais lavalidation devrait toujours être répétée sur le serveur au cas oùl'utilisateur final aurait désactivé JavaScript.Certains des types d'entrée les plus utiles sont les suivants :input type="url" Tentera de formater le texte de l'utilisateur dansun lien approprié, ou affichera une erreur. input type="email"S'assurera qu'un e-mail saisi est dans le bon format ou affichera uneerreur.

Page 32 : 32LES FORMULAIRESChamps de forme HTML5input type="email" S'assurera qu'un e-mail saisi est dans le bon format ou affichera une erreur.Nous pouvons également créer une entrée qui limite les valeurs à une plage fixe et incrémente les limites, que nous devions auparavant afficher à l'utilisateur sur la page, puis valider après la saisie :Ces limites sur une plage affichées sous forme de curseur sont également valables sur un champ numérique affichées sous forme de flèches :

Page 33 : 33LES FORMULAIRESChamps de forme HTML5HTML5 introduit également une multitude de contrôles de calendrier et d'heure. Nous pouvons spécifier une date, une semaine ou un mois ainsi qu'une heure, un jour et une heure et un jour et une heure locaux. Chacun de ces champs limitera l'entrée de l'utilisateur aux champs valides pour ce type.Options de calendrier :On peut utiliser les attributs min et max afinde restreindre les datesqui peuvent êtresaisies par l'utilisateur. où la date que nouspouvons sélectionner doit être comprise entrela date en valeur min et la date en valeur max

Page 34 : 34LES FORMULAIRESChamps de forme HTML5Options de calendrier :Le input type="month" crée un contrôle de mois et d'année oùl'utilisateur peut entrer le format de date comme "AAAA-MM".On peut utiliser les attributs min et max afin de restreindre les datesqui peuvent être saisies par l'utilisateur.Ce champ n'est implémenté que sur Chrome,Opera et Edge sur les ordinateurs. Pour lesautres navigateurs qui ne supportent pas cechamp , le champ sera transformé en unesimple Zone de Texte

Page 35 : 35LES FORMULAIRESChamps de forme HTML5Options de calendrier :Le input type="week" définit un contrôle de semaine et d'année. l'apparence de ce champ est différente selon les navigateurs.

Page 36 : 36LES FORMULAIRESChamps de forme HTML5Options de temps :l'apparence de ces champ est différente selon les navigateurs.

Page 37 : 37LES FORMULAIRESChamps de forme HTML5Plus des Champs:input type="color" input type="tel"input type="search"input type="url"

Page 38 : 38LES FORMULAIRESBalises de jeu de champs et de légende La balise fieldset est utilisée pour regrouper les contrôles liés dans un formulaire qui dessine un cadre autour des contrôles du formulaire lié. L'attribut form"formid" Spécifie à quelle forme le "fieldset" appartient. La balise legend représente une légende pour le contenu de son élément parent fieldset.l'attribut "disabled" spécifie qu'un groupe d'éléments de formulaire liés doit être désactivé

Page 39 : 39LES FORMULAIRESBalises de jeu de champs et de légende: Example:

Page 40 : 40MDN WEB DOCS: WEB FORMS — WORKING WITH USER DATA: https://developer.mozilla.org/en-US/docs/Learn/FormsW3C HTML Forms: https://www.w3schools.com/html/htmlforms.aspMENDEZ, MICHAEL. THE MISSING LINK: AN INTRODUCTION TO WEB DEVELOPMENT AND PROGRAMMING. 2014, CH14.SOURCES D’ INFORMATION