DEVENIR-WEBMASTER.COM Log In
 30
close

Bases des formulaires HTML

Visiter ma chaine Youtube

# Qu'est ce qu'un formulaire ? close

Un formulaire propose à l'internaute de saisir des informations. Lorsque la saisie est terminée l'internaute clique sur un bouton. Ce clic déclenche une requête http vers un script de traitement. Et bien sûr la requête contient les informations saisies.

Ce script de traitement est écrit dans un langage de programmation. Le plus souvent il s'agit du PHP. Et le plus souvent les informations seront transmises à une base de données MYSQL.

Vous avez un exemple concret mais incomplet d'un formulaire. Un clic sur le bouton traiter envoie une requête vers le serveur sur le script traiter-formulaire.php. Ici le script affiche les informations sur l'écran pour démontrer la transmission.

Le code html de la saisie du formulaire est ci dessous contenu dans la page saisir-formulaire.html.

Code html d'un formulaire

Le code php du traitement du formulaire est ci dessous contenu dans la page traiter-formulaire.php.

Code php de traitement d'un formulaire HTML

Nous allons détailler tout cela.

# Quels sont les éléments HTML pour créer un formulaire ? close

L'élément conteneur form

Il faut d'abord mettre en place l'élément form qui est une sorte de conteneur.

Deux attributs sont indispensables :

method : qui prend la valeur GET ou POST. Ce sont les deux manières de passer les informations au script de traitement.

action : qui contient le nom du script php qui traitera le formulaire.

Faire un formulaire étape 1

Les champs de saisie et leur label

Ensuite il faut placer des champs de saisie dans lesquels l'internaute va saisir les informations.

Dans cet exemple les deux champs de saisie sont construits avec l'élément input. Il y a d'autres éléments html pour construire des champs de saisies. On les passera en revue plus loin.

Deux attributs sont utilisés ici pour les éléments input :

type : qui précise le type du champ. Ici on a text pour un champ de texte puis password pour un mot de passe.

name : la valeur de name est le nom de l'entrée du tableau php que le serveur recevra.

Ensuite il faut associer le texte qui accompagne le champ de saisie en le plaçant dans un élément label. L'association se fait au moyen d'un identificateur.

Relier un label avec un input

Vous pouvez mettre trois valeurs identiques pour for id et name.

Un clic sur le texte qui a été mis entre l'élément label donne le focus au champ de saisie.

C'est très important d'associer un label à chaque champ de saisie.

  1. C'est indispensable au bon fonctionnement d'une saisie de formulaire sur synthétiseur vocal.
  2. Sur smartphone il peut être plus facile de cliquer sur le texte contenu dans le label pour obtenir le focus dans le champ.

Deux constructions HTML sont possibles. Le choix est souvent guidé par la façon dont vous mettrez en forme votre formulaire en CSS.

Faire un formulaire étape 2

Le bouton de soumission du formulaire

Il faut avoir un bouton pour pouvoir déclencher le traitement du formulaire lorsque la saisie est terminée.

value : contient le texte du bouton.

Faire un formulaire étape 3

Le regroupement des champs

Vous pouvez fabriquer des groupes de champs en les encapsulant dans l'élément fieldset.

Vous pouvez également mettre une légende à ce regroupement en utilisant l'élément legend

Ces éléments augmentent aussi vos possibilités de mise en forme CSS et sont utilisés même avec un seul groupe de champs.

Faire un formulaire étape 4

Exemple de regroupement de champs

Formulaire complet

Vous avez ci-dessous le code final d'un formulaire.

Faire un formulaire étape 5

Création d'un formulaire

# Comparer le GET et le POST ? close

Les points communs

  1. La taille des informations transmises est limitée.
  2. Les informations sont visibles. Si vous voulez cacher des données c'est avec un cryptage que vous devez le faire.

Les spécificités du GET

formulaire avec get

  1. Les données sont transmises dans l'URL. Elles sont visibles directement dans la barre d'adresse du navigateur et facilement transformables.
  2. La page de traitement des données sera mise en cache.
  3. Le GET est à utiliser lorsque l'état du serveur n'est pas modifié par le traitement du formulaire. C'est le cas pour lire des informations.

Les spécificités du POST

formulaire avec post

  1. Avec un POST les données sont placées dans l'en-tête de la requête http. Vous pouvez tout aussi bien les voir avec des outils webmaster. Par contre vous ne pouvez pas les manipuler facilement.
  2. La page de traitement des données ne sera pas mise en cache.
  3. Vous pouvez modifier le codage des informations en utilisant l'attribut enctype de l'élément form.
  4. Le POST est à utiliser lorsque l'état du serveur est modifié par le traitement du formulaire. C'est le cas pour l'écriture des informations.

# Précautions à prendre close

Les informations doivent être filtrées côté client et aussi côté serveur.

Par ailleurs il faut contrôler le flux des informations envoyées vers votre serveur. C'est un internaute qui doit envoyer des informations vers votre serveur pas un robot. Vous devez donc mettre en place un mécanisme qui oblige une intervention humaine.