Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite 1 INSCRIPTION À UN SITE On suppose que l'inscription à un site offre de nombreux avantages. Pour s'inscrire à ce site il faut saisir : deux fois la même adresse mail (qui fait fonction d'identifiant) deux fois le même mot de passe (entre 6 et 8 lettres minuscules ou majuscules) 1.1.1 APERÇU AVANT SAISIE 1.1 LA PAGE INSCRIPTION.HTM 1.1.2 LE CODE DE LA PAGE (À COMPLÉTER) <body> <h1>inscription au site </h1> <form action = "inscription_trait.php" method ='post' > <label>tapez votre adresse mail : </label> <input type = "email" name ='mail1 id = 'mail1'> <label>confirmez votre adresse mail : </label> <input type = "email" name ='mail2' id = 'mail2'> <label>saisissez mot de passe :</label> <input type = "password" name ='passe1' id = 'passe1'> <label>confirmer le mot de passe : </label> <input type = "password" name ='passe2' id = 'passe2'> <label></label><button type = 'submit'> inscription</button> 1.1.3 COMMENTAIRE N'oubliez pas les attributs pattern, required et placeholder On utilise le type email pour les deux premiers input. Pour être valide la saisie dans un champ de type email doit contenir le caractère @ Les quatre champs sont obligatoires Chaque champ est identifié par l'attribut name (pour le traitement PHP ultérieur) et par l'attribut id (pour le traitement JAVASCRIPT futur) Après soumission le tableau associatif $_POST comprendra les clés suivantes : mail1 mail2 passe1 passe2 1.1.4 APERÇU APRÈS SAISIE 1
On va pourvoir soumissionner (toutes les saisies sont valides par rapport à leur pattern respectif ) et pourtant il y divergence entre les deux adresses mail saisies ainsi qu'entre les deux mot de passe saisis! 1.2 INSCRIPTION_PLUS.HTM Le contrôle de saisie côté client n'est pas suffisant parce qu'il est incomplet. En effet si on saisit deux adresses mail correctes mais différentes et/ou deux mots de passe corrects mais différents on peut soumissionner les données! Or il faut aussi que les deux adresses mails soient identiques et que les deux mots de passe soient aussi identiques. Pour pouvoir faire des comparaisons entre les "values" de deux champs il faut utiliser JAVASCRIPT Créez le code à partir de la page précédente 1.2.1 LE CODE DE LA PAGE <label></label><button type = 'button'> inscription</button> </form> <script> document.queryselector('button').onclick = function() { // création des variables objet var mail1 = document.queryselector('#mail1'); var mail2 = document.queryselector('#mail2'); var passe1 = document.queryselector('#passe1'); var passe2 = document.queryselector('#passe2'); var form =document.queryselector('form'); // élément HTML identifié via son id // élément HTML identifié via sa balise // test if(mail1.value == mail2.value && passe1.value == passe2.value && mail1.value.length > 4 && passe1.value.length >5) { // alors alert ('ok') ; form.submit() ; } else alert('erreur de saisie') ; } // fin fonction </script> </body></html> 1.2.2 LE CSS Aucun changement par rapport au code précédent 1.2.3 COMMENTAIRE DU HTML Peu de changement par rapport au code de la page précédente. Le bouton est maintenant de type button! Ainsi on peut associer à cet objet une fonction JS 1.2.4 COMMENTAIRE DU JAVASCRIPT Dans le code JAVASCRIPT on doit manipuler des objets HTML. Si on clique sur l'objet de type button on appelle une fonction Dans cette fonction on crée 5 variables objet ; chaque variable objet référençant un élément du formulaire. Pour référencer chaque objet du formulaire on utilise la méthode queryselector de l'objet document Il est rappelé que le paramètre de cette méthode est un sélecteur CSS! Donc entre parenthèses vous écrivez : 'nombalise' ou '#nomid' ou '.nomclasse' Ensuite on fait un test que l'on peut traduire de la façon suivante : Si contenu du premier champ est égal au contenu du deuxième et si contenu du troisième est égal au contenu du quatrième et si le contenu du premier supérieur à 4 et le contenu du troisième > à 5 Alors message OK + soumission des données Sinon message d'alerte 2
2 LE LANGAGE JAVASCRIPT 2.1 PROPRIÉTÉS ET MÉTHODES 2.1.1 LES PROPRIÉTÉS value et length sont des propriétés Soit un champ identifié par la variable objet passe1 alors passe1.value veut dire contenu de ce champ et passe1.value.length veut dire longueur de la chaîne contenue dans ce champ 2.1.2 LES MÉTHODES submit() queryselector() sont des méthodes Une méthode est une fonction qui s'applique à un type d'objet. Exemples : La méthode submit() s'applique à un formulaire la méthode queryselector s'applique au document Comme dans notre fonction le formulaire est identifié via la variable objet form alors l'instruction est : form.submit(). Si le formulaire était identifié par la variable objet formulaire alors l'instruction serait : formulaire.submit() 2.2 RÉFÉRENCER UN OBJET HTML EN JAVASCRIPT Faisons le point sur cette problématique! 2.2.1 MÉTHODE QUERYSELECTOR() Si un élément HTML est identifié par un id ou une classe ou par une balise alors on peut utiliser la méthode queryselector() En effet dans cette méthode le paramètre est un sélecteur CSS : un id syntaxe : queryselector('#nom_id') ou une balise syntaxe : queryselector('nom_balise') ou une classe syntaxe : queryselector('.nom_classe') Attention : si plusieurs éléments HTLM de la page sont délimités par la même balise ou affectés de la même classe alors la méthode queryselector() retourne le premier élément 2.2.2 MÉTHODE QUERYSELECTORALL() Alors que la méthode queryselector retourne un seul élément HTML la méthode queryselectorall retourne une collection d'objets Donc si vous avez l'instruction suivante : var champs = document.queryselectorall('input') champs est une variable indicée (ou tableau de variables) qui comprend autant d'éléments que de input dans le formulaire. La première valeur du tableau a l'indice 0! Vous pouvez donc écrire : var mail1 = champs[0] 2.2.3 POURQUOI CRÉER DES VARIABLES OBJET? Car c'est plus simple d'écrire : mail1.value que document.queryselectorall('input')[0].value C'est beaucoup plus simple d'écrire : form.submit() que document.queryselector('form').submit() Voilà pourquoi il est conseillé fortement de créer (et d'utiliser) des variables objets dans tous les langages orientés objet tel JAVASCRIPT. 2.2.4 RESPECTEZ LA CASSE En JAVASCRIPT les mots réservés qui sont des mots composés prennent une majuscule pour la première de chaque mot mais à partir du deuxième mot 2.3 LA PAGE 'INSCRIPTION_PLUS_BIS.HTM' Nous allons réécrire le code de la fonction JS avec la méthode queryselectorall pour référencer les différentes input. 2.3.1 EXTRAIT DU SCRIPT JAVASCRIPT var champs = document.queryselectorall('input'); // champs référence la collection des input ; champs : variable indicée! var mail1 = champs[0] ; var mail2 = champs[1] ; 3
var passe1 = champs[2] ; var passe2 = champs[3] ; var form =document.queryselector('form'); // test : pas de changement dans le code 2.3.2 ALLÉGEMENT DU CODE HTML On ne référence plus les éléments HTML au travers de leur id. Donc dans le code HTML l'attribut ID devient inutile! Supprimez les attributs ID de chaque input et testez! 3 LIVRE D'OR Le pseudo : entre 6 et 8 lettres non accentuées minuscules ou majuscules 3.1 APERÇU AVANT SAISIE 3.2 LE CODE DE LA PAGE <style> *{font-size : 14pt } form { margin : auto ; width : 600px ; border : 1px solid black; } label, input, button, textarea{display : inline-block ; width : 45% ; margin : 10px ;height : 30px ;} label {vertical-align : top } h2 {height : 50px ; text-align : center ; } input:valid {color : green} input:invalid {color : red} </style></head> <body> <form action = "livredor_trait.php" method = "post"> <h2>donnez votre avis dans le livre d'or</h2> <input type ="hidden" name ="provenance" value = "message pour livre d'or" > <label>votre pseudonyme:</label> <input type ="text" name ="pseudo" ="8" required = '[A-z]{6,8}' = 'entre 6 et 8 lettres'> <label>votre message : </label> <textarea name ="message" required = 'Tapez votre message ici'></textarea> <label></label><button type ="submit" >Validez</button> </form> 3.3 NOUVEAUTÉS 3.3.1 CHAMP MASQUÉ Nous avons un input de type hidden (masqué). Donc c'est champ qui n'apparait pas mais qui est bien réel et qui a une value. Après soumission il y aura dans la page livredor_trait.php une variable nommée $_POST['provenance'] qui aura pour valeur : message pour livre d'or Attention la value de ce champ contient le caractère ' donc la chaîne doit être délimitée par les caractères " et non pas '. Ou alors il faut échapper le caractère ' Essayer avec échappement du caractère ' : value = 'message pour livre d\'or'> 3.3.2 ZONE DE TEXTE MULTI-LIGNES Nous avons le conteneur TEXTAREA. Il s'agit d'une zone de saisie resize (l'internaute peut modifier sa taille). On peut saisir du texte sur plusieurs lignes ; il suffit d'appuyer sur ENTER pour passer à la ligne! 4
4 LA PAGE RENSEIGNEMENTS.HTM Dans le formulaire de cette page on a de nouveaux types de zones de saisie : une liste, un groupe de boutons radio, deux groupes de cases à cocher 4.1 APERÇU Suite aperçu : 4.2 LE CODE (À COMPLÉTER) <style> * { font-family : sans-serif ; color : navy ; font-size : 12pt; } form {margin : auto; border : 1px solid black ; width : 80% ;} h2 {text-align : center ; min-height : 30px } label, input, button, select{display : inline-block ; width : 40% ; min-height : 30px; } input[type =radio], input[type =checkbox], span {width : 10% ; vertical-align : middle} input:valid {color : green; } input:invalid {color : red ; } </style></head> <body> <form action = "renseignements_trait.php" method="post"> <h2>fiche de renseignements en ligne <br> * : champs obligatoires</h2> <input type ='hidden' value = 'renseignements en ligne' name ='info'> <fieldset><legend>votre identité</legend> <label>nom *</label><input type ="text" name ="nom" ="pas d'accents" ="[A-z']{3,30}"> <label>prénom * </label><input type ="text" name ="prenom" required placeholder ='accents autorisés' ='[A-zéèùê]{3,30}'> <fieldset><legend>civilité</legend> <span>monsieur</span><input type ='radio' value = 'M' name = 'civilite' checked> 5
<span>madame</span><input type ='radio' value = 'Mme' name = ''> <span>mademoiselle</span><input type ='radio' value = 'Mlle' name = ''> </fieldset> <label>votre tranche d'âge </label> <select name = 'age'> <option value = 'tranche1'>moins de 20 ans </option> <option value = 'tranche4' selected>plus de 60 ans </option> </select> </fieldset><!-- fin identité--> <fieldset><legend>loisirs</legend> <fieldset><legend>jeux pratiqués</legend> <span>aucun</span><input type ='checkbox' value = 'aucun' name = 'jeux[]' checked> <span>poker</span><input type ='checkbox' value = 'poker' name = 'jeux[]'> </fieldset> <fieldset><legend>sports pratiqués</legend> <span>aucun</span><input type ='checkbox' value = 'aucun' name = 'sports[]' checked> <span>vélo</span><input type ='checkbox' value = 'vélo' name = 'sports[]'> </fieldset> </fieldset><!--fin loisirs--> <fieldset><legend>vos coordonnées</legend> <label>adresse * </label><input type ='text' name ="adresse1" required ='n et rue '> <label>adresse </label><input type ='text' name ="adresse2" ='n appart et étage '> <label>adresse *</label><input type ='text' name ="adresse3" required ='code postal et localité'> <label>téléphone *</label> <input type ="tel" name ="tel1" ='10' required ='10 chiffres collés' ='[0-9]{10}'> <label>autre numéro (facultatif) </label> <input type ="tel" name ="tel2" ='10' ='10 chiffres collés' ='[0-9]{10}'> <label>adresse mail * </label><input type ="" maxlength ="30" name ="email" required = ' @ '> </fieldset><!--fin coordonnées--> <label></label><button type ="">Envoyer</button><label></label><button type ="" >Effacer</button> </form> 4.3 COMMENTAIRE 4.3.1 DU CSS Notez les nouveaux sélecteurs : input[type =radio] et input[type = checkbox] pour la mise en forme des boutons radio et des cases à cocher 4.3.2 DU HTML Le formulaire est structuré grâce au conteneur FIELDSET. On peut associer à la balise début de FIELDSET le conteneur LEGEND Pour créer une liste il faut utiliser le conteneur SELECT et au sein de ce conteneur le conteneur OPTION pour chaque item de la liste. Pour sélectionner par défaut un item de la liste il faut utiliser l'attribut selected Par défaut la liste est déroulante sauf emploi de l'attribut size = 'nombre de lignes' Pour créer un bouton radio il faut utiliser la balise input avec la valeur radio pour l'attribut type. Pour créer une case à cocher il faut utiliser la balise input avec la valeur checkbox pour l'attribut type. Pour créer un groupe de boutons radio ou de cases à cocher il faut que tous les boutons/cases aient la même valeur pour l'attribut name. Dans un groupe de boutons radio on ne peut cocher qu'un bouton alors que dans un groupe de cases on peut cocher plusieurs cases. Donc le nom d'un groupe de cases à cocher doit comporter des crochets afin que PHP crée une variable indicée (et non pas une variable simple). Pour qu'un bouton radio /case à cocher soit coché par défaut il faut utiliser l'attribut checked. Pour saisir un numéro de téléphone on peut utiliser un input avec le type tel. Ce type d'input ne présente aucun intérêt pour un ordinateur puisqu'il autorise la saisie de tous les caractères possibles (sauf emploi de l'attribut pattern) mais est très utile pour les mobiles (apparition d'un clavier numérique). 6