Les formulaires HTML, contrôlés par du JavaScript, sont un moyen très efficace d'envoyer des informations saisies par les utilisateurs vers le serveur. Mais comment les récupérer, les retrouver et les traiter ?
La solution est d'utiliser un langage serveur. PHP est de loin le plus accessible et le plus courant. Je vous conseille la lecture des tutoriaux "Introduction au PHP" et "Javascript et PHP".
Le langage Node.js est aussi une bonne solution.
Le moyen le plus courant pour transmettre des informations depuis le visiteur vers le serveur est d'utiliser les formulaires.
<form> et </form>.Voici un exemple de formulaire :
<form name="monform" action="traiter.php" method="post" target="_blank">
<p>Zone de texte : <input type="text" name="champtexte"></p>
<p>Liste déroulante :
<select name="liste">
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
<option value="4">Choix 4</option>
</select>
</p>
<p>Choix multiples :
<input type="radio" name="niveau" value="0" checked> Débutant
<input type="radio" name="niveau" value="1"> Intermédiaire
<input type="radio" name="niveau" value="2"> Bon
<input type="radio" name="niveau" value="3"> Jedi
</p>
<p>Cases à cocher : <input type="checkbox" name="accord" value="ok"> Je suis d'accord</p>
<p><input type="submit" value="Envoyer"></p>
</form>
qui donne l'affichage suivant :
Un objet form a comme paramètre un nom, une action et une méthode de transmission vers le serveur.
name sert à manipuler et reconnaître l'objet form dans la page pour le traiter en JavaScript.
action contient l'adresse du script sur le serveur qui va recevoir et traiter les données du formulaire. Ici le formulaire sera envoyé à "page.php" dans le répertoire en cours.
method indique le type de transmission des données. "post" cache les données transmises au visiteur. "get" les rend visibles dans l'url de la page.
On peut aussi définir une destination par le paramètre target, équivalent au target de la balise de lien <a>.
L'envoi du formulaire (ou soumission ou submit en anglais) peut se faire de 2 manières.
- Soit par un clic sur un bouton de type submit :
<input type="submit" value="Envoyer">Dans ce cas, le clic déclenche un événement
onclick et formulaire est envoyé.- Soit par du JavaScript :
document.monform.submit()
Voir le tutorial JavaScript sur les formulaires pour tous les détails sur la manipulation des formulaires.
La soumission du formulaire par l'utilisateur redirige vers la page définie dans la propriété action.
Toutes données des éléments du formulaire sont transmises au serveur via l'entête HTTP. Vous pouvez d'ailleurs contrôler grâce à la console du navigateur, dans l'onglet Network ce qui est envoyé au serveur :
Les données envoyées par un formulaire de type post sont accessibles dans le tableau associatif $_POST.
Voici ce que contient $_POST par exemple :
Array
(
[champtexte] => Voici du texte
[liste] => 1
[niveau] => 0
[accord] => ok
)
Les données envoyées par un formulaire de type get sont dans le tableau associatif $_GET.
De la même manière, dans une page PHP dont l'url est traiter.php?data=AZERTY, la valeur de data est stockée dans $_GET["data"]
La sécurité doit devenir l'enjeu prioritaire de tout développeur web. Bien sûr, le code doit fonctionner comme prévu dans le cas d'une utilisation normale : si un utilisateur commande un produit, le bon produit doit lui être envoyé, au bon prix et à la bonne adresse.
Mais si un utilisateur malintentionné tente de manipuler le système pour commander un produit sur le compte d'un autre utilisateur, le code doit l'empêcher.
Ainsi, il est indispensable de contrôler les saisies du formulaire, du côté du serveur de manière à vérifier que les données envoyées sont bien du type attendu.
Le contrôle de formulaire côté JavaScript doit être réalisé dans un esprit d'assistance à l'utilisateur pour lui faciliter l'utilisation du formulaire. Le contrôle côté serveur doit être réalisé pour valider les données envoyées et interdire toute utilisation illicite.
En savoir plus