Cours 3 : traiter les formulaires en php

formulaire

Retour sur les formulaires

un exemple

 <form action="traite.php" method="get">
    <p>
      Surnom : <input type="text" /><br/>

    <label for="prenom">Prénom : </label>
              <input type="text" id="prenom" name="prenom"/><br/>
    <label for="nom">Nom : </label>
              <input type="text" id="nom"  name="nom"/><br/>
    <label for="email">email : </label>
              <input type="email" id="email" name="email"/><br/>

    <input type="radio" name="sexe" id="hom" value="homme" />
          <label for="hom">Homme</label><br/>
    <input type="radio" name="sexe" id="femme" value="femme" />
          <label for="femme">Femme</label><br/>

    <input type="submit" value="Envoyer le formulaire" />
    <input type="reset" />
    </p>
 </form>

Le résultat ici.

capture d'écran formulaire maison

le formulaire

Remarque
Navigation et saisie possibles intégralement au clavier dans le formulaire (touches Tab, Shift-Tab, flèches pour les boutons radio, espace pour les checkbox, les listes et les boutons, Entrée pour envoyer le formulaire).

Rôles des différents attributs :

id
permet de désigner un élément (par exemple les input,
désignés par les label)
for
attache un label à un élément de saisie désigné
par son id. Ainsi, quand on clique sur le label, l’élément est
activé.
name
nom du paramètre qui sera envoyé par le
formulaire au moyen de l’élément correspondant (voir
ci-dessous)
value
valeur renvoyée pour le paramètre
correspondant. Pour les input type="radio", il faut la
spécifier. Pour les input type="text", cet attribut permet de
fixer une valeur par défaut (qui sera affichée dans le champ de saisie).

Ce qui s’affiche dans la barre d’adresse (ici on a découpé l’url pour la rendre plus lisible) :

http://localhost:8888/HOME/IO2/traite.php?
surnom=chris&
prenom=Christophe&
nom=Prieur&
email=prieur%40liafa.fr&
sexe=homme

Traitement en php

Pour le tester en local sur son ordinateur, il faut installer un
serveur web avec interpréteur php.

  • Xampp, avec une
    version pour les trois grands systèmes (linux, windows, mac).
    Un tutorial, écrit par un collègue de l’École Polytechnique.
  • Wamp, sous
    Windows, easyphp est très
    utilisé.
  • Mamp (pour Mac)

Le manuel de référence du langage et sa
traduction en français, qui a parfois
tendance à basculer en anglais, mais ça ne vous fera pas de mal…

Exemple de traitement

<!-- début d'un document html normal, mais dans un fichier
   -- portant l'extension .php, en l'occurrence traite.php
   -- puisque c'est ce que j'ai indiqué dans l'attribut action
   -- de mon formulaire
   -->
<table border="1">
<?php
   affiche_parametre("nom");
   affiche_parametre("prenom");
   affiche_parametre("surnom");
   affiche_parametre("sexe");
?>
</table>

où la fonction affiche_parametre est définie plus tôt dans le
fichier :

    <?php
       function affiche_parametre($nom_param)
       {
         echo '<tr>';
         echo '<td>' . $nom_param . '</td>';
         echo '<td>' . $_REQUEST[$nom_param] . '</td>';
         echo '</tr>';
       }
     ?>;

En cas d’erreur, utiliser la commande shell php dans un terminal
peut simplifier le debugage (ici, php traite.php).

Séparation du code html et php

Toujours bien séparer les parties « surtout php » et les parties « surtout html ».
Par exemple, définir des fonctions
à l’intérieur du head (de même qu’on y met des
directives de style), et dans le body, insérer seulement des
appels de fonctions

Vérification des paramètres transmis (1ère partie)

    if(isSet($_REQUEST["nom"]) && $_REQUEST["nom"] != "")
    {
      $nom = $_REQUEST["nom"];
      echo "<p>Vous vous appelez $nom.</p>";
    }
    else
    {
      echo "<p>Votre nom s'il vous plait ?</p>";
      affiche_formulaire();
    }

Dans cet exemple, le même fichier php sera utilisé pour afficher le
formulaire et pour le traiter. Il suffira alors, dans les attribut du
formulaire, d’indiquer action="", ce qui signifie « le fichier courant ».

La vérification des paramètres sera traitée plus en détail la
prochaine fois, pour les questions de sécurité.

À retenir

  • les balises <?php ?> signalent du code php, le reste est renvoyé
    tel quel
  • commande echo pour envoyer du code html
  • function pour définir une fonction, par exemple dans le head
  • tableau $_REQUEST pour récupérer les valeurs des paramètres transmis
  • isSet() pour tester si un paramètre a été fourni

