HTML5 – Formulaires

LEÇON

 

Principes de base

Mettre un formulaire sur une page d'un site web est utile pour obtenir des données de la part de l'internaute.

Exemples :

  • formulaire de recherche (mots clés à rechercher dans le contenu disponible)
  • formulaire de contact (nom, numéro de téléphone, adresse mail, question, etc)
  • formulaire de création de compte utilisateur (pseudonyme, adresse mail, etc)
  • formulaire de paiement en ligne (nom, adresse mail, adresse postale, numéro de carte de crédit, etc)

Un formulaire contient un ou plusieurs champs et un bouton pour soumettre les informations.

Les informations sont envoyées au serveur web en tant que requête HTTP - la différence entre une requête pour une page et une requête déclenchée par la soumission d'un formulaire est que, dans le 2ème cas, les informations fournies par l'utilisateur sont ajoutées à la requête - un peu comme du bagage.

Il est clair que la ressource cible de la requête déclenchée par la soumission d'un formulaire doit être autre chose qu'un document HTML. Sinon les informations seront perdues. Car un document HTML est purement statique - il ne peut pas procéder à une traitement des informations reçues.

Quand les informations arrivent au serveur web, si elles vont servir à quelque chose, elles doivent donc être traitées par un script ou un programme.

 

Les formulaires pour recevoir et les formulaires pour donner

Les formulaires sont de 2 types :

  • les formulaires pour ensuite recevoir quelque chose du serveur. Par exemple, un formulaire de recherche avec lequel on choisit ce qu'on veut recevoir du serveur. Dans ce cas le formulaire a un effet sur le contenu de la réponse du serveur, mais le serveur est inchangé.
  • les formulaires pour donner quelque chose au serveur. Par exemple, un formulaire de contact, ou de création compte, ou de paiement. Dans ce cas le formulaire déclenche une opération qui modifie le serveur (stockage des nouvelles données par exemple).

 

Les balises essentielles

  • <form> : cette balise délimite le formulaire - on doit commencer la définition d'un formulaire avec <form> et finir avec </form>
  • <input> : balise générique pour : un champ texte, ou un bouton radio, ou un checkbox (case à cocher), ou un bouton cliquable, ou ...
  • <label> : balise pour définir une étiquette pour un élément de type input
  • <textarea> : balise pour un champ de texte multiple-ligne
  • <select> et <option> : balises pour créer des listes de sélection (drop down lists)

Exemple :

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Bienvenue</title>
</head>

<body style="background-color:#e0e0e0; padding:0px; margin:0px;">

<div style="width:880px; margin: 0 auto;
            background-color:#f0f0f0; padding:40px;">

<h3>Formulaire</h3>
<br>

<form name="contact" action="contact.php" method="post">

<label>Prénom :</label>
<input type="text" name="prenom">
<br><br>

<label>Nom :</label>
<input type="text" name="nom">
<br><br>

<label>Je suis :</label>
<select name="hf">
  <option value="homme">Homme</option>
  <option value="femme">Femme</option>
</select>
<br><br>

Tranche d'age :
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="age_petit">moins de 18 ans</label>
<input type="radio" id="age_petit" name="age" value="petit">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="age_moyen">de 18 à 65 ans</label>
<input type="radio" id="age_moyen" name="age" value="moyen">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="age_grand">plus de 65 ans</label>
<input type="radio" id="age_grand" name="age" value="grand">
<br><br>

<label>Adresse mail :</label>
<input type="text" name="mail">
<br><br>

<input type="checkbox" id="mail_spam" name="mail_spam" value="oui">
<label for="mail_spam">Oui, j'accepte d'être spammé(e)</label>
<br><br>
<input type="checkbox" id="mail_partage" name="mail_partage" value="oui">
<label for="mail_partage">Oui, j'autorise le partage sans scrupules de
mon adresse mail avec tous vos partenaires pour qu'ils puissent me
spammer également</label>
<br><br>

<label>Ma question:</label><br>
<textarea rows="4" cols="80" name="question"></textarea>
<br><br><br>

