Qu’est-ce c’est un formulaire HTML et traitement PHP ?
Dans cet article nous allons voir comment créer un formulaire HTML avec traitement en PHP
Les formulaires constituent le principal moyen pour les utilisateurs d’entrer des informations sur un site ainsi des données vers le serveur.
Il est introduit par la balise HTML <form> dans la page HTML de base. L’élément HTML <form> représente un formulaire, c’est-à-dire une section d’un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.
Un formulaire HTML pour traitement en PHP doit contenir des zones de saisies. Ces zones de saisies doivent être traitées afin d’en exploiter le contenu. Pour les traiter, nous faisons appel au langage PHP. Les zones citées ci-dessus sont généralement représentées en HTML avec la balise <form> </form>
<form action="action.php" method="post"> <!-- l'attribut "method" peut être en post ou get -->
<p>
On insèrera ici les éléments de notre formulaire.
</p>
</form>Le concept de base qui est important à comprendre est que tous les champs d’un formulaire seront automatiquement disponibles dans le script PHP d’action.
Avant de nous concentrer sur la création d’un formulaire à l’aide du langage PHP, je vous invite à vous initier aux langages de programmations HTML et CSS. Vous pouvez vous auto-former sur ces deux langages depuis le portail interactif OpenClassRooms dans la section créez votre site web avec HTML5 et CSS3
Dans ce BLOG vous pouvez également retrouver un article qui vous permettra de découvrir les bases de la programmation. Afin de vous y rendre il vous suffit de cliquer ce lien.
Quelque principe du langage PHP
Qu’est ce que le traitement PHP?
PHP (officiellement, ce sigle est un acronyme récursif pour « PHP Hypertext Preprocessor« ) est un langage de scripts généraliste et Open Source, spécialement conçu pour le développement d’applications web. Il peut être intégré facilement au HTML.
Exemple d’introduction de traitement PHP dans le langage HTML
<!DOCTYPE html>
<html>
<head>
<title>Exemple</title>
</head>
<body>
<?php echo "Bonjour, je suis un script PHP !"; ?>
</body>
</html> Afin d’afficher du HTML, les pages PHP n’utilisent pas des nombreuses lignes de code mais contiennent des fragments HTML dont du code qui fait « quelque chose » (dans ce cas, il va afficher "Bonjour, je suis un script PHP !").
Le code PHP est inclus entre une balise de début <?php et une balise de fin ?> qui permettent au serveur web de passer en mode PHP au moment où ces balises sont présentes dans le code.
Ce qui distingue PHP des autres langages de script est que le code est exécuté sur le serveur, générant ainsi le HTML, qui sera ensuite envoyé à l’utilisateur. L’utilisateur ne reçoit que le résultat du script, sans aucun moyen d’avoir accès au code qui a produit ce résultat.
Bien que le développement de PHP soit orienté vers la programmation pour les sites web, vous pouvez en faire bien d’autres usages. Pour cela vous pouvez vous rendre sur la page Que peut faire PHP ? ou bien le tutoriel d’introduction si vous êtes uniquement intéressé dans la programmation web.
Création d’un formulaire HTML
Un formulaire comme nous l’avons vu dans le paragraphe précèdent est crée par le langage HTML avec la balise <form> </form> où à intérieur nous pouvons retrouver d’autres balises en référence à un formulaire telles que :
<input type="">qui dépend de la valeur donnée dans son attribut type<label for=""> </label>représente une légende pour un objet d’une interface utilisateur<textarea name="" id="" cols="30" rows="10"></textarea>définit un champ de texte long<select name="" id=""></select>définit une liste de choix<optgroup></optgroup>définit un groupe d’options dans une liste<option value=""></option>définit une option dans une liste<fieldset></fieldset>permet de regrouper les éléments d’un formulaire en différentes partie<legend></legend>ajoute une légende à un élément<fieldset>
Exemple de formulaire HTML de saisie de coordonnées
Si nous avons un formulaire HTML de saisie de coordonnées, la balise <form> doit comporter l’attribut method="" et l’attribut action="". Tous les éléments d’un formulaire doivent posséder un attribut name="" rempli par une valeur type="".
Le nom du champ sera ensuite considéré par le script PHP comme une variable contenant la valeur saisie. A titre d’information, voici un exemple tout simple de formulaire de saisie de coordonnées qui présente tous les éléments obligatoires évoqués ici.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formulaire</title>
</head>
<body>
<h1>Un simple formulaire HTML</h1>
<!-- Debut du formulaire -->
<form action="traitement.php" method="post">
<fieldset>
<legend>Formulaire de saisie</legend>
<p><label>Saisir vos coordonnées :</label></p>
<p>Votre nom : <input name="nom" type="text" /></p>
<p>Votre prenom : <input name="prenom" type="text" /></p>
<p>Vous êtes : <br>
<input name="debutant" type="radio" /> Débutant <br>
</p>
<p>Votre date de naissance : <input name="date" type="date" /></p>
<p>Votre âge : <input name="age" type="text" /></p>
<p>Votre sexe : <br>
<input name="sexe" type="radio" value="H" /> Homme
<input name="sexe" type="radio" value="F" /> Femme
</p>
<button type="submit">Confirmer</button>
</fieldset>
</form>
<!-- Fin du formulaire -->
</body>
</html>
L’attribut « method » et l’attribut « action »
L’attribut method="" spécifie comment envoyer les données du formulaire (les données du formulaire sont envoyées à la page spécifiée dans l’attribut action). Dans cet attribut nous allons utiliser les méthodes superglobales$_POST ou $_GET.
$_GETest la méthode par défaut, il ne faut pas l’utiliser si le formulaire contient d’informations sensibles car elles apparaissent en clair dans l’URL.$_POSToffre une meilleure sécurité car les informations n’apparaissent pas dans l’URL et seront envoyé de manière plus sécurisée.
L’attribut action="" contient le nom du script php qui sera appelé lorsque le formulaire sera validé par l’utilisateur.
La méthode HTTP GET & la méthode HTTP POST
La méthode GET (celle qui est utilisée par défaut si rien n’est renseigné) fait circuler les informations du formulaire en clair dans la barre d’adresse en suivant le format ci-après :
Exemple d’URL créé à partir de la méthode GET d’un formulaire HTML
http://www.unsite.com/chemin/traitement.php?var1=valeur1&var2=valeur2
Cette adresse signifie que nous allons transmettre à la page traitement.php les couples variable / valeur transmis en paramètre. La première variable d’une url est toujours précédée du symbole ? alors que les autres seront précédées du symbole &.
Les noms des variables correspondent aux attributs name des éléments du formulaire et les valeurs aux attributs value. Contrairement à ce que l’on peut lire fréquemment, la limite maximale d’une URL n’est pas de 255 caractères. Il n’existe en réalité aucune limite standard. En effet, la taille maximale d’une URL peut être configurée à la fois côté serveur ou côté client.
Un administrateur de serveur web peut à sa guise augmenter ou diminuer la longueur maximale des URLs.
Quant aux navigateurs, eux aussi fixent par défaut une taille maximale. Il est donc recommandé de ne pas abuser de la longueur d’une URL lorsque l’on ne maîtrise pas l’intégralité de son environnement de production (serveur Web et clients).
La méthode POST, quant à elle, transmet les informations du formulaire de manière masquée mais non cryptée. Le fait de ne pas afficher les données ne signifie en rien qu’elles sont cryptées. Ces informations utilisent le protocole HTTP et non HTTPS qui lui crypte les données.
Quelle est la meilleure méthode à adopter ?
Le choix de l’une ou de l’autre se fera en fonction du contexte. Si par exemple, nous souhaitons mettre en place un moteur de recherches alors nous pourrons nous contenter de la méthode GET qui transmettra les mots-clés dans l’URL. Cela nous permettra aussi de fournir l’URL de recherches à d’autres personnes.
C’est typiquement le cas des URLs de Google. Exemple d’une URL du moteur de recherches Google : http://www.google.fr/search?q=php
La méthode POST est préférée lorsqu’il y a un nombre important de données à transmettre ou bien lorsqu’il faut envoyer des données sensibles comme des mots de passe. Dans certains cas, seule la méthode POST est requise : un formulaire de login par exemple.
Les variables superglobales $_POST et $_GET
$_GET et $_POST sont des tableaux de données associatifs et superglobaux. Voici leurs principales caractéristiques :
- Ils sont générés à la volée par PHP avant même que la première ligne du script ne soit exécuté.
- Ce sont des tableaux associatifs comme ceux que l’on déclare traditionnellement. Leur manipulation est exactement semblable à ces derniers. Les clés correspondent aux noms des variables transmises et les valeurs à celles associées à ces variables.
- Ils sont superglobaux, c’est à dire visibles de partout dans le programme (même à l’intérieur d’une fonction utilisateur).
- Ils sont accessibles en lecture et en écriture. Il est donc possible de les modifier.
La variable $_GET contient tous les couples variable / valeur transmis dans l’url. Pour accéder à la valeur d’une variable dont le nom est prénom, on l’appelle ainsi :
<?php
echo $_GET['prenom'];
?>La variable $_POST contient tous les couples variable / valeur transmis en POST, c’est à dire les informations qui ne proviennent ni de l’URL, ni des cookies et ni des sessions. Pour accéder à la valeur d’une variables dont le nom est prénom, on l’appelle ainsi :
<?php
echo $_POST['prenom'];
?>La casse des variables est importante. Il faut bien penser à mettre $_GET et $_POST en majuscules. Dans le cas contraire, il sera impossible d’obtenir une valeur et une erreur de type undefined variable sera retournée.
Comment accéder aux valeurs qui ont été saisies dans le formulaire HTML pour traitement en PHP ?
Nous allons afficher les informations reçues par le script PHP lorsque l’utilisateur valide le formulaire que nous avons crée dans le paragraphe précèdent. Ces informations sont contenues dans la variable PHP $_POST ($_GET si votre formulaire utilise la méthode GET). Créer un fichier PHP appelé traitement.php et y copier le code PHP que nous allons aborder dans le prochain paragraphe.
En exécutant notre script, on remarque que la variable $_POST est un tableau associatif. L’attribut name="" de chaque contrôle du formulaire est utilisé comme clé associée à la valeur saisie dans le formulaire. On accède par exemple au nom qui a été tapé en écrivant : $_POST['nom']
Cas pratique : Un formulaire HTML et son traitement en PHP
Formulaire HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formulaire</title>
</head>
<body>
<h1>Un simple formulaire HTML</h1>
<form action="traitement.php" method="post">
<fieldset>
<legend>Formulaire de saisie</legend>
<p><label>Saisir vos coordonnées :</label></p>
<p>Votre nom : <input name="nom" type="text" /></p>
<p>Votre prenom : <input name="prenom" type="text" /></p>
<p>Vous êtes : <br>
<input name="debutant" type="radio" /> Débutant <br>
</p>
<p>Votre date de naissance : <input name="date" type="date" /></p>
<p>Votre âge : <input name="age" type="text" /></p>
<p>Votre sexe : <br>
<input name="sexe" type="radio" value="H" /> Homme
<input name="sexe" type="radio" value="F" /> Femme
</p>
<button type="submit">Confirmer</button>
</fieldset>
</form>
</body>
</html>Traitement en PHP
<?php
if ($_POST['nom'] != '') {
echo "<br/><br/>Bonjour " . $_POST['nom'] . "!<br/>";
echo "Je peux vous appeler " . $_POST['prenom'] . "?<br/><br/>";
if (isset($_POST['debutant'])) {
echo "C'est une bonne idée de commencer à apprendre à programmer en PHP !<br/><br/>";
} else {
if ($_POST['sexe'] == 'H') {
$mot = "débutant";
} else {
$mot = "débutante";
}
echo "Comme vous n'êtes pas " . $mot . " vous pouvez passer directement au mini-projet !<br/><br/>";
}
} else {
echo "Vous n'avez pas rempli le champ nom !";
}
?>