Un formulaire HTML permet de récupérer de l’information depuis une page et de traiter des informations à l’aide de PHP. L’utilisation des formulaires peut rapidement devenir compliqué si on va pas à l’essentiel. Je vous montre donc dans cet article les 20% de connaissances nécessaire pour gérer 80% des situations possibles.

Cet article est le deuxième d’une série d’articles pour comprendre les fondamentaux du web. Si vous arrivez en chemin, vous pouvez lire le premier article ici : Comment utiliser PHP pour dynamiser une page HTML.

Note : je pense qu’il faut environ 1h30 pour le mettre en pratique entièrement, vous saurez alors :

  1. Comment demander de l’information sur votre page un formulaire HTML ?
  2. Comment récupérer et traiter ces informations avec PHP?

C’est parti ? Let’s go !!

Comment envoyer et recevoir de l’information avec les formulaires !

Ces petites bêtes sont tellement présente sur internet qu’on n’y prête plus attention. Les formulaires permettent néanmoins de traiter plus de 80% des échanges d’informations entre les visiteurs et un site internet.

Un formulaire est un espace dans lequel vous pouvez saisir des informations qui seront transmises au site. Lorsque vous vous connectez à votre boite mail, c’est grâce à un formulaire. Quand vous écrivez un mail, c’est un formulaire. Et finalement quand vous faites une recherche sur google, c’est aussi un formulaire.

Un formulaire prend la forme suivante :

<html>
<form name="mon_du_formulaire" method="methode_d'envoi" action="fichier_a_contacter">
<!-- Les champs du formulaire  placer ici -->
</form>
</html>

Comme vous pouvez le voir, le formulaire a déjà besoin de 3 informations, 3 attributs :

  • Le nom du formulaire (name=”…”)
    Cela permet de le reconnaître lorsque vous avez plusieurs formulaires sur une même page
  • La méthode d’envoi d’information (method=”…”)
    Il existe deux méthodes, je vous les présente dans un instant
  • Le fichier à contacter (action=”…”)

Puis, entre les deux balises HTML du <form>, nous allons y placer les champs du formulaire. Ceux-ci prennent la forme suivante :

<html>
<input name="nom_du_champ"type="type_du_champ" value="valeur_par_defaut"/>
</html>

Comme la balise form, un certain nomnbre d’information est à saisir ici :

  • Le nom du champ (name=”…”)
    Cela permet de retrouver le champ
  • Le type de champ (type=”…”)
    Il existe plusieurs types de champ (texte, numérique, email, case à cocher, etc.) Je reviendrai sur ça dans un instant.
  • La valeur par défaut (value=”…”)
    Cela permet de pré-définir une valeur lors de l’affichage du formulaire.

Voilà, vous connaissez comment se compose un <form> et un <input>. Rentrons désormais dans les détails :

Les différentes type de champs  : <input type=”…” />

Commençons par les différents types de champ que l’on peut mettre dans un formulaire :

  • Un texte (text)
    Permet de saisir un texte.
  • Un chiffre (numeric)
    Permet de saisir un chiffre
  • Un choix (radio)
    Permet de sélectionner dans une liste (de préférence courte). Intéressant pour choisir entre 2 à 5 informations comme : oui/non, Oui/Non/Peut-être, etc.
  • Un choix multiple (checkbox)
    Permet de sélectionner dans une liste (de préférence courte).
  • Un choix dans une liste déroulante (select)
    Permet de sélectionner une valeur dans une liste (courte ou longue). Intéressant pour une liste de pays par exemple, car on peut rechercher notre valeurs avec le clavier.
  • Une adresse courriel (email)
    Permet de saisir un email avec le bon format
  • Un long texte (textarea)
    Permet de saisir un longue texte. Intéressant pour des descriptions ou de long messages.
  • Et le petit dernier : le bouton d’envoi (submit)
    Permet d’envoyer le formulaire lorsqu’on clique dessus.

Vous avez désormais toutes les informations entre vos mains pour créer un formulaire complet.

Les différentes méthodes d’envoi d’information d’un formulaire : <form type=”…”>

Passons maintenant aux méthodes d’envoi de l’information. Il existe deux méthodes : GET et POST. Chacune d’entre elle répond à des besoins spécifiques (de taille, de sécurité, etc)

La méthode GET pour les informations publiques

