# Formulaire d'une page Web <br><br> *Ce document a été créé en collaboration avec ChatGPT, qui a été utilisé pour transposer le cours correspondant (accessible [ici](formulaires)) en un diaporama. Pour voir la conversation [cliquez ici](https://chat.openai.com/share/31dfa665-8daf-449b-9b6c-e3a246440a33).* --- ## Introduction - Un **formulaire** sur une page Web permet à l'utilisateur de transmettre des données au serveur. - Les données peuvent être utilisées pour construire une page Web, enregistrer des informations dans une base de données, etc. - Utilisation de la balise `form` en HTML pour créer un formulaire. ```html <form action="" method=""> <!-- Éléments du formulaire --> </form> ``` --- # Éléments de formulaire - Différents types d'éléments : texte, mot de passe, email, radio, liste d'options, zone de texte, etc. - Association de libellés (`label`) avec des éléments pour une meilleure accessibilité. - Le formulaire se termine par un bouton pour envoyer les données au serveur ---- ### Exemple ```html <form action="" method=""> <p> <label for="nom">Nom : </label> <input type="text" name="nom" id="nom"> </p> <p> <label for="mdp">Mot de passe : </label> <input type="password" name="mdp" id="mdp"> </p> <!-- Choix dans une liste d'options avec la balise <select> --> <label for="moyen-transport">Moyen de transport : </label> <select name="transport" id="moyen-transport"> <option value="bus">Bus</option> <option value="voiture">Voiture</option> <option value="velo">Vélo</option> <option value="autre">Autre</option> </select> <!-- Autres champs du formulaire... --> <p> <input type="submit" value="Envoyer le formulaire"> </p> </form> ``` - Les valeurs des attributs `name` des champs du formulaire seront importants pour récupérer côté serveur les données saisies côté client --- # Transmission des données au serveur - Les données d'un formulaire sont envoyées au serveur lorsqu'on clique sur le bouton d'envoi. - Utilisation des attributs `action` et `method` dans la balise `form`. - `action` : URL où les données du formulaire doivent être envoyées. - `method` : Définit la méthode HTTP (GET ou POST, etc.) pour envoyer les données. ```html [1,4] <form action="/ma-page-de-traitement" method="xxx"> <!-- Éléments du formulaire --> <p> <input type="submit" value="Envoyer le formulaire"> </p> </form> ``` ---- ### Deux méthodes principales - Méthode `GET` : données transmises via l'URL. - Méthode `POST` : données transmises dans le corps de la requête. --- # Méthode GET - Transmission des données via l'URL. - Adaptée aux données non confidentielles. - Limite de taille d'URL à prendre en compte. - Requête GET envoyée au serveur de la forme : ```http GET /ma-page-de-traitement?nom=prof&mdp=1234&email=&choix-chocolat=2&transport=velo&commentaire= HTTP/1.1 ... puis toutes les en-têtes ... ``` ---- **Exemple d'utilisation :** Recherche sur un site avec des paramètres visibles dans l'URL. **Code HTML :** ```html <form action="/recherche" method="GET"> <label for="query">Recherche : </label> <input type="text" name="query" id="query"> <input type="submit" value="Rechercher"> </form> ``` ---- **Avantages :** - Facilité de partage d'URL (exemple : https://www.qwant.com/?l=fr&sr=fr&r=FR&q=informatique&t=web) **Inconvénients :** - Limitation de la taille des données. - Non adapté aux données sensibles. --- # Méthode POST - Transmission des données dans le corps de la requête. - Adaptée aux données confidentielles. - **Attention** : à combiner avec le protocole HTTPS pour transmission sécurisée (chiffrée) - Requête POST envoyée au serveur de la forme : ```http POST /ma-page-de-traitement HTTP/1.1 ... puis toutes les en-têtes ... [ ligne vide ] nom=prof&mdp=1234&email=&choix-chocolat=2&transport=velo&commentaire= ``` ---- **Exemple d'utilisation :** Soumission d'un formulaire de connexion avec des informations sensibles. **Code HTML :** ```html <form action="/connexion" method="POST"> <label for="username">Nom d'utilisateur : </label> <input type="text" name="username" id="username"> <label for="password">Mot de passe : </label> <input type="password" name="password" id="password"> <input type="submit" value="Se connecter"> </form> ``` ---- **Avantages :** - Adapté aux données sensibles. - Pas de limitation de taille d'URL. **Inconvénients :** - Pas sécurisé pour autant (à combiner avec HTTPS pour chiffrer les données) - Empêche le partage des données via l'URL (lorsque les informations ne sont pas sensibles) --- # Traitement côté serveur - Le serveur peut récupérer et exploiter les données d'un formulaire. ---- ### ✏️ Activité Pour voir comment un serveur peut récupérer et traiter les données d'un formulaire : Faites l'activité : [Traitement des données d'un formulaire avec Flask](activite-traitement-formulaire)) --- # Bilan - Un formulaire est un élément HTML créé avec la balise `<form>` - Formulaires essentiels pour les applications Web. - Méthodes GET et POST adaptées à différents besoins. - Sécurisation des données avec HTTPS pour POST. - Serveur peut récupérer les données et les traiter. --- # Références - Manuel *Numérique et Sciences Informatiques*, T. BALABONSKI, S. CONCHON, J.-C. FILLIATRE, K. NGUYEN, Ellipses. - Cours de Gilles Lassus : [https://glassus.github.io/premiere_nsi/T6_IHM_Web/6.3_Get_Post_Formulaires/cours/](https://glassus.github.io/premiere_nsi/T6_IHM_Web/6.3_Get_Post_Formulaires/cours/) - OpenClassrooms *Concevez votre site Web avec PHP et MySQL* : [https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/4237646-decouvrez-le-fonctionnement-dun-site-ecrit-en-php](https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/4237646-decouvrez-le-fonctionnement-dun-site-ecrit-en-php). --- *Germain BECKER & Sébastien POINT, Lycée Emmanuel Mounier, ANGERS*  ---