Formulaire HTML et traitement PHP
illustré par l'exemple
|
Ce document met en rapport
- le code d'un formulaire HTML pour créer des champs de saisie ;
- le code PHP pour récupérer les données ;
au moyen d'exemples commentés.
|
form, versant HTML
Pour déclarer un formulaire :
<form method="POST"
action="formulaire-01.php">
... le corps du formulaire ...
</form>
Commentaires HTML :
- Le formulaire HTML doit être placé entre les balises <form ... </form>. Dans notre exemple, la position des balises est <body><form ... </form></body>.
- action="formulaire-01.php" porte le nom du fichier PHP qui dépouille le questionnaire.
form, versant PHP
Le fichier PHP qui dépouille le formulaire doit porter le nom du fichier déclaré avec action="formulaire-01.php".
|
text, versant HTML
Pour déclarer un champ text :
<p>
<label for="nom">Prénom Nom:</label>
<input type="text" id="nom" name="nom">
</p>
Commentaires HTML :
- Le champ text s'appelle "nom".
text, versant PHP
Pour récupérer les données du champ text (vers le début du script) :
$nom = filter_input(INPUT_POST, 'nom');
if(strlen($nom)>0){
echo "<p>Nom: ".$nom."</p>";
} else {
echo "<p>Erreur: le nom manque.</p>";
}
Commentaires PHP :
- La récupération se fait avec filter_input(INPUT_POST, 'nom') où 'nom' doit correspondre à la déclaration name="nom" de la partie HTML.
- Le nom de la variable $nom peut être choisi librement.
|
number, versant HTML
Pour déclarer deux champs numériques :
<p style="line-height:2">
<label for="nbreart">Nombre d'articles:
</label>
<input
type="number" id="nbreart" name="nbreart"
min="0" step="1" max="99" value="1">
<br>
<label for="prixunit">Prix d'un article:
</label>
<input type="number" id="prixunit"
name="prixunit" min="0" step="0.05"
max="999.95">
</p>
Commentaires HTML :
- Le premier champ numérique reçoit une valeur entière comprise entre 0 et 99 inclusivement.
- Le deuxième champ reçoit une valeur numérique qui peut prendre les valeurs 0, 0.05, 0.10, 0.15, 0.20, 0.25, ..., 999.90, 999.95
number, versant PHP
Pour récupérer les données des champs numériques :
$nbreart = filter_input(INPUT_POST,
'nbreart', FILTER_VALIDATE_INT);
if(is_numeric($nbreart)){
echo "<p>Nombre d'articles: "
.$nbreart."</p>";
} else {
echo "<p>Erreur: le nombre "
."d'articles manque.</p>";
}
$prixunit = filter_input(INPUT_POST,
'prixunit', FILTER_VALIDATE_FLOAT);
if(is_numeric($prixunit)){
echo "<p>Prix d'un article: "
.$prixunit."</p>";
} else {
echo "<p>Erreur: le prix unitaire "
."de l'article manque.</p>";
}
Commentaires PHP :
- La récupération des nombres se fait avec un filtre qui vérifie s'il s'agit bien d'un entier, respectivement d'un nombre à virgule flottante :
filter_input(INPUT_POST, 'nbreart', FILTER_VALIDATE_INT)
filter_input(INPUT_POST, 'prixunit', FILTER_VALIDATE_FLOAT)
où 'nbreart' et 'prixunit' doivent correspondre aux déclarations name="nbreart" et name="prixunit" de la partie HTML
- Les noms de variables $nbreart et $prixunit peuvent être librement choisis.
|
textarea, versant HTML
Pour déclarer une zone de texte :
<p>
<label for="message">Message</label>
<textarea id="message" name="message"
cols="50"></textarea>
</p>
Commentaires HTML :
- En accrochant le coin inférieur droit, on peut redimensionner la zone de texte.
textarea, versant PHP
Pour récupérer les données de la zone de texte (vers le début du script) :
$message = filter_input(INPUT_POST,
'message');
if(strlen($message)>0){
echo "<p>Message</p>";
echo "<p><i>".$message
."</i></p>";
} else {
echo "<p>Erreur: "
."le message manque.</p>";
}
Commentaires PHP :
- La récupération se fait avec filter_input(INPUT_POST, 'message') où 'message' doit correspondre à la déclaration name="message" de la partie HTML.
- Le nom de la variable $message peut être choisi librement.
|
radio, versant HTML
Pour déclarer un bouton radio :
<p>Sexe</p>
<p style="line-height:2">
<input type="radio" name="sexe" id="homme"
value="h" checked>
<label for="homme">homme</label>
<br>
<input type="radio" name="sexe" id="femme"
value="f">
<label for="femme">femme</label>
</p>
Commentaires HTML :
- Le bouton s'appelle sexe. Il possède deux valeurs : h ou f.
- Un bouton peut être présélectionné ; ici, h.
radio, versant PHP
Pour récupérer les données du bouton radio (vers le début du script) :
$sexe = filter_input(INPUT_POST, 'sexe');
if ($sexe==='h'){
echo "<p>Sexe: homme</p>";
} elseif ($sexe==='f'){
echo "<p>Sexe: femme</p>";
} else {
echo "<p>Erreur: "
."le sexe n'est pas défini.</p>";
}
Commentaires PHP :
- $sexe prend l'une des deux valeurs : h ou f qui sont des chaînes de caractères.
- La comparaison se fait avec trois signes d'égalité.
|
select, versant HTML
Pour déclarer un sélecteur :
<p>
<label for="etage">Étage</label>
<select id="etage" name="etage">
<option value="-1">Sous-sol</option>
<option value="0">Rez</option>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
Commentaires HTML :
- Le sélecteur s'appelle etage. 'Sous-sol', 'Rez', '1', ... sont les textes affichés dans le formulaire.
- Les valeurs '-1', '0', '1', ... sont les représentations internes envoyées à PHP.
- Une valeur peut être présélectionnée ; ici, '2'.
Aperçu
select, versant PHP
Pour récupérer les données du sélecteur (vers le début du script) :
$etage = filter_input(INPUT_POST,
'etage');
if ($etage==='-1'){
echo "<p>Étage: Sous-sol</p>";
} elseif ($etage==='0'){
echo "<p>Étage: Rez</p>";
} else {
echo '<p>Étage: '.$etage.'</p>';
}
Commentaires PHP :
- $etage est une chaîne de caractères, mais une valeur numérique est aussi possible.
|
checkbox, versant HTML
Pour déclarer une case à cocher :
<p style="line-height:1.5;">
<input type="checkbox" id="opt"
name="opt" value="true" checked>
<label for="opt">Avec option</label>
</p>
Pour déclarer une liste de cases à cocher :
<p style="line-height:2">
<input type="checkbox" name="todo[]"
id="francais" value="francais">
<label for="francais">Français</label>
<br>
<input type="checkbox" name="todo[]"
id="maths" value="maths" checked>
<label for="maths">Mathématiques</label>
<br>
<input type="checkbox" name="todo[]"
id="anglais" value="anglais">
<label for="anglais">Anglais</label>
<br>
<input type="checkbox" name="todo[]"
id="economie" value="economie" checked>
<label for="economie">Économie</label>
</p>
Commentaires HTML :
- Un même nom, ici todo[], est utilisé pour une série de checkbox distinguées par leurs valeurs. Le nom est suivi de crochets dont la fonction est déclarer que todo[] n'est pas une simple chaîne de caractères, mais une liste.
- Lorsqu'on ne donne pas de valeurs aux indices, ils prennent par défaut les valeurs suivantes: todo[0], todo[1], todo[2], ...
- Avec checked, on peut déclarer que certaines cases sont initialement cochées ; ici, Mathématiques et Économie.
checkbox, versant PHP
Pour récupérer les données d'une case à cocher (vers le début du script) :
if (isset($_POST['opt'])){
// la case opt est cochée
} else {
// la case opt n'est pas cochée
}
Pour récupérer les données d'une liste de cases à cocher (vers le début du script) :
if (is_array($_POST['todo'])){
$todo = $_POST['todo'];
} else {
$todo = array();
}
Pour traiter chaque case à cocher (au fil du script) :
if (in_array('francais', $todo)){
echo "<p>Traitement du cas où la "
."case Français est cochée</p>";
} else {
echo "<p>Traitement du cas où la "
."case Français n'est pas cochée</p>";
}
if (in_array('maths', $todo)){
echo "<p>Traitement du cas où la "
."case Mathématiques est cochée</p>";
} else {
echo "<p>Traitement du cas où la "
."case Mathématiques n'est".
." pas cochée</p>";
}
if (in_array('anglais', $todo)){
echo "<p>Traitement du cas où la "
."case Anglais est cochée</p>";
} else {
echo "<p>Traitement du cas où la "
."case Anglais n'est pas cochée</p>";
}
if (in_array('economie', $todo)){
echo "<p>Traitement du cas où la "
."case Économie est cochée</p>";
} else {
echo "<p>Traitement du cas où la "
."case Économie n'est pas cochée</p>";
}
Commentaires PHP :
- Dans le cas où une case au moins est cochée, $_POST['todo'] est une liste de valeurs.
- Dans le cas où aucune case n'est cochée, $_POST['todo'] est remplacé par une liste vide.
- Si la case Français est cochée, la valeur 'francais', sous la forme d'une chaîne de caractères, se trouve dans la liste $todo ; sinon, la valeur 'francais' est absente de la liste $todo.
- L'appartenance d'une valeur à la liste $todo (ou sa non appartenance) permet de traiter chaque case à cocher.
|
hidden, versant HTML
Pour déclarer des données à stocker dans la page :
<input type="hidden" name="data[0][0]"
value="Paris"><br>
<input type="hidden" name="data[0][1]"
value="Marseille"><br>
<input type="hidden" name="data[1][0]"
value="Berlin"><br>
<input type="hidden" name="data[1][1]"
value="Bonn">
Commentaires HTML :
- Dans cet exemple, des données sont stockées dans un array nommé data.
Aperçu
Les données hidden ne sont pas affichées. Par contre, elles ne sont pas cachées puisqu'on peut les voir en affichant le code source de la page.
hidden, versant PHP
Pour récupérer les données hidden :
if (is_array($_POST['data'])){
$data = $_POST['data'];
} else {
$data = array();
}
var_dump($data);
Commentaires PHP :
- On peut récupérer les données en bloc, sans devoir déclarer les indices actifs.
|
submit, versant HTML
Pour soumettre le formulaire :
<p><input type="submit"
value="Dépouiller le formulaire">
</p>
submit, versant PHP
Le bouton submit du formulaire HTML lance le dépouillement PHP du formulaire.
|
|
Contact |
Accueil >
PHP
|