4 astuces pour améliorer le traitement de vos formulaires

Lorsque vous validez un formulaire, toutes les informations que vous avez remplies vont être incorporées dans une requête HTTP. Le format de ces données va dépendre de la structure de votre HTML. De l’autre côté d’internet, le code pour traiter la soumission d’un formulaire va fortement dépendre du contenu des requêtes HTTP. Nous allons voir quatre petites astuces HTML qui vont vous permettre d’avoir un code serveur plus propre ou plus sûr.

Astuce n°0 : Des échanges sécurisés

Ce n’est pas vraiment une astuce. C’est l’exemple le plus simple pour comprendre comment votre code HTML peut influencer le format de vos requêtes HTTP.

La balise <form> a un attribut method qui peut prendre deux valeurs : soit get, soit post. Ce paramètre indique quelle méthode du protocole HTTP sera utilisée. Si l’attribut n’est pas renseigné, votre formulaire utilisera la méthode GET.

Le principal avantage de la méthode POST est que les données du formulaire ne seront pas sauvegardées dans l’historique du navigateur. Il est donc vivement conseillé d’utiliser cette méthode pour les formulaires de connexion pour ne pas afficher le mot de passe en clair dans la barre d’adresse. Il est également conseillé de l’utiliser pour les formulaires d’ajout, de modification ou de suppression de données.

La méthode GET sera à privilégier pour les pages qui peuvent être gardées en favoris. Il est donc conseillé de l’utiliser pour les formulaires de recherches, par exemple. En effet, les paramètres soumis via la méthode GET apparaissent dans la barre d’adresse.

Astuce n°1 : Des déclencheurs explicites

Astuce : Vous pouvez donner un nom et une valeur à vos boutons.

Détails : Cette astuce vous permettra d’identifier facilement si un formulaire a été soumis ou non et ainsi déclencher le traitement de vos formulaires. Cela vous permettra aussi de pouvoir avoir facilement plusieurs actions sur un même formulaire.

Avantage : Pour les développeurs côté serveur, une même page sert souvent à délivrer et à traiter le formulaire. Il est donc important pour eux de savoir si le formulaire a été soumis à validation ou non. Tester la valeur du bouton leur permet d’avoir un test simple et lisible.

Exemple :

Code HTML :

<form method="post">
    <button type="submit" name="action" value="duplicate">Dupliquer</button>
    <button type="submit" name="action" value="delete">Supprimer</button>
</form>

Code PHP simplifié :

// Déclencheur : Le bouton "Supprimer" a été pressé
if (isset($_POST["action"]) && $_POST["action"] === "delete") {
    // Alors on traite le formulaire de suppression
    // Déclencheur : Le bouton "Dupliquer" a été pressé
} else if (isset($_POST["action"]) && $_POST["action"] === "duplicate") {
    // Alors on traite le formulaire de duplication
} else {
    // Sinon pas de traitement
}

À noter qu’avec les nouveaux attributs HTML5 formaction et formmethod, vous pouvez définir une URL d’action différente sur les boutons d’un même formulaire.

Astuce n°2 : Des valeurs explicites

Astuce : Vous pouvez mettre des valeurs sur vos cases à cocher.

Détails : Les champs de type checkbox ont par défaut une valeur à on. Cette astuce vous permet d’envoyer la valeur de votre choix.

Avantage : Avoir une valeur à tester avec un nom ou avec un identifiant, permet aux développeurs côté serveur d’avoir un code avec plus de sens. Le code pourra donc être compris, sans avoir besoin de lire le code HTML.

Exemple :

Code HTML :

<form method="post">
    <input type="checkbox" name="newsletter" value="weekly" />
    <button type="submit" name="action" value="validate">Valider</button>
</form>

Code PHP simplifié :

// Déclencheur
if (isset($_POST["action"]) && $_POST["action"] === "validate") {
    // Traitement
    if (isset($_POST["newsletter"]) && $_POST["newsletter"] === "weekly") {
        // Case cochée
    } else {
        // Case non cochée ou erreur
    }
}

Astuce n°3 : Des validations facilitées

Astuce : Vous pouvez mettre une valeur par défaut grâce aux champs cachés sur vos cases à cocher, vos boutons radios et sélections.

Détails : Il suffit pour cela de placer un champ caché avec le même nom avant le champ sur lequel vous souhaitez placer une valeur de secours.

Pour comprendre comment cela fonctionne :

1. Les champs de type hidden envoient leur valeur quoi qu’il arrive.
2. Les champs de type checkbox, radio et select ne renvoient pas de valeur, si aucune valeur n’est marquée comme checked ou selected.
3. Si une valeur est sélectionnée, elle sera envoyée également.
4. Le champ qui apparaîtra en deuxième dans le DOM sera en deuxième dans la requête HTTP et surchargera la première valeur à l’interprétation par le serveur.

Avantage : Pour savoir si une case n’a pas été cochée, il faut tester qu’il n’y ait pas de valeur envoyée. En général, les développeurs back n’aiment pas trop cela, car ils ne peuvent pas différencier un cas d’erreur (donnée corrompue) d’une case non cochée. Avec cette astuce, ils peuvent séparer la validation du formulaire et son traitement.

Exemple :

Code HTML :

<form method="post">
    <input type="hidden" name="newsletter" value="never" />
    <input type="checkbox" name="newsletter" value="weekly" />
    <button type="submit" name="action" value="validate">Valider</button>
</form>

Code PHP simplifié :

// Déclencheur
if (isset($_POST["action"]) && $_POST["action"] === "validate") {
    // Validation
    if (isset($_POST["newsletter"])) {
        // Traitement
        if ($_POST["newsletter"] === "weekly") {
            // Case cochée
        } else {
            // Case non cochée
        }
    } else {
        // Erreur
    }
}

Astuce n°4 : Des clés organisées

Astuce : Vous pouvez créer des tableaux de données sur vos champs de formulaires.

Détails : On peut créer des clés de tableau profondes à l’aide des crochets « [«  et  »] ». Attention cette technique n’est pas présente dans les RFC, notamment celle sur les URI RFC3986. Sa gestion dépendra donc du langage serveur ou du framework utilisé. Pensez donc à vérifier son implémentation avant.

Avantage : Cette astuce vous permet d’organiser les données de votre requête HTTP. Pour les long formulaires, cela vous permet également de grouper et d’éviter les chevauchements entre les clés. Les développeurs côté serveur peuvent récupérer les listes de données plus rapidement et produire un code plus lisible avec des données structurées.

Exemple :

Code HTML pour une liste :

<form method="post">
    <input type="checkbox" name="hobbies" value="" />
    <input type="checkbox" name="hobbies[]" value="sport" />
    <input type="checkbox" name="hobbies[]" value="web" />
    <input type="checkbox" name="hobbies[]" value="food" />
    <button type="submit" name="action" value="validate">Valider</button>
</form>

Code PHP simplifié :

// Déclencheur
if (isset($_POST["action"]) && $_POST["action"] === "validate") {
    // Validation
    if (isset($_POST["hobbies"])) {
        // Traitement
        if (is_array($_POST["hobbies"])) {
            // Tableau de loisirs sélectionnés
        } else {
            // Pas de loisirs sélectionnés
        }
    }
}

Code HTML pour un tableau :

<form method="post">
    <input type="text" name="user[name]" />
    <input type="text" name="user[lastname]" />
    <input type="password" name="password[original]" />
    <input type="password" name="password[confirm]" />
    <button type="submit" name="action" value="register">S’inscrire</button>
</form>

Conclusion

Toutes ces astuces ne sont pas à utiliser sur tous les projets, mais il est important de savoir qu’elles existent. Je les ai, par exemple, beaucoup utilisées sur un projet d’interface d’administration. Avec quelques modifications sur mes formulaires HTML, j’ai réussi à améliorer la robustesse du code PHP.

Une preuve de plus que les développeurs côté client et serveur ont tout intérêt à travailler ensemble et échanger tout au long des projets.