--- 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>`. ### 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). :::warning Exemple Pour envoyer les données à https://www.inaturalist.org/observations il faut écrire : ```html <form action = "https://www.inaturalist.org/observations" > </form> ``` ::: ### 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 : :::warning Exemple Pour compléter l'exemple précédent, nous écrirons : ```html <form action = "https://www.inaturalist.org/observations" method = "get" > </form> ``` ::: Il reste à donner la possibilité à l'utilisateur de remplir le formulaire avec des entrés (*input*). ## É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. ## Envoi du document Un élément `<input type = "submit" />` permet d'envoyer le formulaire. :::warning Exemple Le code suivant permet d'envoyer un formulaire, pais qui est pour l'instant vide. ```html <form action = "https://www.inaturalist.org/observations" method = "get" > <input type = "submit" /> </form> ``` donne : <form action = "https://www.inaturalist.org/observations" method = "get" > <input type = "submit" /> </form> ::: ### 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"`. :::warning Exemple <form action = "https://www.inaturalist.org/observations" method = "get" > <p>Quelle espèce cherchez-vous ?</p> <input type = "text" name="" /> <input type = "submit" /> </form> Le petit formulaire ci-dessus s'obtient avec le code HTML : ``` html <form action = "https://www.inaturalist.org/observations" method = "get" > <input type = "submit" /> </form> ``` Le texte tapé dans la zone de saisie sera envoyé au site. Mais pour qu'il soit associé à la variable `taxon_id`, il faut donner un attribut `"name"` avec la valeur `"taxon_id"` à l'élément `<input>`. ::: **Attention**. 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. :::warning 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> ``` <form> <label for="aime_nsi">Aimez-vous la NSI ?</label> <input type="checkbox" id="aime_nsi"> </form> ::: Pour une case à cocher, utiliser `<label for ...>` permet à l'utilisateur de cocher ou décocher la case en cliquant sur le texte de `<label ...>`. L'attribut `id` est utilisé à 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é. :::warning 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> ``` <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> ::: ### 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 ! :::warning 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> ``` <form> <input type="submit" value="Cliquez svp"> </form> ::: ### 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.