Les formulaires. Les formulaires HTML 7/10/15. PermeDent de saisir des informa2ons des usagers de la page web.

Transcription

1 Les formulaires Les formulaires HTML PermeDent de saisir des informa2ons des usagers de la page web. Ces informa2ons peuvent être traitées par un programme dont on aura spécifié l'url sur un serveur ou en u2lisant un script JavaScript. Un formulaire con2ent des champs de saisie, des éléments sélec2on, des choix, des boutons, des listes déroulantes, etc. L'élément <form> permet de créer un formulaire. 2 1

2 <form> Permet de créer un formulaire. ADributs: name = "nom" du formulaire, u2liés pour références. Method= "Get Post": méthode HTTP u2lisée pour transporter le contenu du formulaire. ac2on="url" : URL désignant le programme pour traiter le contenu du formulaire. enctype="type MIME" : spécifie l'encodage u2lisé pour le contenu du formulaire. Les éléments composant le formulaire sont spécifiés entre <form> et 3 Exemple de formulaire <form name="job" method="get" ac2on="hdp:// enctype="text/plain"> Nom: <input type="text" name="champnom" > <br> Prénom: <input type="text" name="champprenom"> <br> Téléphone: <input type="text" name="champtel"> <br> Courriel: <input type="text" name="champcourriel"> <br> <hr> Valider: <input type="submit" value="go"> form.html 4 2

3 <input> Permet de spécifier des champ de saisie et d'interac2on. Plusieurs types de champs de saisie sont possibles: text, budon, file, hidden, image, password, reset, submit, radio, check box D'autres types ont été introduits dans HTML5 (voir plus loin!) ADributs: type ="type": indique le type du champ name = "nom": Nom du champs. A ne pas confondre avec l'é2quète externe associée au champ. Id="id": indique l'iden2ficateur du champ. value = "un texte" : contenu du champ ou é2quète de bouton. src ="URL": URL de l'image pour un champ submit, bu9on ou image. 5 Types de champs text : Permet de saisir un texte en entrée de données. file: Permet de saisir un nom de fichier pour les opéra2ons de chargement (upload) hidden: un champ qui n'est pas affiché. password : Permet de saisir un mot de passe. Le contenu tapé est remplacé par " *******" submit: Permet d'envoyer le contenu du formulaire à un serveur. Ce contenu doit être traité par un programme. reset : Permet d'effacer le contenu courant du formulaire. image: Permet de définir une image comme un bouton submit. radio: Permet d'exprimer une liste de choix. L'usager en choisit un. Les choix sont mutuellement exclusifs. checkbox: Permet d'exprimer une liste de boutons de choix. L'usager peut en choisir un ou plusieurs. 6 3

4 Exemple- Formulaire <form name="job"> Nom: <input type="text" name="champnom" ><br> Prénom: <input type="text" name="champprenom" ><br> Téléphone: <input type="text" name="champtel" value= "(514) "> <br> Courriel: <input type="text" name="champcourriel"> <br> <hr> Langue maternelle: <br> <input type="radio" name="champlangue" value="fr" > Francais<br> <input type="radio" name="champlangue" value="eng" > Anglais<br> formulaire1.html <input type="radio" name="champlangue" value="autre" > Autre. Specifiez: <input type="text" name="champslangue" ><br> <hr> Langages de programma2on apprix: <br> <input type="checkbox" name="champlangage" value="cplus" > C++<br> <input type="checkbox" name="champlangage" value="java" > Java <br> <input type="checkbox" name="champlangage" value="cshap" > C#<br> <input type="checkbox" name="champlangage" value="autre1" > Autre 1. Specifiez: <input type="text" name="champslangage1" ><br> <input type="checkbox" name="champlangage" value="autrew" > Autre 2. Specifiez: <input type="text" name="champslangage2" ><br> <hr> SoumeDre votre CV (format PDF): <input type="file" name="champcv" accept="image/pdf" /> <hr> Valider: <input type="submit" value="go"> ou <input type="image" src="go.jpg" width="50"> 7 Champs text Un champ de saisie qui permet l'entrée de données L'aDribut size donne la taille visible en caractères, de ce champ L'aDribut maxlength : donne la limite du nombre de caractères qu'on peut entrer. <input type="text" name="champtel" size=12 maxlength=15 > <br> 8 4

