Médiaforma

All posts tagged formulaires

Dans la section précédente, vous avez appris à transmettre des données par l’URL. Cette technique fonctionne parfaitement, mais elle a deux principaux désavantages :

  • Le nombre de paramètres transmissibles est limité par la longueur de l’URL.
  • Les paramètres transmis apparaissent en clair et l’utilisateur peut, s’il le souhaite, les modifier en agissant sur l’URL.

Pour résoudre ces deux problèmes, on utilise une transmission de données par formulaires.

Voici le code d’un formulaire traditionnel. Lorsque l’utilisateur clique sur le bouton Envoyer, les données contenues dans le formulaire sont transmises au script traitement.php en utilisant la méthode POST :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transission de données par un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <table><tr><td><label>Prénom</label></td>
      <td><input type="text" name="prenom"></td></tr>

      <tr><td><label>Nom</label></td>
      <td><input type="text" name="nom"></td></tr>

      <tr><td><label>Mot de passe</label></td>
      <td><input type="password" name="mdp"></td></tr>

      <tr><td><label>Age</label></td>
      <td><select name="age">
        <option><20 ans</option>
        <option>20 à 50 ans</option>
        <option>>50 ans</option>
      </select></td></tr>

      <tr><td><label>Observations</label></td>
      <td><textarea name="observations" cols="40" rows="4"></textarea></td></tr>

      <tr><td><input type="submit" name="Nom" value="Envoyer"></td>
      <td><input type="reset" name="Nom" value="Annuler"></td></tr>
      </table>
    </form>
  </body>
</html>

Voici le code du script traitement.php :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Traitement des données envoyées par formulaire</title>
  </head>
  <body>
  <?php
    $prenom = $_POST["prenom"];
    $nom = $_POST["nom"];
    $motDePasse = $_POST["mdp"];
    $age = $_POST["age"];
    $obs = $_POST["observations"];

    echo "<b>Données reçues :</b><br><br>";
    echo "Prénom : $prenom<br>";
    echo "Nom : $nom<br>";
    echo "Mot de passe : $motDePasse<br>";
    echo "Age : $age<br>";
    echo "Observations : $obs<br>";
    ?>
  </body>
</html>

Exécutons ce code dans WAMP Server. Nous entrons un prénom, un nom et un mot de passe. Nous sélectionnons une tranche d’âge et nous insérons quelques mots dans le textarea. Un clic sur le bouton Envoyer et les données sont transmises au programme traitement.php et affichées à l’aide d’instructions echo.

Pour éviter les problèmes d’injection de type Cross-Site Scripting, pensez à convertir les données entrées par l’utilisateur en appliquant (systématiquement !) la fonction htmlspecialchars() à chacune des données récupérées. Le code du script traitement.php devient alors le suivant :

<?php
  $prenom = htmlspecialchars($_POST["prenom"]);
  $nom = htmlspecialchars($_POST["nom"]);
  $motDePasse = htmlspecialchars($_POST["mdp"]);
  $age = htmlspecialchars($_POST["age"]);
  $obs = htmlspecialchars($_POST["observations"]);

  echo "<b>Données reçues :</b><br><br>";
  echo "Prénom : $prenom<br>";
  echo "Nom : $nom<br>";
  echo "Mot de passe : $motDePasse<br>";
  echo "Age : $age<br>";
  echo "Observations : $obs<br>";
?>

Plusieurs éléments HTML permettent de créer des formulaires, qui peuvent être transmis à des pages PHP ou envoyés par e-mail.

Balise Signification
<form name="nom" action="traitement.php" method="post">

</form>

Formulaire
<fieldset>contenu</fieldset> Groupe d’options permettant de rassembler plusieurs champs
<legend>texte</legend> Légende affichée dans un élément fieldset
<label>texte</label> Simple légende textuelle
<input type="text" name="Nom" id="identifiant" value="valeur"> Zone de texte
<input type="button" name="Nom" id="identifiant" value="Légende du bouton"> Bouton
<input type="image" src="image.jpg" id="identifiant"> Un bouton contenant une image
<input type="password" name="Nom" id="identifiant" value="valeur par défaut"> Zone de saisie d’un mot de passe
<input type="checkbox" name="Nom" id="identifiant" value="Valeur"> Case à cocher
<input type="radio" name="Nom" id="identifiant" value="Valeur"> Bouton radio
<input type="hidden" name="Nom" id="identifiant" value="valeur"> Champ caché. Bien qu’il n’apparaisse pas dans le formulaire, son contenu est envoyé au serveur lorsque l’utilisateur clique sur le bouton Submit
<input type="submit" name="Nom" id="identifiant" value="Texte affiché sur le bouton"> Bouton d’envoi, pour envoyer les données du formulaire au serveur
<input type="reset" name="Nom" id="identifiant" value="Texte affiché sur le bouton"> Bouton de réinitialisation du formulaire
<input type="email" name="Nom" id="identifiant"> Champ de saisie spécialisé pour recevoir des adresses e-mail
<input type="url" name="Nom" id="identifiant"> Champ de saisie spécialisé pour recevoir des adresses URL
<input type="file" name="Nom" id="identifiant"> Fichier local
<textarea cols="Nombre colonnes" rows="Nombre lignes" id="identifiant">

Texte par défaut

</textarea>

Zone de saisie multiligne
<select name="Nom" id="identifiant">

<option value="valeur1">

<option value="valeurN">

</select>

Liste déroulante
<select name="Nom" size="5" id="identifiant">

<option value="valeur1">

<option value="valeur5">

</select>

Zone de liste (ici, cinq éléments sont affichés)

Voici un exemple de formulaire contenant deux champs textuels (prenom et nom) et un bouton submit. La page traitement.jsp sera exécutée lorsque l’utilisateur cliquera sur le bouton submit et les données seront passées selon la méthode POST :

<html>
  <head>
    <title>Formulaire</title>
  </head>
  <body>
    <form action="traitement.jsp" method="post">
      Votre prénom <input type="text" name="prenom"><br/>
      Votre nom <input type="text" name="nom"><br/>
      <input type="submit" value="Valider">
    </form>
  </body>
</html>

Pour réceptionner les données envoyées par le formulaire, vous utiliserez la méthode request.getParameter() en précisant l’attribut name de la balise qui fournit une donnée. Voici le code à utiliser :

<html>
  <head>
    <title>Traitement du formulaire</title>
  </head>
  <body>
    <%
      String prenom = request.getParameter("prenom");
      String nom = request.getParameter("nom");
      out.println("Bonjour " + prenom + " " + nom);
    %>
  </body>
</html>

Et voici le résultat :