Les objectifs de ce cours sont :

• la réalisation de formulaire en HTML;
• la récupération des informations d'un formulaire via JavaScript;
• la compréhension du protocole HTTP;
• l'envoie des informations à un serveur via les méthodes post ou get et le langage PHP;
• et enfin réaliser l'ensemble en Python.

Ecrire un formulaire en HTML

Un formulaire HTML est indiqué par la balise <form> et contient notamment des champs de saisie appelés input de différents types ou select.

Les attributs value seront des variables utilisées en JavaScript ou côté serveur.

Intéraction à base d'input

<form>
    <p>Login : <input type="text" name="login"/></p>
    <p>Mot de passe : <input type="password" name="pass"/></p>
    <p>Catégorie :
    Humain <input type="radio" name="cat" value="hu"/>
    Extraterrestre <input type="radio" name="cat" value="ex"/>
    </p>
    <p>Pour le petit-déjeuner : </br>
    Lait <input type="checkbox" name="lait" value="lait"/>
    Beurre <input type="checkbox" name="beurre" value="beurre"/>
    Fromage <input type="checkbox" name="fromage" value="fromage"/>
    </p>
    <p><input type="button" value="Bouton"></p>
    <p><input type="submit" value="Envoyer"></p>
</form>
    

Il existe d'autres type : tel, search, url, email, number, range, color ou list.

Si vous voulez découvrir ces autres types, vous pouvez par exemple consulter chez vous le site suivant : lien direct.

Intéraction à base de select

Un autre élément important interaction est la liste déroulante <select>.

<form>
    <select name="menu">
        <option value="volaille">Poulets frites</option>
        <option value="veggie">Riz et lentilles</option>
        <option value="poisson">Anchoix marinés</option>
        </select>
</form>
                        

Le select autorise un seul choix par défaut mais peut être précisé multiple pour permettre de valider plusieurs choix simultanés. Dans ce cas les valeurs séléctionnées sont traitées comme un tableau.

<form>
    <select name="menu[]" multiple>
        <option value="volaille">Poulets frites</option>
        <option value="veggie">Riz et lentilles</option>
        <option value="poisson">Anchoix marinés</option>
        </select>
</form>
                        

Ce dernier formulaire avec sélecteur n'est pas élégant, mais vous permet de sélectionner plusieurs choix en cliquant tout en laissant appuyée la touche "ctrl".

De plus, il est possible de sélectionner par défaut un (ou plusieurs éléments) en ajoutant l'attribut selected à la balise <option>.

<form>
    <select name="menu[]" multiple>
        <option value="volaille">Poulets frites</option>
        <option value="veggie" selected>Riz et lentilles</option>
        <option value="poisson">Anchoix marinés</option>
        </select>
</form>
                        

Réaliser le visuel du formulaire suivant :

Pour cela :

• vous utilisez les balises input et select,
• vous préciserez le type lors de l'utilisation d'une balise input,
• vous préciserez le name dans chacun des cas (attribut name utilisé plus tard pour retrouver la valeur d'un élément d'un formulaire).
• vous proposerez deux types de carte bancaire possibles : 'Visa' et 'Bleue' (carte par défaut).
• Attention ! Sans Javascript, votre bouton 'Valider le paiement' sera sans effet.

Formulaire et JavaScript : on reste sur la même page web

Vous savez maintenant mettre en forme des formulaires.

Dans la suite nous allons apprendre à récupérer les valeurs d'un formulaire et en faire l'usage au niveau client.

<form>
<p> Choix d'une nationalité :</p>
    <select id="choix" name="lang" onchange="selection()">
        <option value="ras">Choisir sa nationalité</option>
        <option value="fr">Français</option>
        <option value="zh">Chinois</option>
        <option value="it">Italien</option>
    </select>
<p> Vous avez choisi comme nationalité :<span id="nat">  </span> </p>
</form>

Pour l'exercice suivant vous avez besoin de comprendre trois nouvelles instructions :

• getElementById('id') est une méthode qui récupère l'objet de la page identifié par 'id'.

  document.getElementById('id') récupère l'objet de la page en cours identifié par 'id'.

• selectedIndex est une méthode qui renvoie la valeur l'option choisie par une liste déroulante ; plus généralement, cette méthode indique le rang à partir de 0 de l'élément de la liste qui a été sélectionnée par l'utilisateur.

  selecteur.selectedIndex renvoie l'indice du choix fait par l'utilisateur de la liste déroulante nommée 'selecteur'.

