7- Les Formulaires
Les formulaires introduits dans le HTML depuis ses plus anciennes versions sont l’élément essentiel qui permet l’interactivité entre un site et ses visiteurs. Ils constituent pour cette raison la base de la création de sites dynamiques.
Tout échange entre visiteur et serveur passe par un formulaire, dans lequel l’utilisateur peut saisir textes ou mots de passe, opérer des choix grâce à des boutons radio, des cases à cocher ou des listes de sélection, voire envoyer ses propres fichiers depuis le poste client. Il est donc important d’en maîtriser la création à la fois avec HTML 5, pour obtenir des formulaires présentables, et avec PHP, pour gérer les informations fournies par le formulaire au script côté serveur.
- Création d’un formulaire HTML
- Récupération des données du formulaire
- Transfert de fichiers vers le serveur
- Gérer les boutons d’envoi multiples
1- Création d’un formulaire HTML
Pour être conforme au HTML 5, le document contenant le formulaire doit avoir la structure minimale suivante :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Les Formulaires en PHP</title>
</head>
<body>
<form action="ajouter.php" method="POST">
<!-- Corps du formulaire contenant les dihherents composants -->
</form>
</body>
</html>L’élément possède certains attributs obligatoires. D’autres sont utilisés dans des circonstances particulières en fonction des besoins.
L’attribut action= »nom_de_fichier.php » (repère) est obligatoire. Il désigne le fichier qui va traiter, sur le serveur, les informations saisies dans le formulaire.
L’attribut action= »nom_de_fichier.php » peut aussi avoir la valeur « mailto: », qui provoque l’envoi des données vers une adresse e-mail, qu’il faut préciser à la suite du mot mailto en écrivant, par exemple :
<form action="mailto:nom@exemple.com" method="POST">
<!-- Corps du formulaire contenant les dihherents composants -->
</form>Cette méthode ne peut servir qu’à envoyer des informations vers un e-mail mais pas vers une base de données.
– method= »POST|GET » détermine la méthode d’envoi des données vers le serveur.
– name= »chaine_de_caractères » attribue un nom au formulaire.
– enctype= »type_d’encodage » détermine le type d’encodage des données transmises au serveur. Sa valeur par défaut, « application/x-www-form-urlencoded », est utilisable dans la plupart des cas, à l’exception du transfert de fichiers du poste client vers le serveur, pour lequel elle doit être « multipart/form-data ».
– les différents composants HTML d’un formulaire et leurs rôles respectifs.
L’élément permet de créer les composants classiques des formulaires
La différenciation de ces composants s’effectue simplement en définissant la valeur de leurs attributs, et notamment de l’attribut type.
L’attribut name est obligatoire, car c’est lui qui permet d’identifier les champs côté serveur et ainsi de récupérer leur contenu.
Les différents types :
« text », « password », « email », « tel », « date », « number », « checkbox », « radio », « submit », « reset », « file » et « hidden ».
2- Récupération des données du formulaire
Maintenant que vous savez créer de beaux formulaires, vous allez voir comment récupérer les données entrées par l’utilisateur dans les différents champs du formulaire.
Tout d’abord, que se passe-t-il lorsque l’utilisateur clique sur le bouton d’envoi ? Une requête HTTP est envoyée au serveur à destination du script désigné par l’attribut action de l’élément . La requête contient toutes les associations entre les noms des champs et leur valeur. Ces associations se trouvent dans l’en-tête HTTP si la méthode POST est utilisée et dans l’URL s’il s’agit de la méthode GET.
1- Valeurs uniques
Les valeurs uniques proviennent des champs de formulaire dans lesquels l’utilisateur ne peut entrer qu’une valeur, un texte par exemple, ou ne peut faire qu’un seul choix (bouton radio, liste de sélection à choix unique).
Depuis PHP 4.1, ces valeurs sont contenues sur le serveur dans des tableaux associatifs dits super globaux appelés $_POST et $_GET, selon la méthode choisie. Les clés de ces tableaux sont les noms associés aux champs par l’attribut name.
Cas de la méthode POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>les formulaires</h1>
<form action="" method="POST">
<div>
<label for="nom" methode="post" >Votre Nom</label>
<input type="text" id="nom" name="nom">
</div>
<div>
Débutant: <input type="radio" name="niveau" value="débutant">
Initié: <input type="radio" name="niveau" value="Initié">
</div>
<input type="reset" name="reset" value="Effacer">
<input type="submit" name="envoyer" value="Envoyer">
</form>
<?php
if ( isset($_POST["nom"]) && isset($_POST["niveau"])) {
echo "<h2> Bonjour " . stripslashes($_POST["nom"]) . " vous etes " . $_POST["niveau"] . " en PHP </h2>";
}
?>
</body>
</html>La fonction stripslashes() est utilisée pour supprimer les caractères d’échappement ajoutés automatiquement devant les caractères spéciaux éventuellement utilisés dans les données saisies avant de les afficher dans la page.
Cas de la méthode GET
Avec la méthode GET, vous récupérez les données du formulaire dans les variables $_GET [« nom »] et $_GET[« niveau »]
Contrairement à ce qui se passe avec la méthode POST, vous constatez que lors du clic sur le bouton d’envoi l’adresse de la page cible désignée par l’attribut action est suivie par le caractère ? puis par le nom de chaque champ et la valeur qui y est associée.
<h1>les formulaires</h1>
<form action="" method="GET">
<div>
<label for="nom" methode="post" >Votre Nom</label>
<input type="text" id="nom" name="nom">
</div>
<div>
Débutant: <input type="radio" name="niveau" value="débutant">
Initié: <input type="radio" name="niveau" value="Initié">
</div>
<input type="reset" name="reset" value="Effacer">
<input type="submit" name="envoyer" value="Envoyer">
</form>
<?php
if ( isset($_GET["nom"]) && isset($_GET["niveau"])) {
echo "<h2> Bonjour " . stripslashes($_POST["nom"]) . " vous etes " . $_POST["niveau"] . " en PHP </h2>";
}
?>
Pour simplifier la manipulation des valeurs issues du formulaire, vous pouvez récupérer chaque valeur dans des variables scalaires dès le début du script de traitement, comme ci-dessous
$nom = $_POT["nom"];
$niveau = $_POT["niveau"];2- Les valeurs multiples
Certains champs de formulaire peuvent permettre aux visiteurs de saisir plusieurs valeurs sous un même nom de composant.
Cela peut concerner un groupe de cases à cocher ayant le même attribut name, par exemple, dont il est possible de cocher une ou plusieurs cases simultanément. Ce peut également être le cas d’une liste de sélection ayant toujours un nom unique mais dans laquelle l’attribut multiple= »multiple » est défini.
Dans tous les cas, ce n’est pas une valeur scalaire mais un tableau qui est récupéré côté serveur. Il faut pour cela faire suivre le nom du composant de crochets, comme pour créer une variable de type array.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listes à choix multiples</title>
</head>
<body>
<?php require("entete.php") ?>
<form action="" method="POST">
<p>
<label for="nom">Nom:</label>
<input type="text" name="nom" id="nom">
</p>
<p>
<label for="prenom">Prenom:</label>
<input type="text" name="prenom" id="prenom">
</p>
<p>
<label for="age">Age:</label>
<input type="number" name="age" id="age">
</p>
<p>
Langues prtiquées:<br>
<select name="langues[]" multiple="multiple">
<option value="Francais">Francais</option>
<option value="Anglais">Anglais</option>
<option value="Allemand">Allemand</option>
<option value="Espanol">Espanol</option>
</select>
</p>
<p>
Competances Informatiques:<br>
HTML5<input type="checkbox" name="competances[]" value="HTML5">
CSS 3<input type="checkbox" name="competances[]" value="CSS3">
PHP<input type="checkbox" name="competances[]" value="PHP">
MySQL<input type="checkbox" name="competances[]" value="MySQL">
</p>
<p>
<input type="reset" value="Effacer">
<input type="submit" name="Envoyer" value="Envoyer">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listes à choix multiples</title>
</head>
<body>
<?php require("entete.php") ?>
<form action="" method="POST">
<p>
<label for="nom">Nom:</label>
<input type="text" name="nom" id="nom">
</p>
<p>
<label for="prenom">Prenom:</label>
<input type="text" name="prenom" id="prenom">
</p>
<p>
<label for="age">Age:</label>
<input type="number" name="age" id="age">
</p>
<p>
Langues prtiquées:<br>
<select name="langues[]" multiple="multiple">
<option value="Francais">Francais</option>
<option value="Anglais">Anglais</option>
<option value="Allemand">Allemand</option>
<option value="Espanol">Espanol</option>
</select>
</p>
<p>
Competances Informatiques:<br>
HTML5<input type="checkbox" name="competances[]" value="HTML5">
CSS 3<input type="checkbox" name="competances[]" value="CSS3">
PHP<input type="checkbox" name="competances[]" value="PHP">
MySQL<input type="checkbox" name="competances[]" value="MySQL">
</p>
<p>
<input type="reset" value="Effacer">
<input type="submit" name="Envoyer" value="Envoyer">
</p>
</form>
<?php
if (isset($_POST["nom"]) && (isset($_POST["prenom"])) && (isset($_POST["age"])) && (isset($_POST["langues"])) && (isset($_POST["competances"]))) {
echo "<h2> Récapitulatif de votre fiche d'informations parsonnelles </h2>";
$nom = $_POST["nom"];
$prenom = $_POST["prenom"];
$age = $_POST["age"];
$langues = $_POST["langues"];
$competances = $_POST["competances"];
echo "Vous êtes :<b> $prenom" . stripslashes($nom) . "</b> Vous avez <b> $age ans </b>";
echo "<br> vous parlez :";
echo "<ul>";
foreach ($langues as $valeur) {
echo "<li> $valeur</li>";
}
echo "<ul>";
echo "vous avez des competences informatiques en :";
echo "<ul>";
foreach ($competances as $valeur) {
echo "<li> $valeur </li>";
}
echo "</ul>";
}
?>
</body>
</html>
3- Transfert de fichiers vers le serveur
L’inclusion d’un élément HTML dans un formulaire crée une situation particulière. Il ne s’agit plus de transmettre une ou plusieurs valeurs scalaires au serveur mais l’intégralité d’un fichier, lequel peut avoir une taille importante et un type quelconque. Ce fichier doit évidemment être présent sur l’ordinateur du visiteur.
Contrairement aux exemples précédents, l’élément doit avoir l’attribut method à la valeur post et l’attribut enctype à la valeur multipart/form-data.
De même que pour le transfert de données simples, vous allez utiliser les tableaux super globaux $_POST ou $_GET. Vous disposez également depuis la version PHP 4.1 du tableau associatif multidimensionnel $_FILES, qui contient les informations nécessaires au traitement du fichier transféré.
$_FILES[« fich »][« name »] : contient le nom qu’avait le fichier sur le poste client.
$_FILES[« fich »][« type »] : contient le type MIME initial du fichier et permet un contrôle et une censure éventuelle du fichier transféré.
$_FILES[« fich »][« size »] : donne la taille réelle en octet du fichier transféré.
$_FILES[« fich »][« tmp_name »] : donne le nom temporaire que le serveur attribue automatiquement au fichier en l’enregistrant dans le répertoire tampon.
$_FILES[« fich »][« error »] : donne le code d’erreur éventuel associé au fichier téléchargé et permet d’afficher un message d’erreur en clair en créant un tableau indicé de 0 à 4 contenant les messages appropriés.
Ces codes sont définis par les constantes entières suivantes depuis PHP 4.3 :
– UPLOAD_ERR_OK : de valeur 0, indique que le transfert est bien réalisé.
– UPLOAD_ERR_INI_SIZE : de valeur 1, indique que la taille du fichier est supérieure à celle définie dans la php.ini.
– UPLOAD_ERR_FORM_SIZE : de valeur 2, indique que la taille est supérieure à celle définie dans le champ caché MAX_FILE_SIZE.
– UPLOAD_ERR_PARTIAL : de valeur 3, indique que le fichier n’a été que partiellement téléchargé.
– UPLOAD_ERR_NO_FILE : de valeur 4, indique qu’aucun fichier n’a été téléchargé.
Vous devez procéder à l’enregistrement et au renommage éventuel du fichier sur le serveur. Vous disposez pour cela de la fonction move_uploaded_file(), dont la syntaxe est la suivante :
boolean move_uploaded_file (string « fichtmp », string « fichfinal »)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transfer fichier vers le serveur</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="fich" accept="image/gif" size="50">
<input type="submit" value="Envoyer" name="Envoyer">
</form>
<?php
if (isset($_FILES["fich"])){
echo "Taille maximale autorisée :" . $_POST["MAX_FILE_SIZE"] ."octets <br>";
echo "<b> Clés et valeurs du tableau \$_FILES </b><br";
foreach($_FILES["fich"] as $cle => $valeur){
echo "clé : $cle valeur : $valeur <br>";
}
// enregistrement et renomage du fichier
$result = move_uploaded_file($_FILES["fich"]["tmp_name"] ,"imagephp.gif");
}
?>
</body>
</html>