Aller au contenu principal

Envoyer un formulaire

Notions théoriques​

Dans la séance précédente, vous avez appris à créer un formulaire avec la balise <form> et les différents champs de saisie. Mais un formulaire, une fois rempli, doit envoyer ses données quelque part.

C'est le rôle de deux attributs de la balise <form> : action et method.

L'attribut action​

L'attribut action indique où les données du formulaire doivent être envoyées : l'URL de la page (souvent un script serveur) qui va traiter ces données.

<form action="traitement.php">
    ...
</form>
info

Si l'attribut action est absent, ou s'il vaut "#", le formulaire envoie ses données à la page actuelle.

L'attribut method​

L'attribut method indique comment les données sont envoyées au serveur. Il existe deux valeurs principales :

  • method="get" : Les données sont ajoutées dans l'URL, sous forme de paramètres visibles (par exemple ?nom=Alice&age=20). C'est la méthode utilisée par défaut si method n'est pas précisé.

  • method="post" : Les données sont envoyées dans le corps de la requête, invisibles dans l'URL.

<form action="recherche.php" method="get">
    ...
</form>

<form action="connexion.php" method="post">
    ...
</form>
attention

N'utilisez jamais method="get" pour envoyer des données sensibles (mot de passe, informations personnelles) : ces données apparaîtraient en clair dans l'URL, dans l'historique du navigateur, et pourraient être partagées par erreur si l'utilisateur copie le lien.

Bonne pratique - Choisir GET ou POST

Utilisez method="get" pour une simple recherche (l'URL peut ainsi être partagée avec les critères de recherche). Utilisez method="post" dès que le formulaire modifie des données, envoie un fichier, ou contient des informations sensibles.

Exemple pratique​

Comparons un formulaire de recherche (méthode GET) et un formulaire de connexion (méthode POST) :

<form action="recherche.php" method="get">
    <label for="q">Rechercher :</label>
    <input type="text" id="q" name="q">
    <button type="submit">Rechercher</button>
</form>

<form action="connexion.php" method="post">
    <label for="email">Email :</label>
    <input type="email" id="email" name="email">

    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password">

    <button type="submit">Se connecter</button>
</form>

Avec le formulaire de recherche, si l'utilisateur saisit "zelda", l'URL obtenue ressemblera à recherche.php?q=zelda. Avec le formulaire de connexion, ni l'email ni le mot de passe n'apparaîtront dans l'URL.

Test de mémorisation/compréhension​


A quoi sert l'attribut action d'un formulaire ?


Avec method="get", où apparaissent les données du formulaire ?


Quelle méthode choisir pour un formulaire de connexion avec mot de passe ?


Que se passe-t-il si l'attribut method n'est pas précisé sur un formulaire ?


A quoi correspond une URL du type recherche.php?q=zelda ?


TP pour réfléchir et résoudre des problèmes​

Vous allez compléter le formulaire de contact réalisé lors de la séance précédente, en lui ajoutant les attributs action et method, puis créer un second formulaire de recherche.

  1. Ouvrez le fichier index.html de votre TP sur les formulaires.

  2. Ajoutez les attributs action et method à votre formulaire de contact : les données doivent être envoyées vers une page envoi_message.php, sans apparaître dans l'URL.

  1. Ajoutez un second formulaire, plus simple, qui permet de rechercher un mot-clé sur le site. Ce formulaire doit envoyer ses données vers recherche.php, en les rendant visibles dans l'URL.
Bonne pratique - Toujours preciser method

Même si method="get" est la valeur par défaut, indiquez-la toujours explicitement : votre code sera plus clair pour quiconque le relit, y compris vous-même quelques mois plus tard.

📌 Une solution