Devenez interactifs !

Mise en pratique

Le site Starbuzz a décidé de mettre sur pied un formulaire permettant de commander du café en ligne à partir d'un formulaire ayant la structure suivante:

Avant de construire ce formulaire, téléchargez-en le squelette et examinez-le: il ne contient que du code HTML de base. Vous allez lui ajouter votre premier élément <form>. Pour le construire, il est nécessaire de connaître l'URL de l'application web en charge du traitement des données du formulaire. Nous avons rédigé une application web permettant de traiter les commandes Starbuzz pour vous. Il s'agit du document commander.php accessible au travers de l'adresse suivante:

Quand vous connaissez l'URL de l'application web qui traite votre formulaire, il suffit de l'indiquer en valeur de l'attribut action de l'élément <form> comme indiqué ci-dessous:

Nous allons maintenant compléter le formulaire en y insérant les éléments proposés par la maquette. Commençons par la partie dédiée aux coordonnées du client: il s'agit d'insérer quelques éléments <input> de type text:

L'attribut name donne une identification unique à chacun des champs du formulaire. Cet identifiant sera le nom de la variable transmise à l'application web qui en traitera la valeur. La valeur de cette variable correspondra aux données transmises par l'utilisateur dans le champs du formulaire. Plus précisément:

• Chaque champs d'un formulaire doit avoir son propre attribut name comme ci-dessous:
  
• Quand le formulaire est soumis, le navigateur associe chacune des données que vous avez entrées avec la variable dont vous avez donnée le nom via l'attribut name et il envoie chaque attribut name avec sa valeur au serveur pour être traité:
  
  Notez qu'il est possible d'attribuer une valeur par défaut à la variable nommée par l'attribut name en utilisant l'attribut value. S'il est utilisé dans un élément <input> de type text, ce procédé aura pour conséquence d'afficher un texte par défaut dans la zone de texte du formulaire.

Incluez les éléments <input> dans le formulaire selon le modèle ci-dessous puis testez-le:

Ajoutons un élément <select> au formulaire pour permettre à l'utilisateur de choisir le café. Cet élément doit contenir une liste d'options qui vont chacune devenir un article du menu déroulant. Chaque option a aussi une valeur et celle de l'option sélectionnée sera envoyée au serveur lors de la soumission du formulaire au travers de l'attribut name de l'élément <select>. Par exemple, si l'utilisateur choisit l'option «Mélange maison», le navigateur enverra au serveur cafes="Melangemaison". Insérez le code suivant juste avant les coordonnées du client puis testez-le:

Comme les clients doivent pouvoir choisir entre du café en grains ou du café moulu, nous allons faire appel à des boutons radio qui permettront de choisir un produit à l'exclusion d'un autre. Dans le code, créez un <input> de type radio pour chaque bouton: un pour le café en grains et l'autre pour le café moulu puis testez votre formulaire:

En ajoutant l'attribut checked avec la valeur checked dans un élément <input> de type radio, celui-ci sera sélectionné par défaut quand le formulaire s'affichera dans le navigateur. Comme 80% des clients de Starbuzz commandent du café moulu, il serait bien de préselectionner ce choix. Faites-le et testez votre formulaire !

Finalement, il ne reste plus que deux sections à ajouter: les options avec deux cases à cocher ("Paquet cadeau" et "Joindre un catalogue") avec une préselection sur l'option "Joindre un catalogue" et le champ pour les commentaires des clients. A nouveau, faites les ajouts et contrôlez votre résultat:

Notez que le langage de script dans lequel est écrite l'application web commander.php aime bien savoir qu'une variable de formulaire est une liste de plusieurs valeurs. Pour cela, nous ajoutons «[]» au bout de l'attribut name. Dans le contexte du HTML, vous pouvez oublier ce détail mais gardez-le en tête pour le jour où votre formulaire s'appuiera sur une application web écrite en PHP.