--- tags: 1NSI, HTML, Web --- # Formulaires HTML Un **formulaire HTML** permet de rendre une page HTML interactive. C'est un cas particulier d'**interface homme-machine** (ou IHM), c'est-à-dire un programme qui permet à un être humain et à une machine d'échanger des informations. Il permet de proposer des cases à cocher, des boutons radio, du texte à saisir... et d'envoyer les résultats à une page qui pourra les traiter. ## Balise `form` Pour délimiter un formulaire HTML, il faut l'encadrer entre les balises `<form>` et `</form>`. ## Élément `input` La plupart des éléments interactifs d'un formulaire HTML sont des éléments `<input>`. C'est une balise orpheline, c'est-à-dire qu'on ne la ferme pas avec une autre commençant par ` </ `. On précise le type d'interaction avec un attribut `type` suivi d'une valeur toujours entre guillemets. Il existe de nombreuses possibilités, nous n'en étudierons que quelques-unes. Il existe de nombreuses possibilités, nous étudierons seulement quelques-unes des plus fréquentes. ### Texte court et mot de passe On peut afficher une zone de saisie pour un texte court (sans retour à la ligne) ou un mot de passe (texte court masqué) avec un élément `input` qui prend comme attribut respectivement `"text"` ou `"password"`. ::: success **Exemple** <iframe width="400" height="100" src="https://zamo.forge.aeif.fr/outils/1NSI/IHMweb/form_text.html"> </iframe> Le petit formulaire ci-dessus s'obtient avec le code HTML : ``` html <form> <p>Votre nom ? <input type = "text"></p> <p>Votre mot de passe? <input type = "password"></p> </form> ``` ::: :::info L'élément `<input type = "password">` se contente de masquer le texte entré au clavier, il n'est pas sécurisé. ::: ### Cases à cocher, `label` et attribut `id` Une case à cocher se code avec `<input type = "checkbox">`. Cependant, une simple case à cocher n'est pas très utile. Il est préférable de lui attacher un court texte (étiquette, ou `label`). Pour cela, on doit : 1. attribuer à la case à cocher un identifiant, qui doit être unique. Cela se fait avec l'attribut `id`. 2. créer un élément `<label>` qui va contenir le texte de l'étiquette. Pour attribuer cette étiquette à la case à cocher, on utilise l'attribut `for` qui doit prendre la même valeur que l'attribut `id` de la case à cocher. ::: success **Exemple** Voici un code HTML de case à cocher et son rendu. ```html <form> <label for="aime_nsi">Aimez-vous la NSI ?</label> <input type="checkbox" id="aime_nsi"> </form> ``` <iframe width="200" height="40" src="https://zamo.forge.aeif.fr/outils/1NSI/IHMweb/form_check.html"> </iframe> ::: :::info Pour une case à cocher, utiliser `<label for ...>` permet à l'utilisateur de cocher ou décocher la case en cliquant sur le texte de `<label ...>`. ::: :::info L'attribut `id` est utiliser à chaque fois qu'on a besoin d'identifier un élément HTML précis, pas seulement pour les cases à cocher. ::: ### Boutons radio et attribut `name` Lorsqu'il faut choisir une seule possibilité entre plusieurs choix, on utilise des boutons radio. Lorsque plusieurs boutons radio sont regroupés ensemble, un seul d'entre eux peut être sélectionné. Un bouton radio se code avec `<input type = "radio" >`. On peut attribuer un texte à chaque bouton radio de la même manière que pour les cases à cocher, comme nous l'avons vu ci-dessus. Pour grouper des boutons radio, on leur donne un attribut `name`. Tous les boutons radio qui ont la même valeur pour leur attribut `name` sont groupés : un seul d'entre eux peut être coché. :::success **Exemple** Voici un ensemble de boutons radio et le code permettant de les afficher en HTML. ```html= <form> Quelle est votre couleur préférée ? <input type="radio" id="r" name="couleur" value="red" checked> <label for="r">rouge</label> <input type="radio" id="v" name="couleur" value="green"> <label for="v">vert</label> <input type="radio" id="b" name="couleur" value="blue"> <label for="b">bleu</label> </form> ``` <iframe width="500" height="50" src="https://zamo.forge.aeif.fr/outils/1NSI/IHMweb/form_radio.html"> </iframe> ::: ### Bouton d'envoi du formulaire Le bouton d'envoi du formulaire est `<input type = "submit">`. Pour que ce bouton affiche un texte, il faut lui passer ce texte dans un attribut `value`. Voici un exemple ci-dessous. Si vous cliquez sur le bouton, cela va envoyer un formulaire, mais ne pas fonctionner, car nous n'avons pas préparé l'envoi ni sa réception. Ce sera plus tard ! :::success **Exemple** Le code suivant crée un formulaire avec un bouton d'envoi. Le rendu est affiché après le code. ```html <form> <input type="submit" value="Cliquez svp"> </form> ``` <iframe width="200" height="50" src="https://zamo.forge.aeif.fr/outils/1NSI/IHMweb/form_submit.html"> </iframe> ::: ## Envoi du document Lorsque l'utilisateur clique sur le bouton `<input type = "submit">`, le formulaire est envoyé. Mais il faut préciser où, comment et quoi. ### Où ? L'URL où les données sont envoyées est à préciser dans un attribut `action` précisé dans la balise `<form>`. Il s'agit de l'URL d'un fichier qui devra être capable de traiter les données (par exemple un fichier Python). :::success **Exemple** Supposons que nous ayons un fichier `traitement.py`, situé dans le même dossier que la page HTML contenant le formulaire, prêt à traiter les données envoyées par ce formulaire. Le code commencerait alors par : ```html <form action = "traitement.py" > ``` ::: ### Comment ? Nous connaissons deux méthodes d'envoi de requêtes avec le protocole HTTP : GET et POST. La méthode d'envoi doit être indiquée également dans la balise `<form>`, avec un attribut `method`. La valeur doit être `"post"` ou `"get"`. Nous nous intéresserons à la méthode GET, le code devra donc commencer par : ::: success "Exemple" Pour compléter l'exemple précédent, nous écrirons : ```html <form action = "traitement.py" method="get" > ``` ::: ### Quoi ? Quelles seront les données envoyées au serveur ? Le code dépend du `type` de chaque élément `input` contenu dans le formulaire. Avec la méthode GET, les données seront envoyées à la fin de l'URL sous la forme de paires `nom = valeur`. Le `nom` sera la valeur de l'attribut `name` de l'élément de formulaire. La valeur dépandra du `type` : - pour un `type` égal à `text` ou `password`, la valeur sera égale au texte de la zone de saisie ; - pour une case à cocher, la valeur devra être donnée dans un attribut `value`. Si la case n'est pas cochée, aucune donnée ne sera envoyée au serveur ; - pour des boutons radio, il faut donner un attribut `value` à chaque bouton, cela donnera la valeur envoyée dans l'URL si le bouton radio est choisi. ## Exemple complet Vous trouverez sur replit un exemple complet. Il contient un formulaire dont le code est : ```htmlmixed= <form method = "get" action="traitement"> <p>Votre nom ? <input type="text" name="nom"></p> <p>Votre mot de passe? <input type="password" name="mdp"></p> <p><label for="aime_nsi">Aimez-vous la NSI ?</label> <input type="checkbox" id="aime_nsi" name="nsi" value="love"></p> <p> Quelle est votre couleur préférée ? <input type="radio" id="r" name="couleur" value="red" checked> <label for="r">rouge</label> <input type="radio" id="v" name="couleur" value="green"> <label for="v">vert</label> <input type="radio" id="b" name="couleur" value="blue"> <label for="b">bleu</label> </p> <input type="submit" value="Cliquez svp"> </form> ``` Vous pouvez : - [tester le formulaire](https://site-web-avec-formulaire.1nsi-2022-23.repl.co/) - [observer le résultat](https://site-web-avec-formulaire.1nsi-2022-23.repl.co/traitement?nom=moi&mdp=secret&fruit=noix) (vous pouvez modifier l'URL puisqu'on utilise la méthode GET) - étudier et modifier le code de ce mini-site, écrit en Python avec le module Flask, en vous connectant sur replit.