5 Champs boutons Définit un élément sur lequel on peut cliquer. Il y a quatre types : submit, reset, image et bu9on. submit et image: envoient les données au serveur. reset: vide le formulaire. bou9on : ne fait rien. U2lisé avec les scripts JavaScript. L'aDribut value représente le label du boiton. ; L'aDribut width définit sa largeur en pixels L'aDribut src permet de spécifier l'url de l'image pour un bouton de type image. <input type="submit" name="valida2on" value="go" size="30"> <input type="image" name="valida2on" src="go.jpg" width="50"> <input type="budon" name=" valida2on " value= "Go" onclick="alert('que voulez- vous?')"> 9 Champs checkbox et radio Ils permedent de spécifier une liste d'op2ons: radio: choix mul2ples checkbox: choix mul2ples mutuellement exclusifs L'aDribut name donne un nom à la liste de choix Important pour l'exclusion mutuelle dans le cas de checkbox L'aDribut value définit les valeurs pour chacun des choix Seule la valeur sélec2onnée est soumise au serveur. L'aDribut checked permet de spécifier une valeur présélec2onnée lors du chargement de la page <input type="checkbox" name="champlangage" value="cplus" > C++<br> <input type="checkbox" name="champlangage" value="java" checked> Java <br> <input type="checkbox" name="champlangage" value="csharp" > C#<br> 10 5

6 Champs password Définit un champ de saisie d'un mot de passe. Le contenu saisi sera remplacé par "***..***" ADen2on: Ce contenu n'est pas encrypté lors de l'envoi des données du formulaire. L'aDribut maxlength donne la taille maximale du mot de passe. <input type="password" name="motdepasse" maxlength=8" > 11 Champs hidden Définit un champs caché. L'usager ne le voit pas mais il existe dans le code HTML. On l'u2lise pour stocker des valeurs que le serveur envoie au navigateur Son usage ressemble à celui des cookies. Sa valeur peur être changée par un programme script. <input type="hidden" name="iden2fiant" value="aob12345" /> 12 6

7 L'aDribut enctype Cet adribut spécifie le type d'encodage du contenu du formulaire. Les codes admis sont: applica2on/x- www- form- urlencoded mul2part/form- data : aucun encodage text/plain Par défaut c'est applica2on/x- www- form- urlencoded: Les caractères sont codés avant d'être envoyés au serveur: Les espaces sont codés + Les caractères spéciaux sont replacés par leurs codes hexadécimal (ISO par exemple) Exemple: "É2enne Fabergé Lancôme" est codé "%C92enne+Faberg%E9+Lanc%F4me" 13 Les zones de saisie de texte L'élément <textarea> permet de définir une zone de saisie de texte qui s'étend sur plusieurs lignes. On peut y medre un contenu ini2al. ADributs rows="nombre" : nombre de lignes de la zone cols="nombre": nombre de colonnes de la zone. name="nom" : nom de la zone. readonly: indique que la zone est en lecture seulement (si elle a un contenu ini2al!). <textarea r ows="3" cols="30"> Vous avez une zone de texte. Vous pouvez effacer ce contenu ou y ajouter du texte! </textarea> 14 7

8 Les listes déroulantes <select> spécifie une liste déroulante d'op2ons. Chaque op2on est définie par le sous- élément <op2on>. Les op2ons figurent dans une fenêtre dont on peut spécifier le nombre d'éléments visibles avec l'adribut size. L'aDribut name donne un nom à la liste. On sélec2onne une ligne à la fois. Si one veut faire une sélec2on mul2ple, on u2lise l'adribut muldple. L'élément <opdon> possède quelques adributs: selected: spécifie qu'une adop2on est pre- sélec2onnée. Value="texte" : spécifie la valeur envoyée au serveur pour un item, suite à la sec2on. 15 Les listes déroulantes <form name="job2" enctype="text/plain"> Faite votre selec2on:<br> Faite votre selec2on:<br> <select size=3> <op2on value="programmeur">programmeur</op2on> <op2on value="programmeur web">programmeur web</op2on> <op2on value="architecte systeme">architecte systeme</op2on> <op2on value="analyste">analyste</op2on> <op2on value="concepteur web">concepteur web</op2on> <op2on value="admindb"> Administrateur de BD</op2on> </select><p> Mo2va2ons: <br> formulaire2.html <textarea rows="5" cols="30"> Vous pouvez nous faire part de raisons qui vous poussent à appliquer chez- nous. Merci. </textarea> <hr> Valider: <input type="submit" value="go"> 16 8