<input type="submit" value="Soumettre">

</form> 

</div>

</body>
</html>

 

Notions de GET et POST

Comme évoqué ci-dessus, les informations d'un formulaire sont envoyées au serveur web avec la requête HTTP, un peu comme du bagage. Et les formulaires peuvent être exploités soit pour recevoir ensuite d'autres informations, soit pour donner des informations au serveur.

 

Il y a 2 méthodes pour attacher le bagage à la requête :

  • la méthode GET
    • les données sont ajoutées à l'URL de la requête
    • cette méthode est typiquement utilisée pour recevoir des informations
  • la méthode POST
    • les données sont incluses (cachées) dans la requête HTTP
    • cette méthode est typiquement utilisée pour donner des informations

 

Si le formulaire dans l'exemple ci-dessus était un formulaire GET et on remplissait le formulaire ainsi :

html_formulaire_exemple_1

l'URL de la requête serait quelque chose comme ceci :

http://www.monsite.fr/contact.php?prenom=Jean&nom=Dupont&hf=homme&age=grand&mail=jdupont%40yopmail.com&mail_spam=oui&mail_partage=oui&question=Auriez-vous+l%27amabilit%C3%A9+de+me+t%C3%A9l%C3%A9phoner+et+expliquer+pourquoi+je+re%C3%A7oit+beaucoup+de+spam%3F+Merci.

Mais si le formulaire était un formulaire type POST, l'URL serait plutôt quelque chose comme ceci : http://www.monsite.fr/contact.php - et les données seraient incluses dans la requête HTTP.

 

Conseils :

  • Utiliser la méthode GET pour offrir la possibilité de paramétrer ou filtrer la réponse du serveur. Exemple : formulaire de recherche.
  • Utiliser la méthode POST pour offrir la possibilité d'envoyer des informations au serveur pour stockage ou création de quelque chose (compte, achat, ...)
  • Utiliser toujours HTTPS quand les informations sont sensibles. Les "cacher" dans la requête HTTP ne suffit pas pour sécuriser des données.

 

Autres possibilités avec la méthode GET

Comme on a vu, un formulaire qui exploite la méthode GET encode des données dans l'URL.

Il est donc possible d'exploiter la méthode GET sans formulaire.

Il suffit de préparer des URLs avec des paramètres en méthode GET pour donner des options à l'utilisateur de filtrer les réponses du serveur.

Par exemple, au lieu de présenter un formulaire qui propose une liste de sélection avec les 3 rayons d'un magasin en ligne, on peut tout simplement afficher 3 liens :

<a href="http://www.mon-magasin-en-ligne.fr/produits?rayon=cd">Voir nos produits CD</a>

<a href="http://www.mon-magasin-en-ligne.fr/produits?rayon=dvd">Voir nos produits DVD</a>

<a href="http://www.mon-magasin-en-ligne.fr/produits?rayon=bluray">Voir nos produits BluRay</a>

 

Validation de données

Quand on tape n'importe quoi dans les champs d'un formulaire, souvent les données sont rejetées.

L'acceptation ou réjection des données s'appelle validation.

La validation peut être faite :

  • côté client par JavaScript
  • côté serveur par le script PHP
  • les deux

Typiquement on ne fait jamais uniquement la validation par JavaScript car ce code peut être toujours contourné.

 

 


 

EXERCICES

  1. Quelle méthode (GET ou POST) devrait être utilisée dans les cas suivants :
    • formulaire de recherche
    • formulaire de connexion (login)
    • formulaire de contact
    • formulaire pour filtrer un tableau de données
    • formulaire pour trouver une annonce selon certains critères
    • formulaire d'achat en ligne
    • formulaire de réservation de chambre d'hôtel
  2. Dans notepad++, créer un formulaire pour chaque cas ci-dessous. Tester l'affichage du formulaire dans un navigateur. Si possible, créer des scripts PHP qui affichent les données reçues côté serveur.
    • formulaire de recherche
    • formulaire de connexion (login)
    • formulaire de contact