Manipulation de formulaire

Transcription

1 1 Manipulation de formulaire points abordés outils (et balises) de création de formulaire, javascript, validation de formulaire en php site de départ nous nous baserons sur cette version pour l'exercice réalisation du formulaire réaliser dans la page contact.htm le formulaire suivant en vous aidant des outils de création de Dreamweaver

2 2 tous les outils nécessaires aux formulaires sont dans le menu «Insertion>formulaire» ici nous utiliserons: 1) Formulaire (pour créer toute la zone du formulaire) 2) champ de texte (pour créer la zone de texte « ») 3) zone de texte (pour créer la zone «message») 4) Bouton (pour créer le bouton de validation du formulaire) chaque champ (et zone) doit être nommé (ici c'est le champ de texte « »

3 3 le formulaire doit lui «pointer» vers la page qui permettra de traiter le formulaire. Ici la page s'appelera valider.php (on remarque aussi la méthode d'envois des données du formulaire, ici la méthode sera «GET») voici le source html correspondant au formulaire réalisé <form id="form1" name="form1" method="get" action="valider.php"> <p>vous pouvez me laisser un message: <br /> votre <input name=" " type="text" id=" " size="40" maxlength="40" /> <br />votre message: <textarea name="message" id="message" cols="45" rows="3"></textarea> <br /> <input type="submit" name="button" id="button" value="envoyer" /> </p> </form>...

4 4 Création d'un script javascript de vérification avant d'envoyer le message, il serait intéressant de vérifier que l'internaute à bien rempli le champ « » et «message». Pour cela nous allons écrire un script en javascript pour vérifier l'ensemble. (ressource possible: ) 1) mettre un événement sur le formulaire qui appelera une fonction javascript de verification <form id="form1" name="form1" method="get" action="valider.php" onsubmit="return valider()"> 2) créer une zone de script javascript (en principe dans l'entete head du document) //... 3) déclarer dans la zone de script la fonction appelée dans le onsubmit (ici la fonction s'appelera valider() ) function valider()... 4) dans cette fonction, réaliser les tests sur (et ensuite sur message) permettant de vérifier si ces champs sont vide ou non (si ils sont vide il faut afficher une fenetre d'alerte pour prévenir de les remplir ) function valider() if(document.form1. .value!= "") return true; else alert("saisissez un "); return false; Création de la page de traitement du formulaire recopier la page contact.htm en la renommant «valider.php» dans cette page valider.php, insérer le message suivant à la place du formulaire.

5 5 Dans le source html, créez une zone de script php (<?php...?> ). Le script peut être placé n'importe où mais par soucis de clarté nous le placerons au début du fichier html. Pour récupérer les informations du formulaire envoyées par la méthode GET nous devons utiliser la syntaxe suivante $_GET[' '] (pour récupérer l' ) et $_GET['message'] (pour récupérer le message) pour envoyer un mail en php, nous utiliserons la fonction php mail ( param1, param2, param3 ) param1: le mail du destinataire (chaine de caractère) param2: le sujet du message (chaine de caractère) param3: le corps du message (chaine de caractère) avec ces éléments, réaliser le script php permettant de vous faire envoyer les informations du formulaire. Mettre les pages du site réaliser sur votre serveur et tester le formulaire (vérifier que le mail vous arrive bien dans votre boite aux lettres) remarque il existe un parametre supplémentaire (param4) qui permet d'accéder à plus d'option (entre autre, spécifier le mail de l'expéditeur: la syntaxe est alors du type ''From: toto@exemple.com'' ) (doc: ) Adaptation aux différentes versions du site en prenant une autre version du site (la deuxieme par exemple), faites les modifications nécessaire pour que l'ensemble fonctionne. (bien réfléchir... cela doit prendre quelques secondes...) pour aller plus loin ajouter un champ «nom» au formulaire et modifier le php pour que ce champ soit pris en compte. rechercher sur internet des scripts javascript permettant une vérification plus fine du formulaire avant l'envois : exemple vérifier que la longueur du mail est plus de 10 caractères... (ex: document.form1. .value.length...) exemple: vérifier que l' est du type xxxxx@yyyyyy...