Les éléments du formulaire

Dans un formulaire, vous le savez peut-être déjà, on peut insérer beaucoup d'éléments différents : zones de texte, boutons, cases à cocher, etc.
Je vais ici tous les énumérer et vous montrer comment vous servir de chacun d'eux dans la page cible.php qui fera le traitement. Vous allez voir, c'est vraiment très simple : au lieu de recevoir un array $_GET, vous allez recevoir un array $_POST contenant les données du formulaire !


Les petites zones de texte



Une zone de texte ressemble à la figure suivante. 

Zone de texte



En HTML, on l'insère tout simplement avec la balise :

Code : PHP 

1

<input type="text" />


Pour les mots de passe, vous pouvez utiliser type="password", ce qui aura pour effet de cacher le texte entré par le visiteur. À part ce détail, le fonctionnement reste le même.



Il y a deux attributs à connaître que l'on peut ajouter à cette balise.

  • name (obligatoire) : c'est le nom de la zone de texte. Choisissez-le bien, car c'est lui qui va produire une variable. Par exemple :
    <input type="text" name="pseudo" />.
  • value (facultatif) : c'est ce que contient la zone de texte au départ. Par défaut, la zone de texte est vide mais il peut être pratique de pré-remplir le champ. Exemple :
    <input type="text" name="pseudo" value="M@teo21" />.

Oui, je sais que vous commencez à vous inquiéter car vous n'avez pas encore vu de PHP pour le moment mais n'ayez pas peur. Le fonctionnement est tout simple et a un air de déjà vu. Le texte que le visiteur aura entré sera disponible dans cible.php sous la forme d'une variable appelée $_POST['pseudo'].

Pour l'exemple, je vous propose de créer un formulaire qui demande le prénom du visiteur puis qui l'affiche fièrement sur la page cible.php. On va donc distinguer deux codes source : celui de la page du formulaire et celui de la page cible.

Voici le code de la page formulaire.php :

Code : PHP

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

<p>

    Cette page ne contient que du HTML.<br />

    Veuillez taper votre prénom :

</p>

    

<form action="cible.php" method="post">

<p>

    <input type="text" name="prenom" />

    <input type="submit" value="Valider" />

</p>

</form>


Rappel de HTML : le champ <input type="submit" /> permet de créer le bouton de validation du formulaire qui commande l'envoi des données, et donc la redirection du visiteur vers la page cible.



Maintenant, je vous propose de créer la page cible.php. Cette page va recevoir le prénom dans une variable nommée $_POST['prenom'].

Code : PHP 

1

2

3

4

5

<p>Bonjour !</p>

<p>Je sais comment tu t'appelles, hé hé. Tu t'appelles <?php echo $_POST['prenom']; ?> !</p>

<p>Si tu veux changer de prénom, <a href="formulaire.php">clique ici</a> pour revenir à la page formulaire.php.</p>



Je vous invite à tester tout ça sur votre PC.

Dans cible.php on a affiché une variable $_POST['prenom'] qui contient ce que l'utilisateur a entré dans le formulaire.


Les grandes zones de texte