Cette méthode permet d’utiliser l’URL (l’adresse internet de votre page) pour envoyer des informations. Ce qui est très pratique pour envoyer :

  • Des informations courtes
    Car l’url pour contenir jusqu’à 3000 caractères.
  • Partager les résultats du formulaire avec quelqu’un
    Comme il est possible de partager les résultats d’une recherche google en copiant/collant l’url.
  • Permet de mettre en favoris les résultats du formulaire

La méthode GET pour les informations cachées

Cette méthode permet de ne pas passer par l’URL pour envoyer les informations du formulaire, cela permet de :

  • D’envoyer des informations sécurisées
    Car les informations sont masquées
  • D’envoyer des information volumineuses
    Car il n’y a plus la limite de l’URL (300 caractères)

L’action d’un formulaire : <form action=”…”>

Pour finir, l’attribut action permet de dire où le formulaire doit envoyer les informations. Dans notre cas, nous allons envoyer les informations à un fichier .php. Dans notre cas, nous n’avons qu’un seul fichier, alors action aura pour valeur le nom du fichier php dans lequel se trouve le formulaire.

A quoi ressemble un formulaire complet

Voici un formulaire intégrant tout ce que nous avons vu précédemment.

Grace au code suivant  :

<html>

<!-- form.php -->
<form name="mon_formulaire" method="post" action="form.php">

<fieldset>
<legend>Champs simples</legend>
Prnom : <input type="text" name="prenom" value="" placeholder="Mon prenom" /><br />
Age : <input type="numeric" name="age" value="" placeholder="Mon age" /><br />
Email : <input type="email" name="email" value="" placeholder="Mon email" /><br />
Prsenation : <textarea name="presentation"></textarea><br />
</fieldset>

<fieldset>
<legend>Champs listes</legend>
Sexe :
<input type="radio" name="sexe" value="homme" /> Homme
<input type="radio" name="sexe" value="femme" /> Femme
<input type="radio" name="sexe" value="licorne" /> Licorne
<br />

Couleurs prfres :
<input type="checkbox" name="couleur" value="vert" /> Vert
<input type="checkbox" name="couleur" value="jaune" /> Jaune
<input type="checkbox" name="couleur" value="rouge" /> Rouge
<br />

Pays : <select name="pays">
<option value="fr">France</option>
<option value="ch">Chine</option>
<option value="uk">UK 2</option>
<option value="us">US</option>
</select><br />
</fieldset>

<input type="submit" name="" value="Soumettre le formulaire" /><br />
</form>
</html>

Comment récupérer les informations envoyées ?

Maintenant qu’on sait comment envoyer l’information, voyons comment la récupérer. Pour cela, nous allons utiliser les variables : $_POST et $_GET.

Je vous montre tout de suite comment récupérer tout ça, mais avant tout, je voudrais vous montrer une technique toutes simple pour vérifier que tout fonctionne bien.

Je me sers de la fonction “var_dump()”. Celle-ci permet d’afficher le contenu d’une variable. Elle s’utilise de la manière suivante : var_dump($maVariable); et affiche le contenu de cette variable sous la forme : “typeDeMaVariable(Taille de ma variable) ValeurDeMaVarible.

Prenons l’exemple d’un texte : $prenom = “Kelvin”
Cela donnerait : string(6) “Kelvin”
String étant le mot anglais pour “texte”, 6 car Kelvin s’écrit en avec 6 lettres et “Kelvin” car c’est la valeur.

Dans notre cas, nous souhaitons lire la variable $_POST qui contient les informations envoyées par un formulaire avec la méhtode POST. Voici donc comment l’écrire ;

<!-- form.php -->
<?php var_dump($_POST); ?>

Ce qui donne le résultat suivant :

var_dumpNous avons donc bien récupéré toutes les informations de notre formulaire. Il vous suffit les utiliser ou de les stocker dans des variables plus simples telles que :

<?php
$prenom = $_POST["prenom"];
echo $prenom;
?>

Ce qu’il faut retenir en mode 20/80

Les formulaires permettent de créer de l’interaction entre les visiteurs de votre site et vous-même. Il est donc extrêmement important d’en comprendre les mécanismes. Un formulaire HTML permet d’envoyer de l’information directement dans la variable $_POST ou $_GET suivant la méthode utiliser par le formulaire. Ce qui rend la création de formulaire relativement pratique et facile. Il existe plusieurs types de variables : texte, numérique, liste etc biens d’autres afin de pouvoir envoyer un large panel d’information.

Voilà, j’espère que cet article vous aura plu !

Avez-vous réussir à créer votre premier formulaire ?
Des questions n’hésitez pas à revenir vers moi, je serai ravi de vous aider !

  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •