Les formulaires
Les formulaires revêtent de nombreuses formes et se doivent d'être parfaitement maîtrisés car une seule erreur et c'est tout le formulaire qui tombe !
On utilise des formulaires pour tout :
- recherche sur un moteur de recherche
- paiement par CB ou autre service
- filtrer des produits par prix, couleur ...
- poster un message sur un forum
- donner son avis
- ...
La structure du formulaire
Pour recueillir des informations via un formulaire, il faut que tout soit placé dans une balise FORM. Celle-ci possède deux attributs obligatoires et un optionnel.
<form action="traitement.php" method="post" enctype="multipart/form-data">
<!-- ici les demandes : nom, prénom ... -->
</form>
action
Pour traiter les informations saisies, celles-ci seront transmises à une page écrite en PHP. Cette page ne s'appelle évidemment pas forcément "traitement".
method
Il existe deux méthode d'envoi des informations saisies à la page PHP.
La première, POST, masque les informations. Elle ne les protège pas mais les masques simplement. Elle permet d'envoyer autant d'information que voulu.
La seconde, GET, est très fréquente. Elle passe les informations dans l'url. Vous la voyez, dans la barre d'adresse, à chaque fois que vous effectuez une recherche sur un moteur de recherches. Son intérêt est sa rapidité et sa simplicité de mise en oeuvre. Elle est toutefois réservée à des informations non sensibles et limitées. Elle ne permet pas l'envoi de fichiers.
enctype
Cet attribut n'est à placer QUE si vous souhaitez que l'internaute puisse vous envoyer un fichier (pdf, photo, vidéo ...). Son rôle est de prendre les données (data) du formulaire (form-data donc) et de les scinder (/) en plusieurs morceaux (multipart) pour que le fichier soit plus facile à envoyer.
Si vous souhaitez recevoir un fichier et que vous l'oubliez, le fichier ne quitte pas l'ordinateur de votre client !
La structure des champs
type=""
Cet attribut permet de définir le type d'information que l'on veut recueillir.
<input type="text"> <!-- du texte alphanumérique : chiffres, lettres, symboles -->
<input type="email"> <!-- on contrôle la forme : xxxxx@wwwww.zzz -->
<input type="url"> <!-- idem : https://xxxxx.yyy -->
<input type="file"> <!-- on récupère un fichier -->
<input type="number"> <!-- pour une quantité de produit par exemple -->
<input type="password"> <!-- pour protéger la saisie d'un mot de passe -->
name=""
<input type="text" name="nom">
<input type="text" name="prenom">
Ce sont des algorithmes (écrit en PHP) qui traitent les informations. Il faut donc que chaque champ soit nommé pour traiter l'information, le faire correspondre à un champ d'une base de données par exemple.
Pas d'accent, d'espace ou de caractère spécial dans le name !
Il doit être unique dans votre formulaire !
id=""
L'ID permet de cibler un élément spécifique pour le designer (avec du CSS) mais également pour le contrôler avant la validation du formulaire (avec du JavaScript). Il n'est pas obligatoire mais conseillé.
Pas d'accent, d'espace ou de caractère spécial dans l'id !
maxlength=""
Cet attribut permet de limiter le nombre de caractères que l'on peut saisir dans un champ. Il n'est pas obligatoire mais c'est une petite embûche pour les hackers. Pas grand chose mais ... il faut quand même en tenir compte !
Ne voyez pas trop court pour les noms, prénoms, adresses ... à 150 à 200 c'est tout à fait acceptable !
Les principaux champs
text
<input type="text" name="lastname" id="lastname" maxlength="150">
Du texte sous toutes ses formes : chiffres, lettres (minuscules et majuscules), symboles.
password
<input type="password" name="password" id="password" maxlength="150" minlength="8">
Remplace la saisie par des ronds noirs. N'oubliez pas la longueur maximum. Mais pouvez aussi ajouter un minimum !
url
<input type="url" name="url" id="url" maxlength="150">
On va contrôler la forme de la saisie car une url a toujours le même "pattern" https://xxxxxxxxxxxx.bbbb
<input type="email" name="email" id="email" maxlength="150">
On va contrôler la forme de la saisie car une adresse email a toujours le même "pattern" xxxxxx@hhhhhh.ppp
number
<input type="number" name="quantity" id="quantity" min="0" max="1000" step="10">
On va dénombrer quelque chose (pas un code postal ou un âge) comme la quantité de produti choisi.
On peut donc ajouter une quantité minimum, maximum et également un rythme de progression. Dans notre exemple, de 10 en 10.
range
0 <input type="range" name="satisfaction" id="satisfaction" min="0" max="100" step="10"> 100
On va proposer une barre de progression à notre internaute. Mais il nous faudra du javascript pour afficher la valeur en temps réel ...
checkbox
<input type="checkbox" name="film" id="film1" value="1"> Nom du film
<br>
<input type="checkbox" name="film" id="film2" value="2"> Nom du film
<br>
<input type="checkbox" name="film" id="film3" value="3"> Nom du film
<br>
<input type="checkbox" name="film" id="film4" value="4"> Nom du film
<br>
<input type="checkbox" name="film" id="film5" value="5"> Nom du film
Le cas d'une question à choix multiple mais acceptant plusieurs réponses. Tous les champs ont le même name mais chaque valeur possible a un champ value. Le client peut ainsi réponse à la question "film" en choissant les réponses "film1", "film19" et "film47".
radio
<input type="radio" name="sex" id="sex1" value="1"> Monsieur
<br>
<input type="radio" name="sex" id="sex2" value="2"> Madame
<br>
<input type="radio" name="sex" id="sex3" value="3"> Autre
<br>
<input type="radio" name="sex" id="sex4" value="4"> Docteur
<br>
<input type="radio" name="sex" id="sex5" value="5"> Professeur
Le fonctionnement est le même que pour les checkbox mais dans le cas d'un bouton radio, une seule réponse est acceptée.
submit
<input type="submit" value="Valider ma commande">
C'est le bouton valider, qui va envoyer les informations saisies à la page PHP. Le name et l'id sont optionnelles même s'il est intéressant de les garder. L'attribut value va vous permettre de changer l'intitulé du bouton pour le rendre plus parlant.
image
<input type="image" src="images/loupe.png">
C'est aussi un bouton valider mais ... qui prend la forme d'une image comme la loupe d'un moteur de recherches ...
Les cas particuliers
textarea
<textarea name="avis" maxlength="1000" cols="75" rows="10"></textarea>
Quand vous voulez permettre à votre internaute de saisir un texte long, comme un avis client par exemple. Attention que la balise se ferme.
Dans cet exemple on a dimensionné le champ avec cols (nb de caractères en largeur) et rows (nb de lignes) mais on le fait plus en css avec width et height.
select
<select name="pays">
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Espagne</option>
<option value="4">Italie</option>
</select>La balise select permet de créer des listes déroulantes. Le select a un name unique car il représente la question implicitement posée. Chaque option est identifiée de manière unique par une value.
<select name="pays">
<option disabled selected>Quel est votre pays de résidence ?</option>
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Espagne</option>
<option value="4">Italie</option>
</select>On peut créer une variante en intégrant une question en guise de première option mais en la rendant "non sélectionnable" (disabled). Le "selected" pré-selectionne ce choix au chargement de la page.
<select name="pays">
<option disabled selected>Quel est votre pays de résidence ?</option>
<optgroup label="Europe">
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Espagne</option>
<option value="4">Italie</option>
</optgroup>
<optgroup label="Afrique">
<option value="5">Maroc</option>
<option value="6">Egypte</option>
<option value="7">Côte d'Ivoire</option>
<option value="8">Sénégal</option>
</optgroup>
</select>Et on peut également créer des catégories, des groupes pour rendre la recherche plus simple.