TP HTML n°3 : Les formulaires et le PHP

TP HTML n°3 : Les formulaires et le PHP
1°) Qu'est-ce qu'un formulaire ?
En HTML, un formulaire est un espace de saisie dans une page web, pouvant comporter plusieurs zones, ou champs :
on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis, appuyer sur des
boutons... Ces zones de saisie assurent une interaction entre la personne utilisant le site web et la machine (serveur) qui
héberge ce site. Les boutons des formulaires permettent de lancer des actions prédéfinies par l'auteur du site. Ces
actions sont des petits programmes appelés scripts (créés en javascript, PHP, Perl...) qui envoient les données saisies au
serveur. Ce dernier les traite et renvoie une réponse à l'utilisateur sur le site web qu'il consulte.
Dans ce TP, nous allons apprendre à coder un formulaire en HTML et à coder un script PHP minimaliste qui traite ce
formulaire et renvoie une réponse à l'utilisateur.
2°) Création du formulaire
Un formulaire s'insère simplement dans le code votre page HTML en utilisant la balise form. Cependant, cette balise
nécessite obligatoirement l'utilisation d'attributs bien spécifiques. En effet, il est indispensable d'indiquer de quelle
manière les données saisies par l'utilisateur seront envoyées aux serveur et quel traitement elles vont subir.
Le premier attribut est method. C'est lui qui indique la méthode d'envoi des données saisies. Il peut prendre deux
valeurs :
method="get" : valeur en général peu adaptée car l'envoi est limité à 255 caractères et les informations seront
envoyées dans l'adresse de la page. À déconseiller donc.
method="post": valeur qui permet d'envoyer un grand nombre d'informations sans que les données saisies transitent
par la barre d'adresse. C'est cette méthode que je vous recommande.
Le second attribut est action. Sa valeur est l'adresse du programme qui traitera les informations envoyées. En général, ce
programme se situe sur le serveur hébergeant le site web mais, pour notre TP, ce programme, c'est vous qui allez le créer
en utilisant un peu de langage PHP. Dans tout le reste du TP, on considèrera que ce programme s'appelle
traitement.php. Pour l'instant, on supposera qu'il existe et on s'intéresse tout d'abord au codage du formulaire luimême.
Dans le code de votre site HTML, l'introduction d'un formulaire se fait donc avec le code suivant :
<form action="traitement.php" method="post">
<!-- intérieur du formulaire -->
</form>
Cependant, pour l'instant, votre formulaire ne fait rien du tout ! Voyons les différentes façons de coder toutes les
informations que peut être amené à saisir un utilisateur de site web...
3°) Les zones de saisie de texte
a) Zone de texte à une ligne
Comme son nom l'indique, elle sert à saisir des textes relativement courts comme, par exemple, un nom, un pseudo, un
mot de passe... Elle se créé en utilisant la balise input. Cette balise sert aussi à autre chose mais, dans ce cas, ses
attributs ne seront pas les mêmes.
Les attributs obligatoires à utiliser pour créer une zone de texte à une ligne :
type="text" : indique que du texte est demandé à l'utilisateur.
name="nom" : donne un nom à la zone de texte. Ce code minimal n'affiche qu'une case vide dans laquelle l'utilisateur
ne sait pas quoi taper. Il faut donc lui attribuer un label et le lier à notre zone de texte. Label est une autre balise à placer
avant la balise input, son attribut for se chargeant de faire le lien avec un nouvel attribut de la balise input (encore un),
l'attribut id. Exemple :
<label for="nom">Votre nom : </label>
<input type="text" name="nom" id="nom"></input>
On peut imaginer que l'attribut name et l'attribut id font un peu doublon et c'est un peu vrai. Mais l'attribut id permet un
comportement sympathique pour l'utilisateur : si celui-ci clique sur le label de la zone de texte, le curseur se placera
automatiquement sur la zone à remplir. Essayez, vous verrez !
Formulaires et PHP 1/6
Les attributs facultatifs de la balise input :
size="40" : permet de fixer la taille du champ de saisie de texte. Le nombre entre guillemets fixe cette taille.
Maxlength="20" : limite le nombre de caractères à saisir avec la valeur entre guillemets.
value="Oui" : pré-remplit la zone de texte avec une valeur par défaut.
placeholder="Tapez votre nom ici": donne une indication sur ce qu'il faut taper dans la zone de saisie de
texte, indication qui disparaît dès que l'utilisateur commence à taper.
type="password" : crée une zone de mot de passe, c'est-à-dire que ce qui est tapé dans la zone de saisie ne sera pas
affiché à l'écran.
Exercice : Tapez le code HTML nécessaire à l'affichage reproduit ci-dessous.
b) Zone de texte multi-ligne
Si la saisie à faire nécessite la présence de plusieurs lignes de texte, comme pour un commentaire ou une description par
exemple, il faut utiliser la balise textarea. De la même manière que précédemment, il faut lui donner un nom et la faire
précéder de la balise label. Par exemple :
<label for="description">Racontez vos vacances : </label><br>
<textarea name="description" id="description"></textarea>
Attributs optionnels :
rows="10" : permet de fixer le nombre de lignes de la zone de texte.
cols="40" : permet de fixer le nombre de colonnes de la zone de texte.
Exercice : Tapez le code HTML nécessaire à l'affichage reproduit ci-dessous.
4°) Choix multiples
a) Les cases à cocher
Souvent, plutôt que de demander au visiteur d'énumérer ses choix, il est plus facile de lui faire cocher des cases parmi
une liste pré-établie. Bien entendu, c'est possible avec les formulaires HTML, le type checkbox est fait pour ça ! Voici sa
syntaxe :
<input type="checkbox" name="James" id="James"></input>
<label for="James">James Bond.</label>
Exercice : Tapez le code HTML nécessaire à l'affichage reproduit ci-dessous.
Formulaires et PHP 2/6
b) Les zones d'options
Une zone d'options permet de faire un choix unique parmi une liste de possibilités. Elle se définit avec la balise input
dont l'attribut type aura pour valeur radio. Une zone d'options se différencie des cases à cocher par le fait qu'elle doit
être organisée en groupes. Les options d'un même groupe doivent avoir le même name (de manière à ce qu'un seul choix
soit possible dans le groupe) mais une value différente.
Exemple :
<form action="traitement.php" method="post">
Dans quelle classe &ecirc;tes-vous ?<br>
<input type="radio" name="Classe" value="Seconde" id="Seconde"></input>
<label for="Seconde">Seconde</label>.<br>
<input type="radio" name="Classe" value="Première" id="Première"></input>
<label for="Première">Premi&egrave;re</label>.<br>
<input type="radio" name="Classe" value="Terminale" id="Terminale"></input>
<label for="Terminale">Terminale</label>.<br>
<br>
Quel est votre professeur de sciences physiques ?<br>
<input type="radio" name="Prof" value="Dillenseger" id="Dillenseger"></input>
<label for="Dillenseger">M. Dillenseger</label>.<br>
<input type="radio" name="Prof" value="Lhoussene" id="Lhoussene"></input>
<label for="Lhoussene">M. Lhouss&egrave;ne</label>.<br>
<input type="radio" name="Prof" value="Soave" id="Soave"></input>
<label for="Soave">Mme Soave</label>.
</form>
Testez ce code pour bien comprendre la différence avec les cases à cocher.
c) Les listes déroulantes
Pour faire un choix unique parmi une liste pré-établie, on vient de voir qu'on peut définir une zone d'options mais il
existe une seconde possibilité : une liste déroulante. Pour en définir une, on doit utiliser la balise select en précisant ses
attributs name et id. Ensuite on y insère autant de balises option que vous voulez de choix possibles.
Exemple :
<label for="Prof">Quel est votre professeur de sciences physiques ?</label><br>
<Select name="Prof" id="Prof">
<option value="Dillenseger">M. Dillenseger</option>
<option value="Lhoussene">M. Lhouss&egrave;ne</option>
<option value="Soave">Mme Soave</option>
</select>
Je vous recommande à nouveau de tester ce code.
5°) Derniers réglages et envoi du formulaire
a) Présentation et astuces
Il faut toujours vous assurer que votre formulaire soit lisible sans difficulté par l'utilisateur sous peine de décourager ce
dernier. Si le formulaire contient beaucoup de choses à saisir, il est conseillé de regrouper les champs en rubriques en
utilisant les balises fieldset et legend. La balise fieldset permet d'entourer les champs sélectionnés d'un mince liseré et
la balise legend permet de lui donner un nom.
Syntaxe :
<fieldset>
<legend>Etat civil</legend>
<!-- insérer les champs ici -->
</fieldset>
<fieldset>
<legend>Scolarité</legend>
<!-- insérer les champs ici -->
</fieldset>
Formulaires et PHP 3/6
Et vous pourrez obtenir un affichage similaire à ceci :
Dans votre formulaire, certains champs sont plus important que d'autres. Il est donc nécessaire de les mettre en valeur,
voire de rendre leur saisie obligatoire. Pour cela il existe les attributs autofocus et required.
Exemple :
<input type="text" name="nom" id="nom" autofocus required></input>
b) Création du bouton d'envoi du formulaire
Votre formulaire doit toujours intégrer un bouton d'envoi, ce qui permet à l'utilisateur de valider toutes ses saisies et à
ces dernières d'être envoyées afin que le script déclaré dans la définition du formulaire (pour nous, c'est
traitement.php) puisse les traiter.
Pour créer un tel bouton, c'est très simple, il suffit d'utiliser à nouveau la balise input mais en attribuant la valeur submit
à l'attribut type. Vous pouvez aussi donner la valeur reset à type si vous voulez créer un bouton qui remet le formulaire à
zéro.
Exemples :
<input type="submit" value="Valider vos choix"></input>
<input type="reset" value="Remise &agrave; z&eacute;ro"></input>
Travail à effectuer :
Vous devez écrire le code HTML pour obtenir un formulaire ressemblant à la capture d'écran suivante.
Formulaires et PHP 4/6
6°) Création du script PHP
Savoir créer un formulaire, c'est bien, mais ce serait encore mieux si les informations saisies pouvaient être traitées.
Pour cela, il va falloir écrire le fameux fichier traitement.php auquel fait appel la balise form. Ce qui suit vous donne
donc quelques connaissances élémentaires du langage PHP qui nous suffiront pour ce TP.
Pour que le code PHP puisse être interprété par votre machine, il faut y installer PHP. La manière la plus simple d'y
parvenir est de télécharger des distributions toutes prêtes du genre WAMP (sous Windows), MAMP (sous MacOSX) ou
LAMP (sous Linux). Lisez l'annexe pour plus d'informations.
a) Les bases du PHP
Le PHP est un langage pensé spécialement pour créer des pages Internet dynamiques, c'est-à-dire dont l'affichage peut
évoluer en fonction des actions de l'utilisateur. Le HTML pur ne permet pas ce comportement et ne permet de créer que
des pages Internet statiques.
Le code PHP peut être intégré au sein d'un fichier HTML (on peut mélanger HTML et PHP!) dont on aurait modifié
l'extension en .php ou être placé dans un fichier indépendant ne comportant que du code PHP mais ayant l'extension
.php. Le code PHP doit être inséré dans une balise spéciale :
<?php
… code PHP …
?>
b) Les variables
Quand vous cliquez sur le bouton d'envoi du formulaire, vos saisies sont enregistrées dans des variables qu'il faut savoir
appeler pour que le script PHP puisse les traiter. Le nom d'une variable est toujours précédé du symbole $. Ensuite, la
syntaxe du PHP ressemble étrangement à celle du Java. Par exemple :
<?php
$nombre1=15;
?>
On affecte la valeur 15 à la variable nombre1. Vous remarquez le point virgule pour terminer l'instruction !
Les variables peuvent prendre une valeur particulière, NULL, qui signifie que la variable n'a pas de valeur ! Cela peut
être intéressant, en particulier pour les formulaires, pour tester si l'utilisateur a complété toutes les questions. Exemple
d'algorithme :
Si $Nom=NULL alors écrire « Veuillez entrer votre nom ! ».
À propos, les variables issues d'un formulaire ont une syntaxe particulière. Dans ce TP, vous vous souvenez que le
formulaire créé utilise la méthode POST. Si on écrit l'instruction suivante :
$_POST['Nom']='Dupont';
On affecte la valeur Dupont à la variable Nom qui a été saisie dans un formulaire utilisant la méthode POST.
Les notations dans le fichier HTML qui définit votre formulaire et celles présentes dans votre script PHP doivent
concorder.
Exemple :
Supposons que, dans le formulaire, se trouve le code suivant :
<label for="prenom">Votre pr&eacute;nom : </label>
<input type="text" name="prenom" id="prenom"></input>
L'utilisateur tape Romain pour répondre. Lorsque le bouton d'envoi est utilisé, une nouvelle variable est créée
$_['prenom'] et elle a pour valeur Romain.
c) L'instruction echo
L'instruction echo permet d'écrire à l'écran. Par exemple :
echo 'Bonjour';
écrit le mot Bonjour à l'écran.
echo $_['prenom'];
écrit le contenu de la variable $_['prenom'] à l'écran.
echo 'J\'aime la spécialité ISN'; L'antislash \ permet d'afficher des apostrophes dans une chaîne de
Formulaires et PHP 5/6
caractères.
Pour combiner l'affichage de chaînes de caractères et l'affichage de valeurs de variables, il faut utiliser des points
comme séparateurs. Par exemple :
echo 'Vous avez entré ' . $_POST['prenom'] . ' comme prénom.';
Cette instruction affichera : « Vous avez entré Romain comme prénom. »
d) La structure if … else
Je ne m'étendrai pas sur cette instruction car sa syntaxe est très similaire à celle utilisée en Java. Jugez-en plutôt :
if (condition)
// si la condition est respectée
{ série d'instructions.}
else
// si la condition n'est pas respectée
{série d'instructions.}
Exemple :
<?php
if ($moyenne >= '10')
{echo 'Vous avez la moyenne ce trimestre.';}
else
{echo 'Votre moyenne est insuffisante, au travail !';}
?>
Symboles utilisés pour les comparaisons :
== Est égal à
>
Est supérieur à
<
Est inférieur à
>= Est supérieur ou égal à
<= Est inférieur ou égal à
!= Est différent de
d) Travail à effectuer
Vous devez écrire le programme traitement.php, en mixant HTML et PHP, de manière à obtenir un affichage
ressemblant à la capture d'écran reproduite ci-après. Votre code doit récupérer les valeurs des variables nom, prénom,
classe et série et afficher leurs valeurs. Une instruction conditionnelle sera utilisée pour éviter les affichages erronés.
Formulaires et PHP 6/6