Logo de kxs.frCours d'informatique pour le lycée et la prépa

Formulaires

Introduction

Les formulaires permettent à l’utilisateur de saisir simplement des données et de les envoyer à une page.

Premier formulaire

Pour utiliser un formulaire, il faut deux fichiers. Un fichier qui contient le formulaire et un autre qui va traiter les données envoyées. Ce deuxième fichier ne peut donc pas être statique, nous utiliserons donc PHP encore une fois.

1) Créez ou remplacez le fichier index.html dans votre dossier var/www/html et placez-y le code suivant : 

<!DOCTYPE html>
<html>
    <head>
        <title>Un formulaire</title>
        <meta charset="utf-8">
    </head>

    <body>
        <h1>Un formulaire</h1>
        <form method="get" action="traitement.php">
            <label for="nom">Nom</label>
            <input type="text" name="nom" value="" id="nom">
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom" value="" id="prenom">
            <input type="submit" value="Envoyer">
        </form>
    </body>
</html>

2) Dans le même dossier, créez un fichier traitement.php et placez-y le code suivant : 

<h1>Traitement du formulaire</h1>
<p>Bonjour <?php echo $_GET['prenom']; ?> <?php echo $_GET['nom']; ?>, votre formulaire a bien été traité.</p>

3) Allez maintenant à l’adresse http://localhost/, complétez le formulaire et cliquez sur « Envoyer ». Si tout a bien fonctionné vous devriez voir vos nom et prénom sur la page.

Comment cela fonctionne ?

L’élément html <form> permet d’envoyer des formulaires. Pour cela, il faut lui spécifier une méthode (ici GET) et un fichier cible (ici traitement.php). Lors d’un clic sur le bouton submit, l’ensemble des champs à l’intérieur du formulaire sont envoyés au fichier cible par la méthode choisie.

Il existe plusieurs types de champs, mais nous n’avons utilisé que des champs de type text. On associe à ses champs un nom (name) qui correspond à la variable qui contiendra le contenu du champ. Enfin on associe un label à un champ input en utilisant l’attribut for pour pointer vers l’id du champ.

4) Notez l’adresse complète de la page de traitement du formulaire.

Lorsque vous cliquez sur le bouton « envoyer » vous êtes envoyé sur la page traitement.php avec les variables ajoutées au bout de l’URL. Nous avions déjà utilisé cette méthode de manière plus « artisanale » dans le TP précédent. C’est la méthode GET.

5) Modifiez le nom et le prénom dans l’URL. Que constatez-vous ?

Formulaire plus discret

La méthode GET est efficace mais il n’est pas forcément désirable d’avoir toutes les variables dans l’URL. Surtout si on envoie des textes dans un formulaire. Pour cela il existe une deuxième méthode, la méthode POST.

Nous allons cette fois utiliser ce fichier index.html : 

<!DOCTYPE html>
<html>
    <head>
        <title>Un formulaire</title>
        <meta charset="utf-8">
    </head>

    <body>
        <h1>Un formulaire</h1>
        <form method="post" action="traitement.php">
            <label for="nom">Nom</label>
            <input type="text" name="nom" value="" id="nom">
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom" value="" id="prenom">
            <input type="submit" value="Envoyer">
        </form>
    </body>
</html>

On a juste changé la méthode en post.

Et comme ficher traitement.php : 

<h1>Traitement du formulaire</h1>
<p>Bonjour <?php echo $_POST['prenom']; ?> <?php echo $_POST['nom']; ?>, votre formulaire a bien été traité.</p>

Ici, on a juste changé le nom de la variable $_GET en $_POST.

6) Allez à nouveau à l’adresse http://localhost/, complétez le formulaire et cliquez sur « Envoyer ». Que remarquez-vous dans la barre d’adresse ?

Attention la méthode POST ne fait que cacher les variables à l’utilisateur lambda, mais elles restent visibles très facilement.

7) Ouvrez le moniteur réseau (ctrl + shift + J…) et rechargez la page de traitement du formulaire. Cliquez sur la requête POST et allez dans l’onglet « Requête ». Que voyez-vous ?

Bilan

Deux méthodes permettent d’envoyer des formulaires : GET et POST. On utilise en général la méthode POST car elle cache les variables et permet d’avoir des URLs plus « propres ». Mais la méthode POST n’est pas « sécurisé » pour autant, il ne faut pas faire confiance aux données qui arrivent d’un formulaire, quelque soit la méthode.

8) Après avoir cherché le champ qui permet de saisir du texte et le champ qui n’est pas affiché, modifiez le formulaire pour pouvoir saisir votre citation favorite et passer le code « turing » à la page traitement.php sans que l’utilisateur le voit. La page traitement.php devra alors afficher vos nom, prénom, la citation et le code « turing ».