Architecture et langages Web (NFA040)

Exercices ( Protocoles et Formulaires )

Olivier Pons
(pons@cnam.fr)

2022

Formulaire

On veut créer un formulaire d'inscription à une salle de sport. Il faut:

  1. En supposant que l'inscription sera traitée sur le serveur magym.com par le programme inscription.php, écrire le code HTML correspondant.

Protocoles

Le serveur web correspondant à l'url http://www.exam.fr contient à la racine le fichier index.html suivant :

<html>
 <head>
   <title>page1</title>
 </head>
 <body>
   <p>
     La page intéressante est la 
     <a href="http://deptinfo.cnam.fr/www/page2.html">
       page 2</a>
   </p> 
 </body>
</html>

D'autre part, sur le serveur deptinfo.cnam.fr dans le répertoire www on trouve les fichiers suivants:

<html>
  <head>
    <title>page 2</title>
  </head>
  

  <body>
    <h1>Seconde page</h1>
    <form action="./page3.php" method="POST">
      
      <label for="champ1">Champs 1 </label>
      <input name="champ1" id="champ1"
         value="valeur1" type="text" />
      <br/>
      
      <input value="envoyer" type="submit" />
    </form>
    
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>page 3</title>
  </head>
  <body>
  <?php
     echo "Bravo vous avez donné au champ la valeur :";
     echo $_POST["champ1"] ;
     ?>
  <br/>
  continuons avec un autre fomulaire
  <h1> Page 3</h1>
  
  
  <form action="./page4.php" method="GET">
    <p>
      Champs 2 <input name="champ2" id="champ2" 
              value="valeur" type="text" />
      <br/>
      Champs 3 <input name="champ3" id="champ3"
              value="valeur" type="text"/>
      <br/>
      <input value="envoyer" type="submit"/>
    </p>
  </form>
  
  </body>
  </html>
<?php
$a= $_GET['champ2']; $b=$_GET["champ3"];
echo "Bravo vous avez donné à vos champs les valeurs";
echo "$a et  $b";

echo "<br/> that's all folk !"
?>

Dans son navigateur, un utilisateur demande l'url http://www.exam.fr/index.html, puis, cette page étant visualisée, il clique le lien page 2 pour obtenir la page page2.html. Il remplit alors le formulaire avec la valeur « toto ». Il clique le bouton , il reçoit alors le résultat du traitement du formulaire par page3.php

Il ne touche pas au formulaire et clique le bouton valider. Il reçoit alors la page4.php

Visualisez les échanges entre le client et les serveur en précisant le plus possible les entêtes.

Remarque :

`echo` est la fonction d'affichage de php  
`$a` `$b` est une variable php  
 `$_GET` et `$_POST` permette de récupérer les variable transmise par le client

Mise en forme(CSS) de Formulaire

En supposant que vous disposer de l'image de fond monImage,proposez un CSS pour que le formulaire de l'exercice 1 se présente comme ci-dessous: