Formulaires HTML et validation

Objectifs (1)

• Créer des formulaires HTML pour collecter des données des utilisateur.trices.
• Envoyer des données de formulaires au serveur à l'aide de PHP.
• Récupérer les données envoyées par le formulaire à l'aide de PHP.
• Expliquer la différence entre les méthodes GET et POST.

Objectifs (2)

• Valider les données saisies par l'utilisateur.trice côté serveur et côté client.
• Afficher des messages d'erreur clairs en cas de validation échouée.
• Pré-remplir les champs de formulaire avec les valeurs précédemment saisies.

Formulaires HTML

• Permettent de collecter des données des utilisateur.trices.
• Sont composés de champs de saisie (input fields) et de boutons.
• Sont généralement utilisés pour des actions telles que l'inscription, la connexion, la recherche, etc.
• Rendent l'expérience utilisateur plus interactive et dynamique.

Structure d'un formulaire (1)

• Définit à l'aide de la balise <form>.
• Contient des éléments de formulaire tels que des champs de saisie, des boutons, etc.
• Peut inclure des attributs pour spécifier l'URL d'action, la méthode d'envoi, etc.

Structure d'un formulaire (2)

<form action="register.php" method="POST">
    <label for="username">Pseudo</label>
    <input type="text" id="username" name="username" />

    <label for="password">Mot de passe</label>
    <input type="password" id="password" name="password" />

    <button type="submit">Envoyer</button>
</form>

Champs <input> (1)

• Champs de saisie de texte, mot de passe, e-mail, etc.
• Définis à l'aide de la balise <input>.
• Plusieurs types disponibles (entre autres) :
  • text : champ texte.
  • password : champ mot de passe.
  • email : champ e-mail.
  • number : champ numérique.

Champs <input> (2)

<!-- Champ de texte -->
<input type="text" name="name" />

<!-- Champ de email -->
<input type="email" name="email" />

<!-- Champ de mot de passe -->
<input type="password" name="password" />

<!-- Champ de case à cocher -->
<input type="checkbox" name="subscribe" value="yes" />

Champ <select> (1)

• Liste déroulante permettant de sélectionner une option parmi plusieurs.
• Défini à l'aide de la balise <select>.
• Les options sont définies à l'aide de la balise <option>.

Champ <select> (2)

<select name="country">
    <option value="france">France</option>
    <option value="switzerland">Suisse</option>
    <option value="belgium">Belgique</option>
</select>

Champ <textarea> (1)

• Champ de saisie de texte multiligne.
• Utilisé pour des commentaires, des messages, etc.
• Défini à l'aide de la balise <textarea>.
• Peut inclure des attributs pour spécifier la taille, le nombre de lignes, etc.

Champ <textarea> (2)

<textarea
    name="message"
    rows="4"
    cols="50">Écrivez votre message ici...</textarea>

Champs <button> (1)

• Boutons pour soumettre ou réinitialiser le formulaire.
• Défini à l'aide de la balise <button>.
• Peut inclure des attributs pour spécifier le type de bouton (submit, reset, etc.).
• Peut contenir du texte ou des images.

Champ <button> (2)

<!-- Ce bouton soumet le formulaire -->
<button type="submit">Envoyer</button>

Attributs

• Les attributs HTML permettent de personnaliser le comportement des éléments de formulaire.
• Des attributs courants sont :
  • name : nom du champ.
  • id : identifiant unique.
  • value : valeur par défaut.
  • placeholder : aide à la saisie.
  • required : champ obligatoire.

Envoyer les données des formulaires

• L'envoi des données au serveur se fait grâce au bouton de soumission.
• Composé de deux parties :
  • URL d'action : où les données sont envoyées.
  • Méthode : comment les données sont envoyées.

URL d'action

• Définit la destination des données du formulaire grâce à l'attribut action.
• Peut être une page PHP, un script, une API, etc.
• Exemple : action="register.php".

Méthodes GET et POST (1)

La méthode (method) du formulaire définit comment les données sont envoyées au serveur. Il existe deux méthodes principales :

Méthodes GET et POST (2)

<!-- La méthode peut être `GET` ou `POST` -->
<form action="login.php" method="">
    <label for="username">Pseudo : </label>
    <input type="text" id="username" name="username" value="xXBestOf1400Xx" />

    <label for="password">Mot de passe</label>
    <input
        type="password"
        id="password"
        name="password"
        value="m0n-sup3r-m0t-de-p4asse"
    />

    <button type="submit">Envoyer</button>
</form>

Méthodes GET et POST (3)

GET

Les données sont ajoutées à l'URL de la requête, séparées par un ? et des & :

http://localhost/login.php?username=xXBestOf1400Xx&password=m0n-sup3r-m0t-de-p4asse

Problème de sécurité...

Méthodes GET et POST (4)

POST

Les données sont envoyées dans le corps de la requête :

http://localhost/login.php

Les données ne sont plus visibles dans l'URL.

Problèmes de sécurité et de taille résolus !

Réceptionner les données des formulaires (1)

• Lorsque le formulaire est soumis, le serveur reçoit les données.
• Ces données peuvent être traitées de différentes manières selon la technologie utilisée.

Réceptionner les données des formulaires (2)

• En PHP, les données sont accessibles via les superglobales $_GET et $_POST, des tableaux associatifs prédéfinis en PHP.
• Elles contiennent les données envoyées par le formulaire :
  • $_GET : contient les données envoyées par la méthode GET.
  • $_POST : contient les données envoyées par la méthode POST.
• Les données sont accessibles par le nom du champ défini dans le formulaire grâce à l'attribut name des champs.

Valider les formulaires côté serveur (1)

• Valider les données saisies permet de s'assurer qu'elles sont correctes et conformes aux attentes.
• Permet de garantir l'intégrité des données et la sécurité.

Valider les formulaires côté serveur (2)

La validation des formulaires peut inclure des vérifications telles que :

• Vérifier que les champs obligatoires sont remplis.
• Vérifier que les données saisies respectent un format spécifique (adresse e-mail valide ou longueur minimale, etc.).

Conserver les données saisies (1)

• Lors de la soumission du formulaire, les données sont perdues.
• Il est possible de sauver les valeurs précédemment saisies pour les réutiliser en cas d'erreurs.
• Cela permet de ne pas perdre les informations utiles à l'utilisateur.trice.

Valider les données côté client (1)

• L'expérience utilisateur peut être améliorée en faisant une validation côté client également.
• Le navigateur va directement nous indiquer si un champ n'est pas conforme.
• Elle ne remplace pas la validation côté serveur.

Conclusion

• Les formulaires permettent la saisie des données de l'utilisateur.trice.
• Ils envoient les données au serveur qui est en charge de les traiter.
• La validation peut se faire du côté serveur ou du côté client ().
• Les messages d'erreur et la conservation des saisies améliorent l'expérience utilisateur.trice.

À vous de jouer !

• (Re)lire le support de cours.
• Explorer les exemples de code.
• Faire les exercices.
• Réaliser le mini-projet.
• Poser des questions si nécessaire.

N'allez pas trop vite, vous avez le temps ! N'hésitez pas à vous entraidez si vous avez des difficultés.

Sources (1)

• Illustration principale par Richard Jacobs sur Unsplash
• Illustration par Aline de Nadai sur Unsplash
• Illustration par Kelly Sikkema sur Unsplash
• Illustration par Anastasiia Nelen sur Unsplash
• Illustration par Shavr IK sur Unsplash
• Illustration par Kelly Sikkema sur Unsplash
• Illustration par Blake Wisz sur Unsplash
• Illustration par Taylor Vick sur Unsplash

Sources (2)

• Illustration par Nikita Kachanovsky sur Unsplash