Les développeurs PHP rencontrent souvent des difficultés pour gérer les formulaires web, notamment lors des calculs de totaux et de remises dynamiques.
Des erreurs fréquentes dans ces traitements peuvent nuire à l’expérience utilisateur et à la crédibilité du site, augmentant les coûts de maintenance.
Cet article vous guide pour créer un formulaire HTML en PHP, utiliser des constantes, et calculer automatiquement les totaux à payer avec remises. Suivez ces étapes pour optimiser la gestion de vos formulaires web de manière efficace et sécurisée.
Objectif du projet : formulaire HTML PHP 8
Nous débutons ce processus en retravaillant le formulaire HTML PHP.
Tutoriel : écrire un formulaire HTML PHP 8
- index.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commander</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<form action="traitement.php" method="post">
<label for="quantite">Quantité :</label>
<select name="quantite" id="quantite">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
<p>Tarif : 20 euros</p>
<p>En commandant maintenant, vous aurez droit à une remise immediate de 5 euros</p>
<p><input type="submit" value="Commander"></p>
</form>
</div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Ce code HTML représente une page web avec un formulaire de commande. L’utilisateur peut choisir une quantité via un menu déroulant, le tarif correspondant à la quantité choisie (de 1 à 5) est affiché (20 euros par unité). De plus, une remise immédiate de 5 euros est mentionnée. Lors de la soumission du formulaire HTML PHP, les données sont envoyées à un fichier de traitement PHP appelé « traitement.php ».
Voilà le résultat :
Mise en forme de la page web avec CSS
- fichier style.css :
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3rem;
background-image: url('images/fd-ecran.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
div {
max-width: 400px;
background-color: rgba(255,255,255,0.8);
padding: 20px;
box-shadow: 3px 3px 5px #555;
text-align: center;
border-radius: 10px;
}
select {
font-size: 1.3rem;
padding: 3px 20px;
border-radius: 50px;
border: 2px solid orangered;
outline: none;
background: none;
}
Voila le résultat après la mise en forme :
Configurez votre environnement de travail et familiarisez-vous au langage de programmation PHP 8
Améliorer le style avec du CSS supplémentaire pour un formulaire HTML PHP
- index.php :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commander</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<form action="traitement.php" method="post">
<label for="quantite">Quantité: </label>
<select name="quantite" id="quantite">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>Tarif: 20 euros</p>
<p>En commandant maintenant, vous aurez droit à une remise immediate de 5 euros.</p>
<p>
<input type="submit" value="Commander">
</p>
</form>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Chocolat" width="" height="" data-lazy-src="images/chocolat.png"><noscript><img decoding="async" src="images/chocolat.png" alt="Chocolat" width="" height=""></noscript>
</div>
</body>
</html>
Ce code HTML représente une page web avec un formulaire de commande. L’utilisateur peut choisir une quantité via un menu déroulant, le tarif correspondant à la quantité choisie (de 1 à 5) est affiché (20 euros par unité). De plus, une remise immédiate de 5 euros est mentionnée. En outre, une photo du chocolat a été ajoutée à la section correspondante. Lors de la soumission du formulaire HTML PHP, les données sont envoyées à un fichier de traitement PHP appelé « traitement.php ».
Ajouter du css sur le fichier style.css :
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3rem;
background-image: url('images/fd-ecran.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
div {
max-width: 400px;
background-color: rgba(255,255,255,0.8);
padding: 20px;
box-shadow: 3px 3px 5px #555;
text-align: center;
border-radius: 10px;
}
select {
font-size: 1.3rem;
padding: 3px 20px;
border-radius: 50px;
border: 2px solid orangered;
outline: none;
background: none;
}
input[type="submit"] {
padding: 10px 40px;
border-radius: 50px;
border: none;
background-color: orangered;
color: #fff;
font-size: 1.4rem;
cursor: pointer;
box-shadow: 3px 3px 5px #333;
outline: none;
transition: 0.5s;
}
input[type="submit"]:hover {
background-color: orange;
color: #000;
transform: translateY(-7px);
}
img {
width: 100%;
}
Voila le résultat après la mise en forme :
Créer la page de traitement PHP 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<h1>Merci pour votre commande</h1>
<ul>
<li>Nombre de boîtes commandées:</li>
<li>Tarif unitaire: 20 euros</li>
<li>Total à payer: euros</li>
<li>Remise: 5 euros</li>
<li><strong>Nouveau Total:</strong> euros</li>
</ul>
</div>
</body>
</html>
Ce code HTML représente une page de confirmation de commande. Elle affiche un message de remerciement, suivant la quantité sélectionnée dans le formulaire HTML PHP. Le tarif unitaire est fixé à 20 euros par boîte, une remise de 5 euros est appliquée, et le nouveau total est présenté. Le style de la page est défini par une feuille de style externe « style.css ».
Voila le résultat :
Mettre en place les constantes pour un formulaire HTML PHP
Ajouter le fichier _config.php
<?php
define('TARIF', 20);
define('REMISE', 5);
Ce code PHP crée deux constantes :
- TARIF : est défini avec une valeur de 20, représentant le tarif unitaire d’un article.
- REMISE : est défini avec une valeur de 5, représentant le montant de la remise applicable.
Ces constantes sont utilisées pour maintenir des valeurs constantes qui ne changeront pas tout au long de l’exécution du script. Cela peut faciliter la maintenance du code en centralisant ces valeurs et en permettant des modifications rapides et cohérentes si nécessaire.
Configuration du fichier index.php
<?php
include('_config.php');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commander</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<form action="traitement.php" method="post">
<label for="quantite">Quantité: </label>
<select name="quantite" id="quantite">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>Tarif: <?= TARIF; ?> euros</p>
<p>En commandant maintenant, vous aurez droit à une remise immediate de <?= REMISE; ?> euros.</p>
<p>
<input type="submit" value="Commander">
</p>
</form>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Chocolat" width="" height="" data-lazy-src="images/chocolat.png"><noscript><img decoding="async" src="images/chocolat.png" alt="Chocolat" width="" height=""></noscript>
</div>
</body>
</html>
Ce script PHP inclut le fichier _config.php, qui semble contenir des définitions ou des configurations. Ensuite, une page HTML est générée avec un formulaire de commande. Voici un résumé succinct :
Inclusion de _config.php pour récupérer des configurations ou des définitions.
La page HTML contient un formulaire HTML PHP permettant de choisir la quantité de chocolats à commander.
Utilisation d’une liste déroulante (<select>) pour sélectionner la quantité (de 1 à 5).
Le tarif unitaire (constante TARIF) est affiché sous la section « Tarif ».
Un message indique qu’en commandant maintenant, une remise immédiate (constante REMISE) de x euros sera appliquée.
Soumission du formulaire vers « traitement.php » avec la méthode POST.
Affichage d’une image de chocolat.
Un lien vers une feuille de style externe « style.css » est inclus pour appliquer des styles à la page.
Maîtrise Complète de PHP 8 : De l'Initiation à l'Expertise en Architecture MVC
Développement de la page traitement.php
<?php
include('_config.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<h1>Merci pour votre commande</h1>
<ul>
<li>Nombre de boîtes commandées:</li>
<li>Tarif unitaire: <?= TARIF; ?> euros</li>
<li>Total à payer: euros</li>
<li>Remise: <?= REMISE; ?> euros</li>
<li><strong>Nouveau Total:</strong> euros</li>
</ul>
</div>
</body>
</html>
Ce script PHP génère une page de traitement après la soumission du formulaire de commande. Voici un résumé succinct :
Inclusion du fichier _config.php pour récupérer des configurations ou des définitions.
La page HTML affiche un message de remerciement avec un titre <h1>.
Une liste <ul> est utilisée pour afficher différentes informations sur la commande :
« Nombre de boîtes commandées » : L’information sur la quantité sélectionnée dans le formulaire HTML PHP.
« Tarif unitaire: x euros » : Le tarif unitaire par boîte, récupéré à partir de la constante TARIF.
« Total à payer: euros » : Cette section doit être mise à jour pour afficher le total réel en euros après le calcul.
« Remise: x euros » : Le montant de la remise récupéré à partir de la constante REMISE.
« Nouveau Total: euros » : Cette section doit également être mise à jour pour afficher le total final après la remise.
Un lien vers une feuille de style externe « style.css » est inclus pour appliquer des styles à la page.
Calculer le total à payer dans un formulaire HTML PHP 8
- La page traitement.php :
<?php
include('_config.php');
// Calcul du Total à payer
$total = $_POST['quantite'] * TARIF;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<h1>Merci pour votre commande</h1>
<ul>
<li>Nombre de boîtes commandées: <?= $_POST['quantite']; ?></li>
<li>Tarif unitaire: <?= TARIF; ?> euros</li>
<li>Total à payer: <?= $total; ?> euros</li>
<li>Remise: <?= REMISE; ?> euros</li>
<li><strong>Nouveau Total:</strong> euros</li>
</ul>
</div>
</body>
</html>
Le script a été modifié en introduisant une variable appelée « tarif » pour calculer le coût total en multipliant la quantité sélectionnée (obtenue via $_POST['quantite']) par le tarif unitaire (défini par la constante TARIF). Dans la liste <ul>, la valeur de « Nombre de boîtes commandées: x » a été ajoutée, représentant la quantité choisie dans le formulaire HTML PHP et récupérée à partir de $_POST['quantite'].
Voila le résultat du test :
J’ai choisi la quantité 4
Voila le résultat obtenu :
Calculer le nouveau total après remise dans un formulaire HTML PHP 8
- La page traitement.php :
<?php
include('_config.php');
// Calcul du Total à payer
$total = $_POST['quantite'] * TARIF;
// Calcul du nouveau total à payer
$newTotal = $total - REMISE;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8b40e152-267d-4f79-8813-1ebe439a4ccf: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8b40e152-267d-4f79-8813-1ebe439a4ccf","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>
<h1>Merci pour votre commande</h1>
<ul>
<li>Nombre de boîtes commandées: <span class="orangered"><?= $_POST['quantite']; ?></span></li>
<li>Tarif unitaire: <span class="orangered"><?= TARIF; ?> euros</span></li>
<li>Total à payer: <span class="orangered"><?= $total; ?> euros</span></li>
<li>Remise: <span class="orangered"><?= REMISE; ?> euros</span></li>
<li><strong>Nouveau Total:</strong> <span class="orangered"><?= $newTotal; ?> euros</span></li>
</ul>
</div>
</body>
</html>
Dans la partie ajoutée du script PHP :
La variable $newTotal est calculée en soustrayant le montant de la remise (REMISE) du total initial ($total), représentant le coût total avant l’application de la remise.
Dans la liste <ul> de la page HTML, une nouvelle entrée est ajoutée pour afficher le « Nouveau Total », utilisant la classe de style « orangered » pour mettre en évidence cette information.
Voila le résultat du test :
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En conclusion, la création d’un formulaire HTML avec PHP 8 et son stylisation avec CSS sont des compétences fondamentales pour tout développeur web. En suivant ce guide, vous avez appris à concevoir et à mettre en forme un formulaire, à traiter les données avec PHP, et à optimiser l’apparence avec du CSS. Maîtriser ces compétences vous permet de créer des formulaires web professionnels et fonctionnels, améliorant ainsi l’interaction utilisateur sur vos sites web. Continuez à pratiquer et à affiner vos compétences pour devenir un expert en développement web.