9 Présenta2on des formulaires Il faut prendre les précau2ons nécessaires pour aligner les éléments du formulaire de manier à en faciliter l'u2lisa2on. L'u2lisa2on de <table> et <div> sont une bonne façon de le faire. <form> <table cellspacing=5 fra> <td> <b> Informa2ons personnelles :</b></td><tr> <td> Nom:</td> <td><input type="text" name="champnom"></td><tr> <td> Prénom: </td> <td><input type="text" name="champprenom"></td><tr> formulairetabule.html <td rowspan=2> <b> Langue de choix :</b> </td> <td><input type="radio" name="champlangue" value="fr" > Francais</td><tr> <td><input type="radio" name="champlangue" value="eng" > Anglais</td><tr> <td rowspan=2> <b> Langage de programma2on :<b> </td> <td> <input type="checkbox" name="champlangage" value="cplus" > C++ </td><tr> <td> <input type="checkbox" name="champlangage" value="java" > Java </td> <tr> <td cospan=2> <input type="submit" value="go"> </td> </table> 17 <label> Permet d'associer une é2quede à un élément. L'élément doit être nommé avec l'adribut id. L'aDribut for spécifie le nome de l'élément auquel est associée l'é2quede. Si on clique sur l'é2quede, ca ac2ve le choix de l'élément. <form name="job3" enctype="text/plain"> <label for="francais">francais</label> <input type="radio" name="langue" id="francais" > <br> <label for="anglais">anglais</label> <input type="radio" name="langue" id="anglais"> <hr> Valider: <input type="submit" value="go"> 18 9

10 <fieldset> et <legend> <fieldset> permet de grouper des élément d'un formulaire et dessine une boite autour d'eux. On peut associer une légende à ce groupement grâce à l'élément <legend>. Il possède un adribut d'alignement: align <form name="job4"> <fieldset> <legend align=center> Informa2ons personnelle </legend> Nom: <input type="text" name="champnom" ><br> Prénom: <input type="text" name="champprenom" ><br> </fieldset> Valider: <input type="submit" value="go"> formulaire4.html 19 Le focus par tabula2on On peut naviguer entre champs en u2lisant la touche de tabula2on L'ordre de naviga2on est déterminé par l'adribut tablindex des l'élément tablindex="nombre" indique que l'élément est visité dans l'ordre indiqué par ce nombre. Tous les éléments ne comportant pas cet adribut sont traités à la fin <input type="text" name="champprenom" tabindex="3"> 20 10

