Façon de créer un formulaire de plusieurs pages à l'aide d'un script PHP

Souvent, les développeurs de sites Web doivent collecter une grande quantité de données que l'utilisateur doit saisir. Pour cela, il est très utile de séparer les données par sections ou catégories dans différents écrans ou étapes. Un moyen de créer des sessions ou des écrans par étapes, chaque formulaire de chaque section enverra les données saisies au formulaire suivant et celui-ci doit conserver les valeurs dans un sens et peut les transférer d'une page à l'autre.

Pour maintenir la persistance des données entre les pages, nous pouvons utiliser des sessions PHP ou une table de base de données temporaire où nous pouvons enregistrer les données que nous transmettons de page en page. Et à la fin, nous sauvegardons les données collectées et supprimons les données temporaires.

Dans ce tutoriel, nous allons montrer comment créer un formulaire de plusieurs pages à l'aide d'un script PHP. Nous verrons également comment éviter les erreurs entre les formulaires.

Nous utiliserons des sessions PHP pour stocker les valeurs des champs de chaque formulaire.

Ensuite, nous allons créer une base de données appelée entreprise puis un tableau des candidats.

 CREATE DATABASE `company` CREATE TABLE IF NOT EXISTS` candidats` (`id` int (10) NOT NULL,` name` varchar (255) NOT NULL, `email` varchar (255) NOT NULL,` address` varchar (50 ) DEFAULT NULL, `phone` varchar (50) DEFAULT NULL,` mobile` varchar (50) DEFAULT NULL, `education` int (11) DEFAULT NULL,` post` int (11) DEFAULT NULL, `experience` int (11 ) DEFAULT NULL, texte `description`) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = latin1;

Lorsque nous avons des formulaires avec beaucoup de données, l'utilisateur ne voudra pas remplir un formulaire avec plus de 10 champs, c'est donc une bonne idée de couvrir le formulaire sur plusieurs pages.

Cela peut faciliter le suivi de l'utilisateur, par exemple, nous pouvons diviser les données en sections distinctes, en fonction de la portée ou des catégories d'informations, séparément des informations personnelles, des informations client, de vos données académiques ou professionnelles, ainsi que de vos goûts. ou préférences, nous le voyons également beaucoup dans la finalisation des achats avant les données de paiement dans un panier, où les données de facturation, les données d'expédition et les données de produit sont séparées.

L'un des défis qui découlent de la division du formulaire sur plusieurs pages est de transmettre les données d'une page à l'autre, car au point final du formulaire, nous avons toutes les données nécessaires prêtes à être traitées. Nous allons considérer deux méthodes pour ce faire : les variables de session et les champs de saisie masqués.

Par conséquent, la session a une nature semi-permanente, nous permet de créer une certaine persistance et peut être utilisée pour transmettre des variables à travers différentes pages dans lesquelles les visiteurs atterrissent lors d'une visite sur le site.

Nous allons ensuite créer le premier formulaire qui contiendra quelques champs :

 Forme multiple PHP
Formulaire 1
Nom : Courriel : Adresse : Téléphone : Téléphone portable :