La grande zone de texte (on l'appelle aussi « zone de saisie multiligne ») ressemble à la figure suivante.

Une grande zone de texte



On peut y écrire autant de lignes que l'on veut. C'est plus adapté si le visiteur doit écrire un long message, par exemple.

On va utiliser le code HTML suivant pour insérer cette zone de texte :

Code : PHP 

1

2

3

<textarea name="message" rows="8" cols="45">

Votre message ici.

</textarea>



Là encore, on a un attribut name qui va définir le nom de la variable qui sera créée dans cible.php. Dans notre cas, ce sera la variable $_POST['message'].

Vous remarquerez qu'il n'y a pas d'attribut value. En fait, le texte par défaut est ici écrit entre le <textarea> et le </textarea>. Si vous ne voulez rien mettre par défaut, alors n'écrivez rien entre <textarea> et </textarea>.

Les attributs rows et cols permettent de définir la taille de la zone de texte en hauteur et en largeur respectivement.




La liste déroulante



La figure suivante est une liste déroulante.

Une liste déroulante



On utilise le code HTML suivant pour construire une liste déroulante :

Code : PHP 

1

2

3

4

5

6

<select name="choix">

    <option value="choix1">Choix 1</option>

    <option value="choix2">Choix 2</option>

    <option value="choix3">Choix 3</option>

    <option value="choix4">Choix 4</option>

</select>



Tout bêtement, on utilise la balise <select> à laquelle on donne un nom (ici : « choix »). On écrit ensuite les différentes options disponibles… puis on referme la balise avec </select>.

Ici, une variable $_POST['choix'] sera créée, et elle contiendra le choix qu'a fait l'utilisateur. S'il a choisi « Choix 3 », la variable $_POST['choix'] sera égale au value correspondant, c'est-à-dire choix3.

Vous pouvez aussi définir le choix par défaut de la liste. Normalement c'est le premier, mais si vous rajoutez l'attribut selected="selected" à une balise <option>, alors ce sera le choix par défaut. On pourrait par exemple écrire :

Code : PHP 

1

<option value="choix3" selected="selected">Choix 3</option>




Les cases à cocher



La figure suivante représente une série de cases à cocher.



On utilisera le code suivant pour afficher des cases à cocher :

Code : PHP 

1

<input type="checkbox" name="case" id="case" /> <label for="case">Ma case à cocher</label>


L'utilisation de la balise <label> n'est pas obligatoire mais je la recommande fortement. Elle permet d'associer le libellé à la case à cocher qui a le même id que son attribut for, ce qui permet de cliquer sur le libellé pour cocher la case. On y gagne donc en ergonomie.



Là encore, on donne un nom à la case à cocher via l'attribut name (ici : « case »). Ce nom va générer une variable dans la page cible, par exemple $_POST['case'].

  • Si la case a été cochée, alors $_POST['case'] aura pour valeur « on ».
  • Si elle n'a pas été cochée, alors $_POST['case'] n'existera pas. Vous pouvez faire un test avec isset($_POST['case']) pour vérifier si la case a été cochée ou non.

Si vous voulez que la case soit cochée par défaut, il faudra lui rajouter l'attribut checked="checked". Par exemple :

Code : PHP

1

<input type="checkbox" name="case" checked="checked" />




Les boutons d'option



Les boutons d'option fonctionnent par groupes de deux minimum. Vous trouverez un exemple sur la figure suivante.

Boutons d'option



Le code correspondant à cet exemple est le suivant :

Code : PHP 

1

2

3

4

Aimez-vous les frites ?

<input type="radio" name="frites" value="oui" id="oui" checked="checked" /> <label for="oui">Oui</label>

<input type="radio" name="frites" value="non" id="non" /> <label for="non">Non</label>



Comme vous pouvez le voir, les deux boutons d'option ont le même nom (« frites »). C'est très important, car ils fonctionnent par groupes : tous les boutons d'option d'un même groupe doivent avoir le même nom. Cela permet au navigateur de savoir lesquels désactiver quand on active un autre bouton du groupe. Il serait bête en effet de pouvoir sélectionner à la fois « Oui » et « Non ». 

Pour pré-cocher l'un de ces boutons, faites comme pour les cases à cocher : rajoutez un attribut checked="checked". Ici, comme vous pouvez le voir, « Oui » est sélectionné par défaut.

Dans la page cible, une variable $_POST['frites'] sera créée. Elle aura la valeur du bouton d'option choisi par le visiteur, issue de l'attribut value. Si on aime les frites, alors on aura $_POST['frites'] = 'oui'.

Il faut bien penser à renseigner l'attribut value du bouton d'option car c'est lui qui va déterminer la valeur de la variable. 


Les champs cachés



Les champs cachés constituent un type de champ à part. En quoi ça consiste ? C'est un code dans votre formulaire qui n'apparaîtra pas aux yeux du visiteur, mais qui va quand même créer une variable avec une valeur. On peut s'en servir pour transmettre des informations fixes.

Je m'explique : supposons que vous ayez besoin de « retenir » que le pseudo du visiteur est « Mateo21 ». Vous allez taper ce code :

Code : PHP 

1

<input type="hidden" name="pseudo" value="Mateo21" />



À l'écran, sur la page web on ne verra rien. Mais dans la page cible, une variable $_POST['pseudo'] sera créée, et elle aura la valeur « Mateo21 » !

C'est apparemment inutile, mais vous verrez que vous en aurez parfois besoin.

On croit par erreur que, parce que ces champs sont cachés, le visiteur ne peut pas les voir. C'est faux ! En effet, n'importe quel visiteur peut afficher le code source de la page et voir qu'il y a des champs cachés en lisant le code HTML. Mieux, il peut même modifier la valeur du champ caché s'il a les outils appropriés.
Que faut-il retenir ? Ce n'est pas parce que le champ est caché que vous devez considérer qu'il est inviolable. N'importe quel visiteur (un peu malin) peut le lire, modifier sa valeur et même le supprimer. Ne faites pas confiance aux données envoyées par le visiteur ! Vous vous souvenez de cette règle dont je vous ai parlé dans le chapitre précédent ? Elle est plus que jamais d'actualité.

Créé avec HelpNDoc Personal Edition: Ajoutez facilement le cryptage et la protection par mot de passe à vos PDF