11 Le focus par tabula2on <form name="job4"> Nom: <input type="text" name="champnom" tabindex="1" ><br> Prénom: <input type="text" name="champprenom" tabindex="3"><br> Téléphone: <input type="text" name="champtel" value= "(514) " tabindex="2"> <br> Courriel: <input type="text" name="champcourriel"> <br> <hr> <input type="radio" name="champlangue" value="fr" tabindex="4"> Francais<br> <input type="radio" name="champlangue" value="eng" tabindex="6"> Anglais<br> <input type="radio" name="champlangue" value="autre" tabindex="5"> Autre. Specifiez: <input type="text" name="champslangue" ><br> Valider: <input type="submit" value="go" tabindex=`7> formulaire5.html 21 Le focus par touches d'accès On peut naviguer entre champs en u2lisant des touches d'accès rapide. On u2lise l'adribut accesskey pour abréger l'accès à cet élément. accesskey="caracatere" Un appui sur ALT + le caractère (sur Windows) lui donne le focus. On peut u2liser cet adribut pour les éléments: <a>, <area>, <budon>, <input>, <label>, et <textarea>

12 Le focus par touches d'accès <form name="job6"> <label for="nom" accesskey="n"> Nom </label> <input type="text" name="champnom" id="nom"><br> <label for="prenom" accesskey="p"> Prénom </label> <input type="text" name="champprenom" id="prenom"><br> <label for="tel" accesskey="t"> Téléphone </label> <input type="text" name="champtel" value= "(514) " id="tel"> <br> <label for="courriel" accesskey="c"> Courriel</label> <input type="text" name="champcourriel" id="courriel"> <br> <hr> Valider: <input type="submit" value="go" > 23 Soumission des formulaires Dans l'élément <FORM> on spécifie les adributs: method="get POST": la méthode u2lisée pour envoyer le contenu du formulaire. ac2on="url": l'adresse de la ressource qui va traiter les données du formulaire. Avec la methode GET, les données sont rajoutées à l'url spécifiée par l'adribut acdon lors de l'envoi de la requête au serveur. Avec la méthode POST, les données du formulaire sont incluses dans le corps de la requête lors de l'envoie vers l'url de l'adribut ac2on

13 Transport des données du formulaire Données du formulaire GET URL HTTP/1.1 En- têtes Ligne vide Corps de la requête Ligne vide De: A. Obaid CP 8888, Suc. Centre ville H3C 3P8, Montréal, QC, Canada A: Bob Lajoie 17, Rue de la paix Parix, Cedex, 2000, France De: A. Obaid CP 8888, Suc. Centre ville H3C 3P8, Montréal, QC, Canada A: Bob Lajoie 17, Rue de la paix Parix, Cedex, 2000, France Message: Quand viendrez- vous nous voir? POST URL HTTP/1.1 En- têtes Ligne vide Corps de la requête Ligne vide Message: Quand viendrez- vous nous voir? 25 Transport des données du formulaire Les noms des éléments du formulaire et leurs valeurs sélec2onnées sont présentés au serveur selon la forme: nom=valeur et séparés par &. Sans oublier les champs cachés! Exemple: Dans le cas de GET, l'url soumis sera: hdp:// champnom=obaid&champprenom=abdel&champlangue=fr&champlangage=cpl us&champlangage=java <form name="job" method="get" ac2on="hdp:// Nom: <input type="text" name="champnom" ><br> Prénom: <input type="text" name="champprenom" ><br> <input type="radio" name="champlangue" value="fr" > Francais<br> <input type="radio" name="champlangue" value="eng" > Anglais<br> <input type="checkbox" name="champlangage" value="cplus" > C++<br> <input type="checkbox" name="champlangage" value="java" > Java <br> Valider: <input type="submit" value="go"> formulairetest.html 26 13

14 Transport des données du formulaire Dans le cas de POST, le corps de la requête soumise con2endra : champnom=obaid&champprenom=abdel&champlangue=fr&champlangage=cp lus&champlangage=java POST hdp:// HTTP/1.0 User- Agent: Mozilla/3.5 Content- Type: applica2on/x- www- form- urlencoded Content- Length: 32 champnom=obaid&champprenom=abdel& champlangue=fr&champlangage=cplus&champlangage=java 27 Les nouveaux éléments de forumlaires De nouveaux éléments de saisie ony été introduits dans HTML5 Éléments de saisie <input> introduits dans HTML5 color, date, datedme- local, , month, number, range, search, tel, week, url, etc. ADributs introduits autocomplete, autofocus, validate, novalidate, list, min, max, muldple, pa9ern, placeholder, required, step, readonly, disabled, etc. 14

15 Les nouveaux types de champs de saisie Champs de type et url: Certains téléphones intelligents adaptent leurs claviers en fonc2on de ces types. Pour le moment, aucune vérifica2on n est effcetuée <input type=" " /> <input type="url" /> Les nouveaux types de champs de saisie Champ de type number Le navigateur affiche un menu pour défiler les nombres ADributs (op2onnels): max : valeur maximale permise. min : valeur minimale permise step : pas des nombres Value: valeur par défaut Donnez votre age (entre 10 et 90): <input type="number" name= age" min="10 max= 90 step= 1 value= 18 > 15

16 Les nouveaux types de champs de saisie Le champ de type range Le navigateur affiche un menu de défilement ADributs (op2onnels): max: valeur max min : valeur min step : pas de varia2on des valeurs value : valeur par défaut <input type="range" min="0" max="10" step="2" value="6» /> Les nouveaux types de champs de saisie Le champ de type date, datedme- local, month, Dme permedent de saisir la date et le temps sous différents formats. Certains navigateurs offrent des interfaces pour faciliter la saisie. <input type="date" / > <input type="time" /> <input type="datetime-local" /> <input type="month" />: <input type="week" />: 16

17 Les nouveaux types de champs de saisie Le type search est u2lisé pour soumedre une requête à un engin de recherche. Semblable à un champ text Certain navigateurs adaptent la forme de ce champ! <input name="question " type="search"> <input type="submit" value="go"> Les nouveaux types de champs de saisie Le type color permet de saisir une couleur à par2r d une palede présentée par le navigateur <input type= color > 17

18 Les nouveaux adributs placeholder: con2ent un texte qui parait dans un champ lorsqu il est vide. autofocus : permet de focusser sur le champ dans la page. autocomplete (on /off): permet de compléter le champ à par2r de valeurs stockées. required : déclare un champ comme obligatoire. Oblige à saisir des données sinon on ne peut pas soumedre le formulaire. <input type="text" name= "lenom" placeholder= " Donnez votre nom ici" autofocus autocomplete="on" /> <input type=" " id= "courriel" required> <input type="submit"> Les nouveaux adributs Plusieurs navigateurs valident les données saisies si nécessaire. novalidate : enlève la valida2on du (champ du) formulaire disabled : le champ est desac2vé. Le champ parait mais on ne peut pas y saisir des données. <form ac2on="traitement"> Nom : <input type="text" name="session" value="jean" disabled><br/> Age : <input type="number" name="age" min="10" max="90"> <input type="submit"> <form novalidate> <input type=" " id= "courriel"> <input type="submit"> 18

19 Les nouveaux adributs datalist: réfère à une liste (avec l'élément <datalist>) qui présente une liste de choix. <form action="traitement.php" > Choisissez un des OS: <input list="systeme"> <datalist id="systeme"> <option value="windows 8"> <option value="windows 7"> <option value="ios 10-"> <option value="ios 10+"> <option value="linux"> </datalist> Les nouveaux adributs Plusieurs navigateurs (par défaut) valident les données saisies si nécessaire. novalidate : enlève la valida2on du (champ du) formulaire <form novalidate> <input type=" " id= "courriel"> <input type="submit"> 19

20 Les nouveaux adributs readonly : le champs est en lecture uniquement (ne peut pas être modifié). Son contenu est specié dans l'adribut value. disabled : le champ est desac2vé. Le champ parait mais on ne peut pas y saisir des donnée. Son contenu est specié dans l'adribut value. <form ac2on="traitement"> Nom : <input type="text" name="session" value="jean" readonly> <br/> Age : <input type="number" name="age" min="10" max="90"> <input type="submit"> <form ac2on="traitement"> Nom : <input type="text" name="session" value="jean" disabled><br/> Age : <input type="number" name="age" min="10" max="90"> <input type="submit"> Les nouveaux adributs muldple : permet de saisir plusieurs données dans un champ (pour les champs de types file et ). On peut sélec2onner plusieurs fichiers Ou peut donner une liste d adresses de courriel Courriels : <input type="mail" name="courriel" mul2ple> 20

21 Les nouveaux adributs pa9ern : permet de donner une expression régulière afin de vérifier le contenu saisi. Exemple: l'expression {0-9]{3}- {0-9]{4} correspond à un téléphone sans le code régional (ex ) Certains navigateurs réagissent ne cas de non respect du padern Telephone : <input type="tel" name="letelephone" padern="\([0-9]{3}\){0-9]{3}- {0-9]{5}" Title="Format: (nnn)- nnn- nnnn> 21