Introduction à l'HTML5

Cet article présente les différents champs de formulaire HTML5

Home flask

Contexte

Dans la plupart des applications informatiques, l'utilisateur peut consulter des informations mais également, si il en a l'autorisation, les éditer. Pour éditer ces informations, l'utilisateur doit renvoyer un formulaire au serveur. Ce formulaire est le plus souvent codé en HTML5.

Principe

Documentation formulaires HTML5: https://www.w3schools.com/tags/tag_form.asp

Un formulaire HTML est composé d'un ou plusieurs éléments. Ceux-ci peuvent être des zones de texte, des boîtes de sélection, des boutons, des cases à cocher ou des boutons radio. Sauf cas particulier, un formulaire intègre également un bouton de soumission permettant de déclencher la transmission des données vers le serveur.

Pour réaliser un formulaire en HTML, il faut utiliser une balise <form>.

<form action="#" method="get">
Nom: <input type="text" name="nom">
<input type="submit" value="Submit">
</form>

La balise <form> contient plusieurs attributs: L'attribut action (optionnel) indique où les données sont envoyées. Si l'attribut action n'est pas spécifiée, le formulaire est renvoyé à la même adresse. L'attribut method indique comment les données sont envoyées. Il existe deux méthodes possibles: getet post. En utilisant la méthode get, les données sont envoyées via l'url. En utilisant la méthode post, les données sont envoyées dans le corps de la requête (méthode recommandée).

Plusieurs champs peuvent être encapsulés dans une balise <form>. Le plus souvent, ces champs sont définis via la balise

<input type= ... value= ... >

Le tableau présenté ci-dessous présente la liste des types disponibles en HTML5.

Type Rendu
button
checkbox
color
date
datetime-local
email
file
image
month
number
password
radio
range
search
submit
tel
text
time
url
week

Implémentation (Part III)

Templates HTML

Dans notre application, nous allons utiliser plusieurs templates pour la création, la modification et la suppression des contacts.

server.py
/templates
base.html
index.html
form.html
create.html
update.html
delete.html

index.html

Le template index.html permet de lister l'ensemble des contacts dans un tableau html. Par rapport à notre version précédente, nous avons ajouté une colonne action. Cette colonne comporte deux liens hypertextes (balise <a href= ... > ... </a>). Ces liens pointent vers des urls permettant la modification ou la suppression d'un contact particulier. Pour identifier de manière unique un contact, ces urls utilisent la variable loop.index.

{% extends "base.html" %}

{% block titre %}Liste des contacts{% endblock %}

{% block contenu %}
<table>
    <tr>
        <th>Nom</th>
        <th>Prenom</th>
        <th>Telephone</th>
        <th>Email</th>
        <th>Actions</th>
    </tr>
    {% for contact in contact_list %}
    <tr>
        <td>{{contact.nom}}</td>
        <td>{{contact.prenom}}</td>
        <td>{{contact.tel}}</td>
        <td>{{contact.mail}}</td>
        <td>
            <a href="./update/{{loop.index}}">Modification</a>
            <a href="./delete/{{loop.index}}">Suppression</a>
        </td>
    </tr>
    {% endfor %}
</table>

<a href="./create">Ajouter un contact</a>

{% endblock %}

form.html

Le template form.html contient un formulaire permettant d'éditer les informations d'un contact. Ce formulaire utilise la méthode post pour transmettre les informations au serveur. Les différents éléments du formulaire sont initialisés via la variable contact.

{% extends "base.html" %}

{% block contenu %}
<form method="post">
    <label>Nom</label>
    <input type="text" name="nom" value={{contact.nom}}>
    <br>
    <label>Prénom</label>
    <input type="text" name="prenom" value={{contact.prenom}}>
    <br>
    <label>Email</label>
    <input type="email" name="mail" value={{contact.mail}}>
    <br>
    <label>Telephone</label>
    <input type="tel" name="tel" value={{contact.tel}}>
    <br>
    <button type="submit" value="Submit">Submit</button>
</form>
{% endblock %}

create.html et update.html

Les fichiers create.html et update.html héritent du template form.html. Ces deux fichiers surchargent simplement le bloc title.

    {% extends "form.html" %}
    {% block titre %}Ajout d'un contact{% endblock %}
{% extends "form.html" %}
{% block titre %}Modification d'un contact{% endblock %}

delete.html

Le fichier delete.html contient un formulaire permettant à l'utilisateur de confirmer la suppression d'un contact.

{% extends "base.html" %}

{% block titre %}Suppression d'un contact{% endblock %}

{% block contenu %}

Souhaitez vous réellement supprimer le contact: {{contact.nom}} {{contact.prenom}} ?
<form method="post">
    <button type="submit" value="Submit">Submit</button>
</form>
{% endblock %}

Application Flask

Pour gérer la consultation et l'édition des informations, notre fichier server.py intègre trois nouveaux décorateurs de fonctions. Les fonctions create, update, delete gèrent:

  • le traitement des requêtes get (envoi des formulaires au client),
  • le traitement des requêtes post (modification des informations côté serveur).

Lors d'une requête de type post, le contenu du formulaire HTML5 est extrait au moyen de la fonction request.form.to_dict(). Cette fonction retourne un dictionnaire Python. Les clés de ce dictionnaire correspondent aux attributs name de nos balises input.

Concernant les fonctions update et delete, ces deux fonctions prennent en entrée un paramètre entier id. Ce paramètre permet d'identifier de manière unique un contact.

from flask import Flask
from flask import render_template, request, redirect, url_for
app = Flask(__name__)

contact_list=[{"nom":"Einstein","prenom":"Albert","tel":"06.00.00.00.00","mail":"albert@emc2.com"},
              {"nom":"Shannon","prenom":"Claude","tel":"06.00.00.00.00","mail":"claude@fesup2fmax.com"},
              {"nom":"Fourier","prenom":"Joseph","tel":"09.00.03.00.01","mail":"joseph@maserie.fr"}]

@app.route('/')
def index():
    return render_template("index.html",contact_list=contact_list)

@app.route('/create', methods=['GET', 'POST'])
def create():

    if request.method == "GET":
        return render_template("create.html",contact=None)

    if request.method == "POST":
        contact_list.append(request.form.to_dict())
        return redirect(url_for("index"))

@app.route('/update/<int:id>', methods=['GET', 'POST'])
def udpate(id):

    if request.method == "GET":
        return render_template("update.html",contact=contact_list[id-1])

    if request.method == "POST":
        contact_list[id-1]=request.form.to_dict()
        return redirect(url_for("index"))

@app.route('/delete/<int:id>', methods=['GET', 'POST'])
def delete(id):

    if request.method == "GET":
        return render_template("delete.html",contact=contact_list[id-1])

    if request.method == "POST":
        del contact_list[id-1]
        return redirect(url_for("index"))

La vidéo présentée ci-dessous illustre le fonctionnement de notre application.

Le code complet de notre application est disponible sur Github.