• innerHTML est une méthode qui permet de récupérer tout le contenu HTML d'un élément d'une page html.

  document.getElementById('ici').innerHTML intégre du contenu html à l'emplacement de la page identifié par l'id nommé 'ici'.

function selection() {
        const selecteur = document.getElementById('choix');
        const monChoix = selecteur[selecteur.selectedIndex];
        console.log(monChoix.value +' '+ monChoix.text);
        document.getElementById('nat').innerHTML = monChoix.text;
    }
       

<form>
    <fieldset>
        <legend>Veuillez sélectionner vos spécialités l'année prochaine :
        </legend>
        <div>
            <input type="checkbox" id="nsi" name="interest" value="nsi">
            <label for="nsi">NSI</label>
        </div>
        <div>
            <input type="checkbox" id="ma" name="interest" value="ma">
            <label for="ma">Maths</label>
        </div>
        <div>
            <input type="checkbox" id="svt" name="interest" value="svt">
            <label for="svt">SVT</label>
        </div>
    </fieldset>
</form>
    

Pour passer à interaction client/server nous devons comprendre et se familiariser avec le protocole HTTP.

Interactions client-serveur - HTTP

Le protocole HTTP

Quand vous allez sur votre site préféré, vous utilisez le protocole HTTP sans vous en rendre compte.

Lancez le logiciel Wire Shark.

Ce logiciel vous permet d'observer tous les échanges qui transite sur votre réseau.

L'objectif est de comprendre ce que cela raconte dans les grandes lignes.

• User-Agent : ici on vous donne le client et la version utilisé pour ce protocole.
• GET : est la méthode utilisé, nous le verrons dans la suite.
• Content-type : le type de fichier renvoyé par le server

La version sécurisée du protocole HTTP

Le souci du protocole http est qu'il est transparent, on peut observer et récupérer les informations qui circulent avec ce protocole. Ce qui pose des problèmes de sécurité évidents ( échange bancaire, vie privée...)

La réponse à ce problème est le protocole https, le S est pour Secure.

Interaction client/server : méthode post et get.

Pour cette partie, nous avons besoin d'un logiciel qui va simuler un server. Installer le logiciel Uwamp

Nous allons ici simuler un serveur pour comprendre interaction client/serveur.

l'ensemble des fichiers de travail devront se trouver dans le répertoire my_app

la méthode GET

Pour utiliser la méthode GET dans un formulaire il suffit d'ajouter dans les arguments de la balise forme method="GET"

<form action="/ma-page-de-traitement" method="GET">
    <div>
        <label for="name">Nom :
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">e-mail :
        <input type="email" id="mail" name="user_mail">
    </div>
    <div class="button">
        <button type="submit">Envoyer le message
    </div>
</form>
           

Comme vous l'avez constaté ce formulaire n'aboutit pas car "ma-page-de-traitement" n'existe pas. C'est l'objectif de la suite de ce cours. Nous allons voir comment récupérer ces informations grâce au langage PHP.

Les informations envoyées par la méthode GET sont automatiquement stockées dans une variable $_GET. La structure de cette variable est un tableau associatif ( un peu comme un dictionnaire) où les clés sont les name définis dans les input.

voici un premier code écrit en PHP :

<?php #indique le début d'un script php.

$html=<<<HTML #une variable en PHP sera toujours préfixé avec un $. le <<<HTML indique que la suite contient du HTML jusqu'au HTML;
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>formulaire réponse
</head>
<body>
    <p>Ton nom est : $_GET[user_name]
     #ici on accède à la valeur enregistrée avec la clé  user_name
    <p>Ton email est : $_GET[user_mail]

</body>
</html>
HTML;           #fin de la ligne de code PHP contenant du HTML
echo $html;     #echo sert à afficher la variable qui suit. On affiche ici la variable html.
            

Bien évidement PHP permet de faire tout ce qu'on attend d'un langage de programmation : test,boucle etc...

la méthode POST

Pour utiliser la méthode POST dans un formulaire il suffit d'ajouter dans les arguments de la balise forme method="POST"

<form action="/ma-page-de-traitement" method="POST">
    <div>
        <label for="name">Nom :
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">e-mail :
        <input type="email" id="mail" name="user_mail">
    </div>
    <div class="button">
        <button type="submit">Envoyer le message
    </div>
</form>
           

La méthode GET est à choisir si on veux pouvoir partager une adresse (moteur de recherche par exemple). On peux choisir la méthode post quand on ne veut pas que url soit modifiée.

Faire de l'interaction client-serveur avec Python

Création d'un serveur

Un exemple de formulaire