Un mot sur l’autocomplétion dans les formulaires

Les suggestions qui sont parfois apportées quand on remplit un champ
dans un formulaire, peuvent être fournies par des moyens différents :

  • le plus souvent, c’est le navigateur, qui a mémorisé les réponses
    qu’on a fournies sur d’autres pages d’autres sites, dans
    des input ayant le même identifiant que celui sur lequel
    on se trouve.
  • cela peut être programmé en javascript par le site sur lequel on se
    trouve, et en interaction avec le serveur, pour proposer
    les réponses les plus courantes (comme une recherche
    Google)
  • cela peut être aussi fourni par le formulaire lui-même, au moyen de
    l’utilisation d’un élément datalist associé à l’élément
    input (exemple sur w3schools)
Cette entrée a été publiée dans Cours, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

26 réponses à Cours 3 : traiter les formulaires en php

  1. En effet, si on ne vérifie pas bien les paramètres, ça peut donner ça :
    http://www.liafa.jussieu.fr/~prieur/IO2/Exemples/traite.php?surnom=JB&prenom=Jean&nom=Bon&email=jb%40liafa.fr&sexe=oui%3Cstyle%3Ebody{background:url(http://bit.ly/xdmHt9)%20no-repeat%20right%20top}table{-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-ms-transform:rotate(-20deg);-o-transform:rotate(-20deg);transform:rotate(-20deg)}%3C/style%3E

  2. Christophe dit :

    Baptiste, tu es tellement prévisible ;)

    C’est l’objet du prochain cours.

  3. À propos de prévisible, le captcha utilisé pour les commentaires ne fonctionne pas correctement, puisqu’un robot peut le valider.

    Un exemple en JS (copiez/collez dans la console) :
    Le script se charge de répondre à la question et remplit le champ. Pas sûr qu’il gère 100% des questions, mais en tout cas il gère toutes les opérations arithmétiques, toutes les couleurs du cheval d’Henri IV, les questions sur le premier/dernier/avant-dernier mot de la phrase, et quelques questions comme celles sur la couleur du ciel, ou ce que fabriquent les abeilles.

  4. Artesia dit :

    Puis-je proposer ceci :
    http://www.liafa.jussieu.fr/~prieur/IO2/Exemples/traite.php?surnom=securis%C3%A9es%3C/td%3E%3Ctd%3EMDR%3C/td%3E&prenom=non%3C/td%3E&nom=Variables%3C/td%3E%3Ctd%20%3E%3C/td%3E&sexe=pas%20bien!!%3Ctd%3E%3Cimg%20src=http://1.bp.blogspot.com/_6buqFLY52YM/TSDPxC9ipeI/AAAAAAAAAAs/pmpvWfh5Amo/s1600/mrs_geek.jpg%3E%3C/td%3E

  5. Christophe dit :

    oui, très joli, j’aime bien Mrs Geek.

    Baptiste, mon captcha n’est pas un protocole cryptographique, c’est un outil pour
    1) réduire le nombre de spams
    2) me prendre le moins de temps possible à mettre en œuvre
    3) être pratiquement sans douleur pour les (rares) commentateurs

    Le point 3 est très important pour moi, je ne supporte pas les trucs à la re-captcha qui semblent être plus faciles à franchir par les robots que par les humains.
    Et tant qu’un bidouilleur francophone ne décide pas de prendre mon site en grippe, je pense que ma solution a de beaux jours devant elle.

  6. Christophe dit :

    Mais pour te faire plaisir, et puisque tu me montres ton code, j’ajoute des questions qui le prendront en défaut (pas très longtemps, j’imagine bien) ;)

  7. Artesia dit :

    Juste pour info….

    Les Captcha, re Captcha, et sur Captcha sert à enrichir la base de donnée de Google qui a racheté Captcha et qui scan les textes dactylographiés peu lisibles.
    Google utilise donc la puissance du nombre à ses propres fins…

    http://www.generation-nt.com/google-livres-captcha-recaptcha-actualite-871561.html

  8. Christophe dit :

    oui, jusqu’à ce qu’il devienne beaucoup plus agressif il y a un an environ, on pouvait s’amuser à le tromper, en identifiant celui des deux mots dont il est sûr (et qui lui sert de témoin) et répondre « un peu » à côté sur l’autre. En général ça marchait.
    Maintenant, il faut parfois cinq essais avant d’arriver à lire au moins l’un des deux mots.

  9. Oui, je suis bien conscient qu’il est assez difficile de trouver un captcha à la fois efficace ET accessible (reCaptcha propose une version audio, mais c’est incompréhensible pour un non-anglophone), et accessoirement pas trop contraignant (« Pour commenter ce billet, veuillez envoyer une photocopie de pièce d’identité à l’adresse suivante :… »), et je pense que la meilleure solution est celle qui consiste à poser une question textuelle, comme c’est fait ici.
    En fait, j’ai plus fait mon petit bout de code pour voir s’il était possible d’automatiser la réponse en parsant la question (pour les opérations arithmétiques) que par une réelle volonté de « casser » le captcha.

    À propos de la difficulté à valider un reCaptcha, c’est simplement parce que le système est évolutif, et apprend en fonction de ce que donnent les utilisateurs.

    @Artesia : Je ne vois pas où est le problème, c’est intelligent comme initiative.

  10. You actually make it appear really easy with your presentation however I find this matter to be really something which I believe I
    might never understand. It seems too complicated and extremely large for me.
    I am looking forward in your next post, I’ll attempt to get the hold of it!

    My web site – nitric boost ultra walmart

  11. Thanks for any other magnificent post. The place else may anybody get that kind of
    info in such a perfect approach of writing? I’ve a presentation subsequent
    week, and I’m on the search for such information.

    Here is my page :: is lipozem safe to take

  12. mitolyn legit dit :

    Hi there! Do you know if they make any plugins to
    assist with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success.
    If you know of any please share. Many thanks!

    My blog post mitolyn legit

  13. Hurrah, that’s what I was searching for, what a data! present here at this
    web site, thanks admin of this web page.

    Also visit my website – lottery defeater software reddit

  14. I believe what you posted was very reasonable.
    However, think about this, suppose you added a little information? I am not suggesting your
    information isn’t good, however suppose you added something that makes people desire more?
    I mean Cours 3 : traiter les formulaires en php | didiode is a little
    vanilla. You should look at Yahoo’s home page and note how they create post headlines to get
    viewers to click. You might try adding a video or a picture or
    two to get readers interested about what you’ve got to say.
    In my opinion, it could make your blog a little livelier.

    My website: lottery defeater software a scam

  15. Hi there are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding knowledge to make your own blog?

    Any help would be greatly appreciated!

    my page: lipozem review

  16. That is really attention-grabbing, You’re an excessively professional blogger.
    I have joined your rss feed and stay up for in the hunt for
    extra of your wonderful post. Also, I have shared your website in my
    social networks

    Here is my page: is lipozem a scam

  17. I do accept as true with all of the ideas you’ve presented to your
    post. They are very convincing and can definitely work. Nonetheless,
    the posts are very quick for newbies. Could you please
    prolong them a bit from subsequent time? Thank you for the post.

    Feel free to surf to my web blog – the growth matrix download

  18. Wow, that’s what I was exploring for, what a information! existing here
    at this weblog, thanks admin of this web page.

    Feel free to surf to my blog post – provadent supplement reviews

  19. Wow that was odd. I just wrote an incredibly long comment but after I clicked
    submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say great blog!

  20. Hurrah! Finally I got a weblog from where I be capable of actually get helpful facts concerning
    my study and knowledge.

    Review my website – fitspresso consumer reports complaints

  21. p1950295 dit :

    Wow that was odd. I just wrote an incredibly long comment but
    after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again. Anyway,
    just wanted to say fantastic blog!

    Feel free to surf to my blog: p1950295

  22. slot dana dit :

    I think this is among the most important info for me.
    And i’m glad reading your article. But want to remark on few general things, The web site style is perfect, the articles is really excellent :
    D. Good job, cheers

  23. p1961858 dit :

    Undeniably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of.

    I say to you, I definitely get irked while people think about
    worries that they just do not know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal.

    Will likely be back to get more. Thanks

    Here is my page p1961858

  24. If you are going for best contents like I do, simply pay a
    quick visit this web page everyday for the reason that it gives quality contents,
    thanks

  25. First of all I would like to say terrific blog!
    I had a quick question that I’d like to ask if you
    do not mind. I was curious to know how you center yourself and clear your head
    prior to writing. I have had a tough time clearing my mind in getting my ideas out there.
    I truly do take pleasure in writing however it just seems like
    the first 10 to 15 minutes are wasted simply just trying to figure out how to begin. Any ideas or tips?
    Thank you!

    Review my blog: reviews for lipozem

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Merci de répondre à cette question pour prouver que vous n'êtes pas un robot :

quel est le dernier mot de cette phrase ?