Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

(6) Les formulaires Les formulaires introduits dans le HTML sont l’élément esse

(6) Les formulaires Les formulaires introduits dans le HTML sont l’élément essentiel qui permet l’interactivité entre un site et ses visiteurs. Création d’un formulaire HTML Un document contenant un formulaire doit avoir la structure minimale suivante : <html> <head> <title>Titre de la page</title> </head> <body> <form method="post" action="nomdefichier.php"> <fieldset> <legend>Titre du formulaire</legend> <!–– Corps du formulaire ––> </fieldset> </form> </body> </html> - L’élément <form> possède certains attributs obligatoires et d’autres sont utilisés dans des circonstances particulières en fonction des besoins. - L’attribut action="nomdefichier.php" est obligatoire.  Il désigne le fichier qui va traiter (sur le serveur) les informations saisies dans le formulaire. Pour que le fichier qui traite les données soit à coup sûr celui qui contient le formulaire, vous pouvez utiliser la variable $_SERVER["PHP_SELF"], qui contient le nom du fichier en cours d’exécution comme valeur de l’attribut action. Exemple : <form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>"> - method="post|get" détermine la méthode d’envoi des données vers le serveur. Les formulaires | Pr. Moulay Youssef Hadi 1 o get (méthode par défaut) : présente l’inconvénient d’ajouter les données du formulaire à l’adresse URL du fichier qui les traite. o post : les données transmis ne sont plus visible dans l’URL. - L’élément <fieldset> permet de créer des blocs visuels contenus entre les balises <fieldset> et </fieldset> pour structurer le formulaire en fonction des champs qu’il contient. - L’élément <legend> contient le titre de chacun de ces blocs. Eléments XHTML d’un formulaire - L’élément <input /> : Permet de créer les composants classiques des formulaires. La différenciation de ces composants s’effectue en définissant la valeur de leurs attributs (notamment l’attribut type). L’attribut name est obligatoire, car c’est lui qui permet d’identifier les champs côté serveur et ainsi de récupérer leur contenu. L’attribut type permet d’identifier les types des composants du formulaire : Text Password Checkbox Radio Submit Reset File Hidden invisible - L’élément <textarea> : Permet de créer un champ de saisie de texte sur plusieurs lignes. <textarea name="commentaire" cols="45" rows="8" > Tapez vos commentaires ici </textarea> Les formulaires | Pr. Moulay Youssef Hadi 2 - L’élément <select> : Crée une liste de sélection d’options parmi lesquelles l’utilisateur fait un choix, chaque option devant être définie par un élément <option> séparé. <select name="maliste"> <option value="valeur 1"> Texte choix 1</option> <option value="valeur 2"> Texte choix 2</option> <option value="valeur 3"> Texte choix 3</option> </select> Exemple : Formulaire type <html> <head> <title>Formulaire traité par PHP</title> </head> <body> <form action="cible.php" method="post"> <!–– Premier groupe de composants––> <fieldset> <legend><b>Vos coordonnées</b></legend> <label>Nom : </label> <input type="text" name="nom" size="40" maxlength="256" value="votre nom" /><br /> <label>Prénom : </label><input type="text" name="prenom" size="40" maxlength="256" value="votre prénom" /><br /> <label>Mail : </label><input type="text" name="mail" size="40" maxlength="256" value="votre mail" /><br /> <label>Code : </label><input type="password" name="code" size="40" maxlength="6" /> <br /> <input type="radio" name="sexe" value="homme" /> Homme<br /> <input type="radio" name="sexe" value="femme" /> Femme<br /> <select name="pays" size="1"> <option value="France"> France</option> <option value="Belgique"> Belgique</option> <option value="Suisse"> Suisse</option> <option value="Canada"> Canada</option> </select> <br /> </fieldset> <!–– Deuxième groupe de composants––> <fieldset> <legend><b>Vos goûts</b></legend> <input type="checkbox" name="pomme" value="pomme" /> Pommes<br /> <input type="checkbox" name="poire" value="poire" /> Poires<br /> <input type="checkbox" name="scoubidou" value="scoubidou" /> Abricot<br /> <textarea name="gouts" cols="50" rows="5" onclick="this.value=''"> Décrivez vos goûts en détail </textarea> <br /><br /> Les formulaires | Pr. Moulay Youssef Hadi 3 </fieldset> <!–– Troisième groupe de composants––> <fieldset> <legend><b>Envoyez nous votre photo</b></legend> <input type="file" name="fichier" accept="image/jpeg" /> <input type="hidden" name="MAX_FILE_SIZE" value="10000" /> <br /><br /> <input type="reset" value="Effacer" /> <input type="submit" value="Envoyer" /> <br /><br /> </fieldset> </form> </body> </html> Récupération des données du formulaire - Lorsque l’utilisateur clique sur le bouton d’envoi, une requête HTTP est envoyée au serveur à destination du script désigné par l’attribut action de l’élément <form>. - La requête contient toutes les associations entre les noms des champs et leur valeur. - Ces associations se trouvent dans l’en-tête HTTP si la méthode POST est utilisée et dans l’URL s’il s’agit de la méthode GET. Les formulaires | Pr. Moulay Youssef Hadi 4 Valeurs uniques Les valeurs uniques proviennent des champs de formulaire dans lesquels l’utilisateur ne peut entré qu’une valeur. Les valeurs sont contenues sur le serveur dans des tableaux associatifs dits superglobaux appelés $_POST et $_GET, selon la méthode choisie. Les clés de ces tableaux sont les noms associés aux champs par l’attribut name. - Cas de la méthode POST <html> <head> <title>Formulaire traité par PHP</title> </head> <body> <form action= "<?php echo $_SERVER["PHP_SELF"] ?>" method="post"> <fieldset> <legend><b>Infos</b></legend> <div> Nom : <input type="text" name="nom" size="40" /> <br /> Débutant : <input type="radio" name="niveau" value="débutant" /> Initié : <input type="radio" name="niveau" value="initié" /><br /> <input type="reset" value="Effacer" /> <input type="submit" value="Envoyer" /> </div> </fieldset> </form> <?php if(isset($_POST["nom"]) && isset($_POST["niveau"])) { echo "<h2> Bonjour ".stripslashes($_POST["nom"])." vous êtes ".$_POST["niveau"]." en PHP</h2>"; } ?> </body> </html> Résultat : Les formulaires | Pr. Moulay Youssef Hadi 5 Cas de la méthode GET Avec la méthode GET, vous récupérez les données du formulaire dans les variables $_GET["nom"] et $_GET["niveau"], comme ci-dessous : <?php if(isset($_GET["nom"]) && isset($_GET["niveau"])){ echo "<h2> Bonjour ".stripslashes ($_GET["nom"])." vous êtes ".$_GET["niveau"]." en PHP</h2>"; } ?> Pour simplifier la manipulation des valeurs issues du formulaire, utilisez des variables : $sonnom= $_POST["nom"]; $sonniveau=$_POST["niveau"]; Maintien de l’état du formulaire En cas d’erreur de saisie sur un formulaire, l’utilisateur est obligé de recommencer l’ensemble de la saisie. Pour éviter cela, il est utile de maintenir l’état du formulaire après traitement en réaffichant l’ensemble des saisies. Exemple : Maintien de l’état du formulaire <html> <head> <title>Formulaire traité par PHP</title> </head> <body> <form action= "<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> <fieldset> <legend><b>Infos</b></legend> Nom : <input type="text" name="nom" size="40" value="<?php if(isset($_POST["nom"])) echo $_POST["nom"]?>"/> <br /> Débutant : <input type="radio" name="niveau" value="débutant" <?php if(isset($_POST["niveau"]) && $_POST["niveau"]=="débutant") echo "checked=\"checked\"" ?> /> Initié : <input type="radio" name="niveau" value="initié" <?php if(isset($_POST["niveau"]) && $_POST["niveau"]=="initié") echo "checked=\"checked\"" ?>/><br /> <input type="reset" value="Effacer" /> <input type="submit" value="Envoyer" /> </fieldset> </form> <?php if(isset($_POST["nom"]) && isset($_POST["niveau"])) { echo "<h2> Bonjour ". stripslashes($_POST["nom"]). " vous êtes ".$_POST["niveau"]." en PHP</h2>"; } ?> Les formulaires | Pr. Moulay Youssef Hadi 6 </body> </html> - Les valeurs multiples Certains champs de formulaire peuvent avoir plusieurs valeurs sous un même nom de composant (groupe de cases à cocher, liste de sélection multiple …). Dans tous les cas, ce n’est pas une valeur scalaire mais un tableau qui est récupéré côté serveur. Exemple : Bleu:<input type="checkbox" name="choix[]" value="bleu" /> Blanc:<input type="checkbox" name="choix[]" value="blanc" /> l’utilisateur peut cocher les deux cases simultanément. Le programmeur récupère ces valeurs dans les variables suivantes : $_POST["choix"][0] qui contient la valeur "bleu" $_POST["choix"][1] qui contient la valeur "blanc" Exemple : Récupération des valeurs multiples Le fichier form5.html <html> <head> <title>Listes à choix multiples</title> </head> <body> <form method="post" action="form5.php" > <fieldset> <legend>Recherche d'emploi: complétez la fiche </legend> <div> <span>Nom<input type="text" name="ident[]" /> Prénom<input type="text" name="ident[]" /> Age<input type="text" name="ident[]" /> <br /><br /> Langues pratiquées<br /> <select name="lang[]" multiple="multiple"> <option value="français"> français</option> <option value="anglais"> anglais</option> Les formulaires | Pr. Moulay Youssef Hadi 7 <option value="allemand"> allemand</option> <option value="espagnol"> espagnol</option> </select><br /><br /> Compétences informatiques<br /> XHTML<input type="checkbox" name="competent[]" value="XHTML" /> PHP<input type="checkbox" name="competent[]" value="PHP" /> MySQL<input type="checkbox" name="competent[]" value="MySQL" /> ASP.Net<input type="checkbox" name="competent[]" value="ASP.Net" /> </span><br /><br /> <input type="reset" value="EFFACER"/> <input type="submit" value="ENVOI"/> </div> </fieldset> </form> </body> </html> Le fichier form5.php <html> <head> <title>Compétences Info</title> </head> <body> <?php if(isset($_POST["ident"]) && isset($_POST["lang"]) && isset($_POST["competent"])) { echo "<table border=\"1\"><tr><th> Récapitulatif de votre fiche d'information personnelle</th></tr><tr><td>"; $nom=$_POST["ident"][0]; $prenom=$_POST["ident"][1]; $age=$_POST["ident"][2]; $lang = $_POST["lang"]; $competent=$_POST["competent"]; echo"Vous êtes :<b> $prenom ", stripslashes($nom) ,"</b><br />Vous avez <b>$age ans </b> "; echo "<br />Vous parlez :"; echo "<ul>"; foreach($lang as $valeur) { echo " <li> $valeur </li>"; Les formulaires | Pr. Moulay Youssef Hadi 8 } echo "</ul>"; echo "Vous avez des compétences informatiques en :"; echo "<ul>"; foreach($competent as $valeur) { echo "<li> $valeur </li> "; } echo "</ul> </td></tr>"; } else { echo"<script type=\"text/javascript\">" ; echo "alert('Cochez au moins une compétence!!');"; echo "window.history.back();"; echo "</script>"; } ?> </body> </html> Transfert de fichier vers le serveur L’inclusion d’un élément XHTML <input type="file" /> dans un formulaire crée une situation particulière. Il ne s’agit plus de transmettre une ou plusieurs valeurs scalaires au serveur mais l’intégralité d’un fichier, lequel peut avoir une taille importante et un type quelconque. Ce fichier doit évidemment être présent sur l’ordinateur du visiteur. Exemple : Transfert de fichier <html> <head> <title>Transfert de fichier</title> </head> <body> <form action="form.php" method="post" enctype="multipart/form-data"> <fieldset> <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> <legend><b>Transfert de fichier</b></legend> <table> <tbody> Les formulaires | Pr. Moulay Youssef Hadi 9 <tr> <th>Fichier</th> <td> <input type="file" name="fich" accept="image/gif" size="50"/> </td> </tr> <tr> <th>Clic!</th> <td> <input type="submit" value="Envoi" /></td> </tr> </tbody> </table> </fieldset> </form> <!––Code PHP ––> <?php if(isset($_FILES['fich'])) { echo "Taille maximale autorisée :",$_POST["MAX_FILE_SIZE"], " octets<hr / >"; echo "<b>Clés et valeurs du tableau \$_FILES </b><br />"; foreach($_FILES["fich"] as $cle => $valeur) { echo "clé : $cle valeur : $valeur <br />"; } //Enregistrement et renommage du fichier $result=move_uploaded_file($_FILES["fich"]["tmp_name"],"imagephp.gif "); if($result==TRUE) {echo "<hr /><big>Le transfert est réalisé !</big>";} else {echo "<hr /> Erreur de transfert n˚",$_FILES["fich"]["error"];} } ?> </body> </html> Les formulaires | Pr. Moulay Youssef Hadi 10 Transfert de plusieurs fichiers uploads/Finance/ les-formulaires-creation-d-x27-un-formulaire-html.pdf