Aller au contenu

Les formulaires☘

L'élément form☘

On délimite les éléments d'un formulaire avec la balise html <form>:

<form method="post" action="fichier.php">

ICI LES ELEMENTS DU FORMULAIRE

</form>

  • L'attribut method aura pour le moment toujours la valeur "post". L'autre valeur usuelle est "get", nous verrons plus loin des différences entre ces deux méthodes. Rappelons qu'il s'agit là de deux méthodes du protocole http.

  • L'attribut action a pour valeur le nom du fichier auquel on enverra les données du formulaire pour traitement de ces données. L'envoi des données à ce fichier se fera par un clic sur un élément bouton de type submit.

Un exemple de formulaire☘

Le fichier whatsyourname.html ci-dessous contient un formulaire avec un élément "zone de texte" dans lequel on vous demande d'entrer votre nom.

Lorsqu'on clique sur l'élément input de type submit, cette donnée est envoyée à la page traitement.php qui se contentera d'afficher un message.

  • Le fichier whatsyourname.html:
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> formulaire  </title>
    <style>
    form{
        margin: 20px;
        border: 6px ridge #aaa;
        border-radius: 20px;
        display: inline-block;
        padding: 20px;
    }
    </style>
</head>

<body>

<form method="post" action="traitement.php">
    <p>
        <label for="votreNom">Entrez votre nom:</label>
        <input type="text"  name="nom" id="votreNom"/>
    </p>

    <p>
        <input type="submit" value="Cliquez pour valider"/>
    </p>
</form>

</body>
</html>
  • Le fichier traitement.php
<!DOCTYPE html>
<html lang="fr">


<head>
    <meta charset="utf-8">
    <title> traitement du formulaire  </title>
</head>

<body>
    <p> Bonjour 
        <?php
            $reponse = $_POST['nom']; 
            echo $reponse;
        ?>
    </p>
</body>
</html>

Info

La variable super globale $_POST est un tableau associatif récupérant les valeurs attribuées aux variables dans le formulaire.

$_POST['nom'] a une valeur parce que l'élément input avait un attribut name de valeur nom.

Créez ces deux fichiers, déposez les sur votre espace serveur et testez le fonctionnement.