Télécharger le PDF du cours
Pour la bonne compréhension de tous, néanmoins, nous allons dans cette première leçon effectuer quelques rappels sur l’utilité des formulaires et la création de formulaires en HTML.
Ensuite, dans le reste de cette partie, ce qui va nous intéresser va être de comprendre comment on va pouvoir récupérer les données envoyées via un formulaire en PHP et d’apprendre à les manipuler et à les stocker.
Pour faire cela, nous allons utiliser un formulaire très simple comme base de travail.
Définition et rôle des formulaires HTML
Les formulaires HTML vont nous permettre de recueillir des données envoyées par nos utilisateurs. Les formulaires vont se révéler indispensable pour tout site proposant aux utilisateurs de s’inscrire et de se connecter, et vont être l’élément privilégié pour permettre aux utilisateurs d’envoyer un message via notre site par exemple.
Les formulaires HTML vont pouvoir être composés de champs de texte (cas d’un champ de formulaire demandant à un utilisateur de renseigner son adresse mail pour se connecter ou pour s’inscrire sur le site par exemple), de listes d’options (choix d’un pays dans une liste de pays par exemple), de cases à cocher, etc.
L’intérêt et le rôle principal des formulaires HTML va résider dans le fait que les formulaires vont permettre de transmettre des données. En effet, une fois que l’utilisateur a fini de remplir un formulaire, il va pouvoir l’envoyer. Les données envoyées vont ensuite pouvoir être stockées ou traitées / manipulée (on va ainsi par exemple pouvoir vérifier que le pseudo et le mot de passe d’un utilisateur souhaitant se connecter à notre site sont valides).
L’élément form et ses attributs
Pour créer un formulaire, nous allons utiliser l’élément HTML form. Cet élément form va avoir besoin de deux attributs pour fonctionner normalement : les attributs method et action.
L’attribut method va indiquer comment doivent être envoyées les données saisies par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.
Que signifient ces deux valeurs et laquelle choisir ? Les valeurs get et post vont déterminer la méthode de transit des données du formulaire. En choisissant get, on indique que les données doivent transiter via l’URL (sous forme de paramètres) tandis qu’en choisissant la valeur post on indique qu’on veut envoyer les données du formulaire via transaction post HTTP.
Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), nous serons limités dans la quantité de données pouvant être envoyées et surtout les données vont être envoyées en clair. Evitez donc absolument d’utiliser cette méthode si vous demandez des mots de passe ou toute information sensible dans votre formulaire.
Cette méthode de transit est généralement utilisée lors de l’affichage de produits triés sur un site e-commerce (car oui, les options de tris sont des éléments de formulaires avant tout !). Regardez bien les URL la prochaine fois que vous allez sur un site e-commerce après avoir fait un tri : si vous retrouvez des éléments de votre tri dedans c’est qu’un get a été utilisé.
En choisissant l’envoi de données via post transaction HTTP (avec la valeur post), nous ne sommes plus limités dans la quantité de données pouvant être envoyées et les données ne sont visibles par personne. C’est donc généralement la méthode que nous utiliserons pour l’envoi véritablement de données que l’on souhaite stocker (création d’un compte client, etc.).
L’attribut action va lui nous servir à préciser l’adresse relative de la page qui va traiter les données. En effet, nous ne pouvons pas effectuer les opérations de traitement ou de stockage des données avec le HTML. Pour faire cela, nous devrons utiliser des langages comme le PHP (pour le traitement) et le MySQL (pour le stockage) par exemple.
Création d’un formulaire HTML
Comme énoncé précédemment, nous allons créer un petit formulaire en HTML qui va nous servir pour le reste de cette partie.
Ce formulaire va nous permettre de récupérer les informations suivantes :
- Le prénom d’un utilisateur ;
- Son adresse mail ;
- Son âge ;
- Son sexe ;
- Son pays de résidence.
Voici les codes HTML et CSS que nous allons utiliser pour ce formulaire ainsi que le résultat obtenu :
See the Pen Cours PHP – Formulaires by Pierre (@pierregiraud) on CodePen.
Ici, on utilise des éléments input pour demander le prénom, le mail et l’âge de l’utilisateur. On ajuste la valeur de l’attribut type en fonction du type de données attendues (texte, nombre, etc.).
On utilise également un input type="radio" pour le choix du sexe. L’utilisation de boutons radio est ici toute indiquée puisque l’utilisateur ne devrait pouvoir faire qu’un choix dans la liste d’options et car cela va grandement faciliter le traitement des données par la suite puisque nous allons toujours recevoir soit la valeur « femme » soit la valeur « homme » soit « autre ».
Enfin, nous utilisons un élément select pour le choix des pays avec différents éléments option pour chaque option. Ici, nous groupons les pays par continent avec l’élément optgroup.
Notez qu’on utilise également à chaque fois des éléments label pour indiquer à l’utilisateur ce qu’il doit renseigner comme information. On lie également chaque label à son champ de formulaire grâce aux attributs for du label et id de l’input ou du select en leur donnant la même valeur.
Côté mise en forme et CSS, on va se contenter du strict minimum puisqu’encore une fois ce n’est pas l’objet de cette partie. Nous allons ici nous servir de nos div class="c100" pour mettre chaque champ de formulaire sur une nouvelle ligne et allons mettre rapidement en forme les autres éléments.
Notez bien ici les valeurs données aux attributs method et action et notre élément form car c’est cela qui va particulièrement nous intéresser.
Ici, on indique qu’on choisit d’envoyer nos données par transaction http de type post. Nous allons envoyer les données vers la page formulaire.php. C’est cette page là qui va s’occuper du traitement des données du formulaire et sur laquelle nous allons nous concentrer par la suite.
Si vous cliquez sur le bouton de validation, vous pouvez observer que vous êtes renvoyés vers cette page. Cependant, comme nous n’avons pas encore crée la page, vous devriez avoir une erreur de type « page introuvable ».
Nous avons notre base, il est donc maintenant temps d’apprendre à récupérer et à manipuler les données envoyées via nos formulaires en PHP.
