Créer un fichier testform1.php dans le répertoire PHPtests (créé au chapitre précédent)
Copier le code suivant à l’intérieur
Accéder à l’URL pour tester le résultat.

<form method="post">
    <p>Votre nom : <input type="text" name="nom" /></p>
    <p>Votre âge : <input type="text" name="age" /></p>
    <p><input type="submit" value="OK"></p>
</form>

<h3>Les messages d'erreur disparaîtront une fois les champs renseignés</h3>
<div class="result">
    <?php echo $_POST['nom']; ?>
    <br><br>
    <?php echo $_POST['age']; ?>
</div>


<!-- optionnel : un peu de style -->

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 20px;
        background-color: #f9f9f9;
        color: #333;
    }

    form {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        margin: 20px auto;
    }

    form p {
        margin-bottom: 15px;
    }

    form input[type="text"],
    form input[type="submit"] {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

    form input[type="submit"] {
        background-color: #007BFF;
        color: white;
        cursor: pointer;
        border: none;
    }

    form input[type="submit"]:hover {
        background-color: #0056b3;
    }

    h3 {
        text-align: center;
        color: #555;
    }

    .result {
        margin: 20px auto;
        max-width: 400px;
        padding: 15px;
        background: #eaf4fc;
        border-radius: 5px;
        color: #0056b3;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
</style>

Pour aller plus loin

<form method="post">
    <p>Votre nom : <input type="text" name="nom" /></p>
    <p>Votre âge : <input type="text" name="age" /></p>
    <p><input type="submit" value="OK"></p>
</form>

<div class="result">
    <?php
    if (!empty($_POST['nom'])) {
        echo $_POST['nom'];
        echo "<br><br>";
    }

    if (!empty($_POST['age'])) {
        echo $_POST['age'];
    }
    ?>
</div>

Que fait ce code ?

  1. if (!empty($_POST['nom']) { ... } :
    • Ce morceau de code vérifie si le champ nom du formulaire contient une valeur.
    • $_POST est une superglobale en PHP qui récupère les données envoyées par un formulaire avec la méthode POST.
    • !empty() signifie « non vide » : cette fonction vérifie si une valeur existe et n’est pas vide.
    • Si le champ nom est rempli, son contenu sera affiché à l’écran grâce à echo $_POST['nom'];.
  2. if (!empty($_POST['age']) { ... } :
    • Cela fonctionne exactement de la même manière, mais pour le champ age.
    • Si le champ age contient une valeur, elle sera affichée à l’écran avec echo $_POST['age'];.
  3. echo "<br><br>"; :
    • Après avoir affiché la valeur du champ nom, deux sauts de ligne (<br>) sont ajoutés pour espacer l’affichage avant le champ suivant.

Quand ce code est-il exécuté ?

Comprendre le message « renvoyer le formulaire »

Si vous rafraichissez la page F5 même avec CTRL + F5 le message suivant apparait :

Vous noterez aussi que les valeurs entrées persistent.

Le comportement que vous observez est lié à la façon dont les navigateurs et le protocole HTTP gèrent les requêtes POST et GET.

Pourquoi le message de confirmation apparaît après un F5 ou Ctrl + F5 ?


Pourquoi les valeurs saisies persistent ?

Les données saisies persistent parce qu’elles sont stockées dans la variable PHP superglobale $_POST, qui conserve son contenu tant que la page n’est pas rechargée sans resoumission des données POST.


Résumé technique

  1. Requête POST initiale :
    • Vous envoyez le formulaire, et les données sont traitées par le serveur.
    • Le serveur renvoie une réponse HTTP (par exemple, HTML ou un autre contenu) au navigateur.
  2. Rafraîchissement (F5) :
    • Le navigateur essaie de répéter exactement la requête précédente (ici, une requête POST).
    • Cela inclut les mêmes données de formulaire, donc $_POST reste rempli avec les valeurs précédentes.
  3. Effet observé :
    • Le navigateur garde les données dans $_POST, ce qui fait persister les informations affichées.

Veuillez noter que dans cet exemple, pour « vider » l’affichage, il suffit de renvoyer le formulaire vide.