logo

TP : les formulaires

Utlilisation de wampserver

Dans ce TP nous avons besoin d'un serveur pour faire ses equêtes HTML. C'est pourquoi nous allons utiliser wampserver.

Lancer wampserver, attendez le wpasse au vert et cliquez dessus :

Placez les fichiers dans Répertoire www, puis testez-les en cliquant sur localhost.

Vous pouvez installer un serveur Apache sur votre Raspberry Pi. Voir le tutoriel

Exercice 1

Créez un fichier formulaires.html que vous allez placer dans répertoire www de wampserver.

Coller le code ci-dessous dans le fichier :

<!DOCTYPE html>
<html>
  <body>
   <h2 id="age" >Formulaire 1</h2>		
    <p>
      <form method="post" action="page1.php">
        Nom : <input type="text" name="nom"><br>
        prenom : <input type="text" name="prenom"><br>
        Age : <input type="number" name="age">
        <input type="submit" value="Envoyer">
      </form>
    </p>
  </body>
</html>

Voici le code php :

<html>
  <body>
    <?php
      $nom = $_POST['nom'];
      $prenom = $_POST['prenom'];
      echo $nom." et ".$prenom;
      if (isset($_POST['age'])){
        $a = $_POST['age'];
        if($a <20){
          echo "vous êtes jeune !";
          }
        elseif($a <50){
          echo "en pleine force de l'âge";
          }
        else{
          echo "bientôt la retraite";
          }
        }
      else{
        echo "il faut remplir le formulaire <a href='formulaires.html#age'>ici</a>";
        };
    ?>
  </body>
</html>

  1. Analyser ces 2 codes.
  2. Créez la page .php avec le code ci-dessus en liaison avec le formulaire.

Exercice 2 : Sans wampserver

Copiez la page html suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
  <title>Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP </title>
</head>
 </body>
  <form method="get" action="page.html">
    <p>Nom : <input type="text" name="nom" /></p>
    <p>Prénom : <input type="text" name="prenom" /></p>
    <p><input type="submit" name="Submit" value="Soumettre" /></p>
  </form>
 </body>
</html>

Recopiez la page page.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
  <title>Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP </title>
</head>
 <body>
   <div id="zone_text"></div>
 </body>
<script>
var zone = document.getElementById("zone_text");
//Affiche les donées envoyées avec La méthode « search » retourne une chaîne de caractères contenant tous les paramètres
zone.innerHTML = window.location.search;
document.write( "<br><br>");

function twRequeteVariable(sVariable) {
  // Éliminer le "?"
  var sReq = window.location.search.substring(1);
  // Matrice de la requête
  
  var aReq = sReq.split("&");
  // Boucle les variables
  for (var i=0;i<aReq.length;i++) {
    // Matrice de la variables / valeur
    var aVar = aReq[i].split("=");
    // Retourne la valeur si la variable 
    // demandée = la variable de la boucle
    if(aVar[0] == sVariable){return aVar[1];}
  }
  // Aucune variable de trouvée.
  return(false);
}
nom=twRequeteVariable("nom");
prenom=twRequeteVariable("prenom");
zone.innerHTML=zone.innerHTML+"<br>nom : "+nom+"<br>Prénom : "+prenom;
</script>
</html>

  1. Analysez ces 2 codes.
  2. Modifier ces 2 codes, tels qu'il affiche sur la page des résultats : "Bonjour prénom nom, vous êtes mineur/majeur" en fonction de l'âge saisi.