Nous allons également ajouter les feuilles de style pour donner un design plus élégant à notre formulaire, donc nous créons un fichier styles.css, après application, il sera comme suit.

 div.container {largeur : 960px; hauteur : 550px ; marge : 50px automatique ; } div.main {largeur : 100 % ; marge supérieure : 35px; flotteur : gauche ; bordure : 2px solide # 8fc400 ; remplissage : 0px 50px 20px ; famille de polices : Arial, Helvetica Neue, Helvetica, sans empattement ; } form {margin-top: 20px} .estilotextarea {width: 100%; height: 100px; border: 1px solid # 999; } h2 {couleur d'arrière-plan : arrière-plan : # 8fc400; arrière-plan : -moz-linear-gradient (haut, # 8fc400 0%, # 8fc400 100%); arrière-plan : -webkit-linear-gradient (en haut, # 8fc400 0%, # 8fc400 100%); arrière-plan : dégradé linéaire (vers le bas, # 8fc400 0%, # 8fc400 100%); filtre : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 8fc400', endColorstr = '# 8fc400', GradientType = 0); remplissage : 32 px; marge : 0 -50px ; text-align: center;} b {font-size: 18px; bloc de visualisation; couleur: # 555;} étiquette {couleur: # 464646; taille de la police : 14px; font-weight: bold;} input [type = text], input [type = email] {width: 96%; hauteur : 25px ; rembourrage : 5px ; marge supérieure : 5px; marge inférieure : 15 px; } sélectionnez {margin-bottom : 15px; marge supérieure : 5px; largeur : 100 % ; hauteur : 35px ; font-size: 12px;} input [type = submit], input [type = reset] {padding: 10px; fond : linéaire-gradient (# 058eb5 5%, # 045066 100%); bordure : 1px solide # 058eb5; couleur : # f7f7f7 ; curseur : pointeur ; largeur : 20 % ; rayon de bordure : 2px ; marge inférieure : 15 px; font-weight : gras ; font-size: 16px;} input [type = submit]: hover, input [type = reset]: hover {background: linear-gradient (# 045066 5%, # 058eb5 100%); } .message {bordure : 1px solide ; marge : 10px 0px ; rembourrage : 15px 10px 15px 10px ; background-repeat : pas de répétition; position d'arrière-plan : 10 pixels au centre; text-align : centre ; couleur : # 4F8A10 ; largeur : 100 % ; couleur d'arrière-plan : # DFF2BF; }

J'ai ajouté la propriété required à chaque champ, cet attribut obligatoire est un attribut booléen qui indique si le champ est obligatoire ou non, vrai ou faux.
Lorsqu'il est présent, il précise que ce champ de saisie ne peut pas être vide et doit être complété avant de soumettre le formulaire. L'attribut required fonctionne avec les types d'entrée html5 suivants : texte, e-mail, mot de passe, cases à cocher, radio et fichier.

Lorsque vous remplissez les données du premier formulaire, nous envoyons par courrier au deuxième formulaire appelé formulaire2.php dont le code est le suivant.

 valeur $) {$ _SESSION ['sessionform1'] [clé $] = valeur $; }?> var13 -> PHP Forme multiple
Formulaire 2
Niveau d'éducation : ---- Sélectionnez ---- Université technique Autre poste applicable : * ---- Sélectionnez ---- Administrateur de serveur Programmeur Concepteur Expérience professionnelle : * ---- Sélectionnez ---- Aucun Plus de 5 ans Description : *

Ensuite, nous enverrons à un formulaire où nous enregistrerons les données, pour ce tutoriel, nous montrerons les données des sessions précédentes, juste pour voir quelles données chaque formulaire a envoyées.

 valeur $) {$ _SESSION ['sessionform2'] [clé $] = valeur $; } chassèrent 'Données Form1'; $ sessionform1 = $ _ SESSION ['sessionform1']; chassèrent '
'; print_r ($ sessionform1); chassèrent '
'; chassèrent 'Données Form2'; $ sessionform2 = $ _ SESSION ['sessionform2']; chassèrent '
'; print_r ($ sessionform2); chassèrent '
'; extract ($ _ SESSION ['sessionform1']); $ connection = mysql_connect ("localhost", "root", ""); $ db = mysql_select_db ("société", $ connexion); $ sql = "insérer dans les clients (nom, e-mail, adresse, téléphone, mobile, formation, poste, expérience, description)"; $ sql. = "values ​​​​('$ name', '$ email', '$ address',' $ phone ',' $ mobile ',' $ education ',' $ position ',' $ experience ',' $ description ') "; $ query = mysql_query ($ sql, $ connexion); ?> var13 -> PHP Forme multiple<? if (requête $) {écho '
Vous avez terminé le processus et enregistré les données

'; } else {écho '
Les données n'ont pas été enregistrées
'; } non défini ($ _ SESSION ['sessionform1']); unset ($ _ SESSION ['sessionform2']); ?> var13 ->

Nous pouvons donc ajouter la quantité de formulaires dont nous avons besoin et dans chaque formulaire nous enregistrerons les données dans une session puis enregistrerons toutes les sessions dans une base de données, mais cela ne permet pas non plus de revenir à un formulaire précédent puisque connaissant le numéro d'étape ou formulaire Nous pourrons savoir quelle session contient les données de ce formulaire et restaurer les données.

Cette façon de créer un Le formulaire multi-pages nous permet de mieux organiser les informations lorsque nous devons collecter beaucoup de données

De nombreux formulaires font partie de pratiquement n'importe quelle application Web aujourd'hui. Dans les grands sites Web avec de gros volumes de données, ils constituent la principale méthode pour recevoir des informations des utilisateurs qui utilisent l'application. Selon la séquence que nous devons implémenter côté client pour la logique de l'application, nous ne devons pas nous dépasser avec pas plus de 10 champs mais l'utilisateur se fatigue et l'abandonne, le script doit également avoir toutes les sécurités nécessaires intégrées puisque nous sommes en utilisant des sessions et les données pourraient être interceptées.

La bonne méthode à utiliser pour éviter les problèmes de sécurité consiste à encapsuler le traitement des données côté serveur à l'aide de pHp.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif