CHAPITRE 10 : LES FORMULAIRES : PARTIE 1 - INTRODUCTION

Video du chapitre : chaine GeniusClassrooms

Faire entrer l'utilisateur dans la page

Jusqu'ici, nos pages affichaient. Le formulaire change la donne : il permet au visiteur de saisir des informations et de les envoyer. Inscription, connexion, recherche, commentaire : tout passe par un formulaire.

1. La balise <form>

<form action="traitement.php" method="post">
    <!-- les champs viennent ici -->
</form>

GET ou POST ?

Règle pratique : jamais de mot de passe en get, il s'afficherait dans la barre d'adresse et resterait dans l'historique.

2. Le champ de base : <input>

<input> est une balise orpheline. C'est son attribut type qui détermine sa nature.

<input type="text" name="nom" id="nom">
<input type="email" name="email" id="email">
<input type="password" name="motdepasse" id="motdepasse">
<input type="number" name="age" id="age">
<input type="date" name="naissance" id="naissance">

L'attribut name est indispensable : c'est sous ce nom que la donnée arrive côté serveur. Un champ sans name n'est tout simplement pas envoyé.

3. L'étiquette : <label>

<label for="nom">Votre nom :</label>
<input type="text" name="nom" id="nom">

Le for du label doit reprendre exactement l'id du champ. Deux bénéfices concrets : cliquer sur le texte place le curseur dans le champ (précieux sur mobile), et un lecteur d'écran annonce l'intitulé. Chaque champ mérite son label.

4. Un formulaire complet

<form action="inscription.php" method="post">
    <p>
        <label for="nom">Nom complet :</label>
        <input type="text" name="nom" id="nom" required>
    </p>
    <p>
        <label for="email">Adresse e-mail :</label>
        <input type="email" name="email" id="email" required>
    </p>
    <p>
        <label for="age">Age :</label>
        <input type="number" name="age" id="age" min="10" max="99">
    </p>
    <p>
        <input type="submit" value="Je m'inscris">
    </p>
</form>

5. Les attributs d'aide à la saisie

• required : champ obligatoire, le navigateur bloque l'envoi s'il est vide
• placeholder : exemple affiché en gris ; ne remplace jamais le label
• min, max : bornes d'un nombre ou d'une date
• maxlength : nombre maximal de caractères
• value : valeur pré-remplie

Attention : ces contrôles sont une commodité, pas une sécurité. Ils s'exécutent dans le navigateur et se contournent aisément. Les données doivent toujours être revérifiées côté serveur.

À retenir

• <form> a besoin de action et method
• post pour tout ce qui est sensible, get pour une recherche
• Sans name, un champ n'est pas transmis
• Un <label for> par champ, relié par l'id
• La validation du navigateur ne dispense pas de celle du serveur