RESSOURCES PYTHON WEBAPP LYCEE – Formulaires

Créer un formulaire

Base d'un formulaire

Pour créer un formulaire, on utilise la balise HTML <form>

Au sein de de cette balise on peut mettre plein de champs différents pour toutes les informations que l’on souhaite récupérer, mais aussi un bouton <button> qui servira à soumettre le formulaire.

On va ici voir comment utiliser les balises <form> et <button> qui sont indispensables

La balise <form>

La balise <form> est la balise qui contient tout le formulaire. Tous les champs et les boutons doivent être à l’intérieur de cette balise.

<form
action=« mafonction »
method=« POST »>

<!– Tout ce que l’on veux mettre dans le

formulaire –>

</form>

L’attribut method indique comment les informations seront envoyés à travers le web. On utilisera la méthode POST avec la syntaxe suivante :

      method="POST"

L’attribut action indique ce qu’il faut faire quand le formulaire est soumis, c’est à dire où envoyer les informations. Avec Flask, on va indiqué la fonction à appeler pour générer la page avec la syntaxe suivante :

      action="ma_fonction"

Dans la fonction appelée, dans notre code python, on peut accéder à notre formulaire avec la variable request.form

La balise <button>

La balise <button> permet d’envoyer le formulaire, c’est à dire déclencher l’action spécifiée précédemment.

Pour cela on précise que notre bouton est de type submit avec la syntaxe suivante :

type="submit"

Dans notre balise, on indique le texte que l’on veut afficher sur le bouton. Ici c’est Valider.

Les différents champs

Dans nos formulaires on peut vouloir mettre des champs ou l’utilisateur peut saisir des valeurs. Pour cela on a deux balises HTML qui seront très utiles :

- La balise label qui permet d’afficher un nom pour le champ à remplir
- La balise input qui permet de définir un champ où l’utilisateur peut saisir des informations. Il existe différents types d’input que nous allons détailler ci-dessous.

Tous les champs de formulaires présentés ci-dessous sont disponibles sur ce projet exemple avec l’utilisation de classes CSS Bulma pour avoir un meilleur rendu.

L'attribut name et récupérer des valeurs

Dans nos balises input, il est important de spécifier un attribut name pour donner un nom à ce champ pour récupérer la valeur de ce champ dans notre code python avec la formulation suivante :

Les champs simples

Les champs simples sont des champs dans lesquels on entrera une seule valeur comme du texte, un nombre, un mot de passe, une adresse mail…

Le type text et la balise textarea

Le type text est le type par défaut et permet d’entrer du texte sur une ligne.

On peut utiliser l’attribut placeholder pour donner une indication sur ce que l’utilisateur doit entrer.

Si l’on souhaite avoir un espace sur plusieurs lignes on peut utiliser la balise textarea.

Le type password

Le type password permet de taper des mots de passe, ainsi le texte écrit n’apparaît pas directement, et on a des étoiles à la place.

Les types number, date, email, tel

Il existe plein de types qui vont permettre de vérifier automatiquement que le texte tapé à une certaine forme. Tous ces types sont proches et leur utilisation est similaire à celle vue précédemment. En voici quelques uns :

- le type number permet de vérifier s’il s’agit d’un nombre
- le type email permet de vérifier s’il s’agit bien d’une adresse mail (c’est à dire qu’il contient un @)
- le type tel permet de vérifier s’il s’agit bien d’un numéro de téléphone
- le type date permet de saisir directement une date.

Il y a plein existe d’autres types plus spécifiques que tu peux découvrir ici.

Les champs multiples

Les champs multiples nous permettent de choisir entre plusieurs options. Il en existe de plusieurs types

Les cases à cocher - type checkbox

Le type checkbox permet de cocher plein de cases différentes.

Pour ce type d’input, plusieurs checkbox peuvent avoir la même valeur dans l’attribut name. Par contre, il faut ajouter un attribut value qui donne un valeur à la case.

On récupère alors une liste contenant toutes les valeurs des cases cochées. Pour cela on utilise la formulation suivante:

request.form.getlist('nom_de_mes_checkbox")

Les boutons radio - type radio

Le type radio permet de choisir une seule option parmi plusieurs contrairement au checkbox qui permet d’en sélectionner plusieurs.

Comme pour les checkbox, l’attribut name est le même pour les différentes cases, mais elles doivent avoir un attribut value différent

Remarque : contrairement au checkbox, on a une seule valeur retournée, on utilise donc la syntaxe habituelle pour récupérer le résultat:

Le menu déroulant - balise Select

La balise select permet de choisir des options dans un menu déroulant.

Pour chacune des options on utilise une balise option avec l’attribut value pour spécifier la valeur.

Pour récupérer la valeur sélectionnée, on utilise la même méthode qu’avec les boutons radio.

EXPERIMENTER