Les formulaires

anatomie d'un formulaire

https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML

html

fichier : formulaire_envoi.html

• balise form
• des champs d'entrées : input, textarea
• un bouton submit pour envoyer les données
• vérification des types de données côté client (essayer de ne pas mettre un email).

envoi

Lorsque l'on clique sur le bouton la page est rechargée (voyez ça comme un lien) avec en fin d'url les éléments du formulaire sous la forme de paramètres :

formulaire_envoi.html?user_name=Brucker&user_mail=francois.brucker%40gmail.com&user_message=bonjour+à+vous

• les paramètres commencent à ?
• chaque paramètre est séparé par des &
• chaque paramètre est décrit par son son nom puis sa valeur nom=valeur.

Le format s'encodage est en ascii (par défaut) et les caractères spéciaux comme les espaces, accents, etc sont encodées.

récupérer les paramètres

fichier : formulaire_envoi_param.html

On utilise URLSearchParams pour récupérer les valeurs du formulaire. Ceci nous permet de préremplir les valeurs et de ne pas perdre le formulaire (pou rle textarea, les retours chariots sont perdus. Voir https://api.jquery.com/val/).

bonnes pratiques

• le bouton d'envoi doit être bien visible
• il faut toujours vérifier côté client que les données sont a priori correct (comme le mail) avant d'envoyer les données côté serveur. Ce n'est pas la peine de faire des vérification poussées, mais juste assez pour éviter les erreurs communes.
• utilisez un framework pour rendre un formulaire compréhensible (et beau). Par exemple : https://bulma.io/documentation/form/

autres méthodes d'envoi

méthode post

Le protocole http (ou sa version sécurisée https) fonctionne toujours le façon suivante, il envoie des requêtes à un serveur. Ces requêtes sont des url et peuvent être envoyées selon plusieurs méthodes, comme GET ou encore POST(il y en a d'autres comme PUTpar exemple mais elles sont beaucoup oins utilisées). Il est d'usage d'utiliser les méthodes GETpour demander quelque chose à un serveur (une page html par exemple) et les méthodes POST pour envoyer des données au serveur (notre formulaire par exemple).

fichier : formulaire_envoi_post.html

En utilisant une méthode post, les données ne sont plus envoyées dans l'url mais dans le corps du message. On peut les voir en utilisant les outils de développement, onglet network. En cliquant sur le fichier html après envoi on verra dans les Headers un champ Form data qui contient nos données.

données transmises de façon post

C'est toujours la méthode post qui sera privilégiée pour l'utilisation de formulaire car :

• les données ne sont pas transmises en clair dans l'url
• on utilise le protocole http de la bonne façon : post pour envoyer des données get pour en recevoir.

url d'envoi

les données sont souvent traitées par une url spécifique par le serveur. On peut spécifier l'url d'envoi par le paramètre action de l'élément form.

De façon courante, les données sont envoyées au format json à un serveur via une fonction javascript, on utilise donc plus trop ce genre de chose actuellement.

par défaut get car normalement on envoie les données avec ajax lorsque l'on clique sur le bouton.

gestion des données avec google sheet

le formulaire

A vous Reprenez le formulaire du cours en version get. Rendez le joli avec bulma !

google sheet

Créez un nouveau formulaire google sheet et suivez les instructions de : https://github.com/jamiewilson/form-to-google-sheets

Les champs que vous devez avoir pour que votre application fonctionne sont :

• timestamp (le script ajoute la date et l'heure)
• user_name
• user_mail
• user_message

Ajoutez les lignes suivantes à votre html contenant le formulaire, qui doit être envoyé avec la méthode post :

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
    const scriptURL = 'ADRESSE DE MON SCRIPT'
    
    $('form').submit(function(e) {
        e.preventDefault()
        console.log(new FormData($('form')[0]))
        fetch(scriptURL, { method: 'POST', body: new FormData($('form')[0])})
          .then(response => console.log('Success!', response))
          .catch(error => console.error('Error!', error.message))
    })
})
</script>

Vous devriez être capable de recevoir les envois du formulaire.

Si cela ne marche pas pour les étudiants ou qu'il n'ont pas de compte google, utilisez td_formulaire_bulma_google.html

Exemple : J'ai préparé un exemple qui fonctionne. Le google sheet est modifiable par tout le monde (donc attention...) et est à l'adresse : https://docs.google.com/spreadsheets/d/1wh8zp5pWaSuwD3pnx-eTRh8j8EYK3N_qwanbVH6-Lps/edit#gid=0.

On peut accéder au script depuis le menu Tools > script editor. L'url du script à mettre dans le fichier html est : https://script.google.com/macros/s/AKfycbxnSIw3d3NJvKS2-qUybbwRv-DfmDaLknZEYC3X3jBmwWpLdmI/exec