Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 3

Introduction au HTML [3]

Le formulaire HTML: un survol

Les formulaires HTML sont caratérisés par des éléments qui permettent de collecter des informations auprès des utilisateurs.

Le formulaire le plus connu est sans doute le champ de recherche de Google :

Formulaire de recherche de Google
Formulaire de recherche du site de Google.

L'utilisateur remplit le formulaire et appuie sur un bouton pour soumettre les informations au serveurs:

Processus d'envoi d'un formulaire
Processus d'envoi d'un formulaire.

Un formulaire peut comprendre plusieurs contrôles, chacun récoltant des informations différentes.

Le serveur doit pouvoir mettre en correspondance les données saisies et les éléments du formulaire.

C'est ici que le nom (l'attribut name) entre en jeu: il sert à nommer le contrôle et à identifier la valeur entrée par l'utilisateur. Lors de l'envoi du formulaire, il se forme ainsi des couples nom / valeur qui sont traités par le programme:

Couple nom/valeur
Couple nom-valeur

Structure d'un formulaire <form>

Quelques caractéristiques :

  • Les éléments d'un formulaire (c'est-à-dire un groupe de contrôles utilisés pour recueillir des informations) sont obligatoirement inclus dans les balises <form></form>.
  • Tout contenu web (texte <p>, image <img>, tableau <table>, etc.) peut être ajouté dans un élément form, mais son rôle principal est de servir de conteneur à des contrôles (cases à cocher, champs de saisie, boutons, etc.) permettant de saisir des informations.
  • Le formulaire possède les attributs nécessaires pour interagir avec son programme de traitement.
  • Un même document HTML peut contenir plusieurs formulaires, mais il est strictement interdit d'insérer un formulaire dans un autre formulaire, car cela crée un comportement inconsistant dont le rendu final dépendra du navigateur.
  • Quand l'utilisateur a fini de remplir son formulaire et appuie sur le bouton Envoyer, le navigateur prend les informations, les organise sous forme de paires nom/valeur, les encode pour leur transfert et les envoie au serveur.

Syntaxe

Les éléments qui composent un formulaire sont inclus entre les balises <form> et </form> dont la syntaxe minimale est la suivante :

<form action="traitement.php" method="post">

...

</form>

où:

  • action (obligatoire) a pour valeur l'URI du programme qui traite les données recueillies par le formulaire.
  • method (obligatoire) est la méthode de transmission des données du formulaire:
    • Valeur "get" : transmet les données en clair dans l'adresse URL; la taille des données ne peut dépasser 256 octets. Utile pour les formulaires courts, comme un champ de recherche, où la sécurité n'est pas un enjeu. On ne doit pas envoyer de mots de passe ou autres données sensibles par cette méthode ;
    • Valeur "post" : transmet les données dans le corps de la requête; la taille des données n'est pas limitée. Cette méthode est souvent préférée à la première pour les formulaires longs ou qui nécessitent un bon degré de sécurité, car elle n'affiche pas en clair les données saisies dans le formulaire et permet leur encryptage.

Éléments de formulaire courants

Champ de texte <input type="text">

Code :

<label for="nom">Votre nom : </label>
<input type="text" name="nom" id="nom">

Résultat :

Attributs courants

type="text"

Lorsque l'attribut type vaut text, il crée un champ de saisie d'une seule ligne de texte.

Si l'attribut type n'est pas spécifié pour un élément input, ce dernier est par défaut un champ de texte.

name

Chaque contrôle de formulaire exige un attribut name afin d'être identifié correctement à l'étape du traitement des données. Sa valeur identifie le contrôle et est envoyée au serveur conjointement aux données.

maxlength

L'attribut maxlength fixe une limite sur le nombre de caractères accepté dans un champ de saisie lorsque nécessaire. Par exemple, si l'utilisateur doit indiquer une année, maxlength peut valoir 4.

Voir le Pen c03-form01 de Sylvain Lamoureux (@slamoureux) sur CodePen.

Saisie d'un mot de passe: <input type="password">

Code :

<label for="usager">Nom d'usager : </label>
<input type="text" name="usager" id="usager">
<label for="motdepasse">Mot de passe : </label>
<input type="password" name="motdepasse" id="motdepasse">

Résultat :

Attributs

type="password"

Lorsque l'attribut type vaut password, il crée un contrôle qui présente les caractéristiques d'un champ de saisie, à l'exception près que les caractères sont masqués.

name

L'attribut name donne le nom du champ de mot de passe qui est envoyé au serveur avec le mot de passe saisi.

id

L'attribut id permet d'associer le champ de saisie à son intitulé (label).

maxlength

L'attribut maxlength fixe une limite sur le nombre de caractères acceptés dans un champ de saisie lorsque nécessaire.

See the Pen c03-form02 by Sylvain Lamoureux (@slamoureux) on CodePen.

Bien que le mot de passe soit masqué à l'écran, les données saisies ne sont pas envoyées au serveur de manière sécurisée. Ce contrôle ne doit pas donc pas être utilisé tel quel pour l'envoi de données sensibles, tel qu'un numéro de carte bancaires. Pour une sécurité totale, le serveur doit être configuré de manière particulière, mais ce sujet est hors des cadres du présent cours.

Saisie d'un courriel: <input type="email">

Code :

<label for="courriel">Votre courriel : </label>
<input type="email" name="courriel" id="courriel"placeholder="courriel">
<input type="submit" value="Envoyer">

Résultat :

Attributs

type="email"

L'élément input de type email facilite la saisie d'une adresse de messagerie. Les navigateurs contrôleront le format des informations fournies. Certains téléphones optimisent leur clavier en affichant des touches utiles pour le contexte (comme @, .com ou autres).

Saisissez du texte autre qu'un courriel dans le champ de saisie, puis appuyez sur le bouton «Envoyer» pour faire l'essai de la validation par le navigateur.

name

L'attribut name donne le nom du champ de courriel qui est envoyé au serveur avec les informations saisies.

id

L'attribut id permet d'associer le champ de saisie à son intitulé (label).

See the Pen c03-form03 by Sylvain Lamoureux (@slamoureux) on CodePen.

Saisie d'un URL: <input type="url">

Code :

<label for="url_pf">Adresse de mon portfolio : </label>
<input type="url" name="url_pf" id="url_pf">
<input type="submit" value="Envoyer">

Résultat :

Attributs

type="url"

Un champ de saisie de type url peut être utilisé lorsque l'utilisateur doit saisir l'adresse d'une page web. Les navigateurs contrôleront le format des informations fournies. Certains téléphones présentent un clavier optimisé affichant des touches utiles pour le contexte (comme .com ou autres). Pour les anciens navigateurs cet élément est traité comme un simple champ de texte.

Saisissez du texte autre qu'un URL dans le champ de saisie, puis appuyez sur le bouton « Envoyer » pour faire l'essai de la validation.

name

L'attribut name donne le nom du champ d'url qui est envoyé au serveur avec les informations saisies.

id

L'attribut id permet d'associer le champ de saisie à son intitulé (label).

See the Pen c03-form04 by Sylvain Lamoureux (@slamoureux) on CodePen.

Champ de recherche : <input type="search">

Code :

<input type="search" name="search" placeholder="Saisir un mot clé">
<input type="submit" value="Rechercher">

Résultat :

Attributs

type="search"

Le champ de saisie de type search est traité de manière particulière par les navigateurs. Safari et Chrome, par exemple, ajoutent un bouton en forme de « x » pour effacer les informations déjà saisies et arrondissent les angles du champ.

name

L'attribut name donne le nom du champ de recherche qui est envoyé au serveur avec les informations saisies.

placeholder

Avec n'importe quel champ de saisie de texte, vous pouvez définir l'attribut placeholder dont la valeur donne le texte qui est affiché dans le champ en attendant que l'utilisateur clique dans cette zone.

See the Pen c03-form05 by Sylvain Lamoureux (@slamoureux) on CodePen.

Saisie d'une date : <input type="date">

Code :

<label for="date">Date de départ : </label>
<input type="date" name="date" id="date">
<input type="submit" value="Réserver">

Résultat :

Attributs

type="date"

L'élément input de type date est tout désigné dans la situation où l'utilisateur doit fournir une date. Les navigateurs compatibles font afficher un calendrier contextuel lorsque l'utilisateur clique dans le champ de saisie. Pour les anciens navigateur, cet élément est traité comme un simple champ de texte.

name

L'attribut name donne le nom du champ de date qui est envoyé au serveur avec les informations saisies.

id

L'attribut id permet d'associer le champ de saisie à son intitulé (label).

See the Pen c03-form06 by Sylvain Lamoureux (@slamoureux) on CodePen.

Zone de texte multiligne: <textarea>

L'élément textarea permet de créer une zone de saisie de texte multiligne. Contrairement aux autres éléments de saise, celui-ci n'est pas vide. Vous devez donc inclure les balises d'ouverture et de fermeture.

Le texte qui apparaît entre les balises sera affiché dans la zone de texte lors du chargement de la page. Si l'utilisateur ne supprime pas ce texte, le message envoyé au serveur le contiendra, en plus du texte saisi. Certains sites ajoutent du code JavaScript pour effacer le texte initial lorsque l'utilisateur clique dans la zone de texte.

Code :

<textarea name="avis">Écrivez votre avis ici...</textarea>

Résultat :

Attributs

name

Lorsque le formulaire est soumis, le navigateur envoie le texte entré par l'utilisateur avec le nom spécifié par l'attribut name (obligatoire).

cols, rows

Pour ajuster la taille du textarea, on peut utiliser les attributs cols (dont la valeur est un nombre de caractères) et rows (dont la valeur est un nombre de lignes), mais il est préférable d'utiliser les propriétés width et height des CSS afin de faciliter l'entretien de la page.

See the Pen c03-form09 by Sylvain Lamoureux (@slamoureux) on CodePen.

Cases à cocher: <input type="checkbox">

Les input de type checkbox permettent de créer un groupe d'options à cocher. Ce type de input est privilégié lorsque l'on veut offrir à l'utilisateur la possibilité de cocher une ou plusieurs options d'un groupe de cases.

Code :

<p>Parmi ces services de musique en ligne, lequel ou lesquels 
  avez-vous utilisés ?</p>
  <ul>
    <li>
      <input type="checkbox" name="service" value="gpmusic" id="gpmusic">
      <label for="gpmusic">Google Play Music</label>
    </li>
    <li>
      <input type="checkbox" name="service" value="spotify" id="spotify">
      <label for="spotify">Spotify</label>
    </li>
    <li>
      <input type="checkbox" name="service" value="deezer" id="deezer">
      <label for="deezer">Deezer</label> 
    </li>
    <li>
      <input type="checkbox" name="service" value="applem" id="applem">
      <label for="applem">Apple Music</label>
    </li>
    <li>
      <input type="checkbox" name="service" value="tidal" id="tidal">
      <label for="tidal">Tidal</label> 
    </li>
    <li>	
      <input type="checkbox" name="service" value="aucun" id="aucun">
      <label for="aucun">Aucun</label> 
    </li>
  </ul>

Résultat :

Parmi ces services de musique en ligne, lequel ou lesquels avez-vous utilisés ?

L'exemple précédent montre les couples input et label insérés dans des éléments de liste <li> car il s'agit d'une liste d'options. Mais ce n'est pas obligatoire: d'autres stratégies de balisage sont possibles ici. On utilise parfois des éléments <p> ou <div> pour regrouper ces éléments, ou encore des bris de ligne dans certaines cisconstances.

See the Pen c03-form07 by Sylvain Lamoureux (@slamoureux) on CodePen.

On pourrait aussi précocher une option lorsque cela est pertinent, comme le montre l'exemple suivant grâce à l'attribut checked.

Code :

<p>Pour rester informé, abonnez-vous à notre info-lettre!</p>
<input type="checkbox" name="info" value="info" checked="checked" id="info">
<label for="info">Abonnez-moi à l'info-lettre</label>

Résultat :

Pour rester informé, abonnez-vous à notre infolettre :

See the Pen c03-form10 by Sylvain Lamoureux (@slamoureux) on CodePen.

Attributs

type="checkbox"

Les cases à cocher permettent à l'utilisateur de sélectionner et de désélectionner une ou plusieurs options.

name

L'attribut name sert à indentifier un groupe de cases à cocher. Sa valeur est envoyée au serveur accompagnée des valeurs des options sélectionnées. La valeur name doit être la même pour l'ensemble des cases à cocher d'un même groupe.

value

L'attribut value est la valeur envoyée au serveur lorsque la case correspondante est cochée. Chaque case d'un groupe doit avoir une valeur distincte.

id

L'attribut id sert à lier la case à cocher à son intitulé (label).

checked

L'attribut checked permet d'indiquer que la case correspondante sera déjà cochée au chargement de la page. Sa valeur est checked.

Boutons radio: <input type="radio">

Les input de type radio (« boutons radio ») se manipulent un peu de la même façon que les checkbox.

À la différence des checkbox toutefois, l'utilisateur ne peut cocher qu'un seul bouton radio à la fois à l'intérieur d'un même groupe. L'attribut name sert à identifier un groupe.

Code :

<input type="radio" name="menu" value="poulet" checked="checked" id="poulet">
<label for="poulet">Plat de poulet</label>
<input type="radio" name="menu" value="viande" id="viande">
<label for="viande">Plat de viande rouge</label>
<input type="radio" name="menu" value="vegetarien" id="vegetarien">
<label for="vegetarien">Plat végétarien</label>

Résultat :

Choisissez votre plat du midi :



Attributs

name

L'attribut name identifie un groupe de boutons radio. Un seul et même nom assure que l'utilisateur ne peut choisir qu'une seule option. La valeur de name est envoyée au serveur afin d'identifier correctement le groupe de boutons radio et la réponse qui lui est associée.

value

L'attribut value est la valeur envoyée au serveur lorsque l'option correspondante est sélectionnée. Chaque bouton d'un groupe doit avoir une valeur distincte.

id

L'attribut id sert à lier le bouton radio à son intitulé (label)

checked

Dans l'exemple ci-haut, le premier bouton radio est déjà coché: il s'agit de rajouter l'attribut checked et lui donner la valeur checked pour cocher un bouton à l'avance. Un seul bouton peut avoir cet attribut.

Lorsqu'un bouton est sélectionné, il ne peut plus être désélectionné L'utilisateur peut uniquement choisir une autre option. C'est pourquoi lorsque vous n'offrez qu'un seul choix (par exemple, pour signaler que vous avez lu et accepté des conditions), vous devez alors utiliser une case à cocher.

See the Pen c03-form11 by Sylvain Lamoureux (@slamoureux) on CodePen.

Menu déroulant et liste déroulante: select, option

Un menu déroulant ou une liste déroulante permet à l'utilisateur de sélectionner une option parmi celles prédéfinies.

L'élément select permet de créer un menu déroulant ou une liste déroulante. Il contient au moins deux éléments option.

Menu déroulant

Par défaut, la valeur de l'attribut size est de 1 (une seule option visible).

La sélection multiple est impossible dans un menu déroulant, un peu comme un groupe de boutons radio.

Code :

<label for="pays">Pays : </label>
<select name="listepays" id="pays">
  <option value="australie">Australie</option>
  <option value="belgique">Belgique</option>
  <option value="canada">Canada</option>
  <option value="danemark">Danemark</option>
  <option value="france" selected="selected">France</option>
</select>

Résultat à l'affichage :

Notez l'attribut selected="selected" utilisé pour pré-sélectionner un élément de la liste, en l'occurrence « Manitoba » dans l'exemple ci-haut.

See the Pen c03-form08 by Sylvain Lamoureux (@slamoureux) on CodePen.

La liste déroulante

La liste déroulante permet d'afficher plus d'une option à la fois. Si cela est souhaité, elle peut permettre la sélection multiple.

<select name="listepays" size="5" multiple="multiple">
  <option value="australie">Australie</option>
  <option value="belgique">Belgique</option>
  <option value="canada">Canada</option>
  <option value="danemark">Danemark</option>
  <option value="france" >France</option>
</select>

La valeur «5» donnée à l'attribut size permet de créer une liste déroulante avec cinq options visibles à la fois.

Attributs de select

name

L'attribut name précise le nom du contrôle de formulaire qui est envoyé au serveur, accompagné de la valeur sélectionnée par l'utilisateur.

size

L'attribut size permet de transformer un menu déroulant en liste déroulante. Sa valeur précise le nombre d'options à afficher.

multiple="multiple"

L'attribut multiple avec la valeur multiple permet de sélectionner plusieurs options dans la liste (fonctionnel seulement lorsque size vaut plus de 1).

L'utilisateur doit cependant appuyer simultanément sur la touche Ctrl (Windows) ou Cmd (MacOS) pour faire une sélection multiple.

Attributs de option

value

L'attribut value précise la valeur qui sera envoyée au serveur avec le nom du contrôle lors de la sélection de l'option.

selected="selected"

L'attribut selected sert à pré-sélectionner une option du menu déroulant ou de la liste déroulante. Sa valeur doit être selected. Si cet attribut n'est pas défini, la première option est sélectionnée par défaut. Si l'utilisateur ne choisit pas une autre option, c'est donc cette valeur qui est envoyée au serveur.

Envoi de fichier: <input type="file">

Si vous souhaiter permettre à l'utilisateur d'envoyer un fichier comme une image, une vidéo ou un PDF, vous devez utiliser un élément input de type file.

Seule la méthode post accepte ce type d'envoi.

Code :

<p>Envoyez votre curriculum vitae au format PDF :</p>
<input type="file" name="cv">
<input type="submit" value="Envoyer">

Résultat :

Envoyez votre curriculum vitae au format PDF :


Attributs

type="file"

Ce type d'élément crée dans certains navigateurs un champ comparable à un champ de saisie suivi d'un bouton Parcourir; d'autres navigateurs afficheront plutôt un bouton Choisir le fichier, suivi du texte « aucun fichier sélectionné » ou du nom du fichier sélectionné. Lorsque l'utilisateur clique sur le bouton, une fenêtre apparaît afin qu'il puisse sélectionner sur son ordinateur le fichier à envoyer. L'aspect de cette fenêtre dépend du système d'exploitation utilisé.

accept

L'attribut accept permet en principe de préciser le type de fichier à télécharger (mp3, pdf, jpg, etc.). Les navigateurs ne prennent cependant pas en charge cet attribut. Il est conseiller pour le moment de valider le type de fichiers par des scripts serveur.

Bouton d'envoi: <input type="submit" ... />

Code :

<p>Abonnez-vous à notre liste de diffusion :</p>
<input type="email" name="courriel">
<input type="submit" value="Envoyer">

Résultat :

Abonnez-vous à notre liste de diffusion :

Attributs

type="submit"

Le bouton d'envoi est utiisé pour soumettre le formulaire au serveur.

value

L'attribut value détermine le texte qui s'affiche dans le bouton.

name

L'attribut name est reconnu mais non obligatoire.

Exemple de formulaire simple et fonctionnel

Un formulaire doit se placer à l'intérieur d'un élément <form>. Il présente des contrôles et se termine par un bouton d'envoi des données :

<form action="traitement.php" method="post">
  <label for="usager">Nom d'usager : </label>
  <input type="text" name="usager" id="usager">
  <label for="motdepasse">Mot de passe : </label>
  <input type="password" name="motdepasse" id="motdepasse">
  <input type="submit" value="Se connecter">
</form>

See the Pen c03-form14 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les bonnes pratiques

L'élément label

L’élément label est un intitulé accompagnant un champ de formulaire.

Son utilisation permet aux navigateurs d’associer explicitement cet intitulé au champ de formulaire.

Ainsi, un clic sur l’intitulé donnera le focus au champ de formulaire, ce qui est très pratique notamment pour les boutons radio ou les cases à cocher parfois trop petits pour certains utilisateurs à dextérité réduite.

Cette association intitulé/champ est importante également pour les lecteurs d’écran, qui ont besoin d'étiquettes explicites pour associer chaque champ de formulaire à un texte.

Associer un label avec son champ

On associe le label au champ auquel il est lié par l'intermédiaire de l'attribut for auquel on donne la même valeur que le id du champ concerné, comme ceci:

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

See the Pen c03-form13 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les attributs id et name peuvent sembler redondants lorsqu'ils sont appliqués à des éléments de contrôles d'un formulaire comme input ou select, d'autant plus qu'on leur donne souvent la même valeur. Leurs fonctions sont cependant distinctes.

  • La valeur de l'attribut name est transmise au programme de traitement du formulaire lorsque celui-ci est envoyé.
  • L'attribut id est utilisé pour donner à l'élément un identifiant unique auquel il est possible d'accéder dans une feuille de style, un script ou un élément label comme on le voit dans l'exemple précédent.
  • Un attribut id ne peut donc pas remplacer name car sa valeur n'est pas envoyée avec le formulaire.

Les éléments fieldset et legend

L'élément fieldset est utilisé pour créer un groupe logique de contrôles. Il contient un élément legend qui décrit ce groupe logique.

L'ajout d'éléments legend dans un formulaire favorise l'accessibilité, car il est reconnu par les lecteurs d'écran et les agents utilisateurs non humains.

Exemple d'utilisation d'un élément fieldset avec son élément legend:

<fieldset>
   <legend>Adresse résidentielle</legend>
   <label for="rue">Rue : </label>
   <input type="text" name="rue" id="rue">
   <label for="ville">Ville : </label>
   <input type="text" name="ville" id="ville">
   <label for="codepostal">Code postal : </label>
   <input type="text" name="codepostal" id="codepostal">
</fieldset>

Adresse résidentielle

L'attribut tabindex

Dans le but de rendre un formulaire parfaitement accessible, l'attribut tabindex permet de planifier l'accès aux différents champs à l'aide du clavier (plutôt que de faire reposer les manipulations entièrement sur la souris).

L'attribut tabindex est simple d'utilisation: il sert à indiquer l'ordre dans lequel les champs du formulaire sont activés (mis au focus) par des pressions consécutives de la touche de tabulation du clavier.

Voici un exemple:

<label for="adresse">Adresse : </label>
<input type="text" name="adresse" id="adresse" tabindex="1">
<label for="code">Code postal : </label>
<input type="text" name="code" id="code" tabindex="2">
<label for="tel">Téléphone : </label>
<input type="text" name="tel" id="tel" tabindex="3">

Activité d'évaluation

Contrôle de lecture 1

Le contrôle de lecture 1 aura lieu au cours 4.

Il concerne le contenu des pages Web des cours 1 à 3.

Questions de révision pour le contrôle de lecture

  1. Créer un petit formulaire de recherche, incluant un champ de type search suivi d'un champ de type submit produisant un bouton sur lequel est inscrit «Envoyer».
  2. Créez un champ de texte simple précédé d'un intitulé. Assurez-vous que l'intitulé et le champ de texte sont liés explicitement par l'intermédiaire d'attributs.
  3. À quoi sert l'élément fieldset?
  4. Quelle est la différence fondamentale entre un groupe de cases à cocher et un groupe de boutons radio (outre la forme)?

TP3 - Intro au HTML (3): les formulaires

Le TP3 consiste à créer un formulaire.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

  • groupe du lundi 9h : gr2_nominitialeprenom_tp3
  • groupes du lundi 12h : gr2_nominitialeprenom_tp3

contenant un fichier the.html, contact.html et un dossier images.

Structure de fichiers :

Arborescence de fichiers pour le tp3.

Échéancier

Remettez le dossier complet, zippé, sur LÉA, dans l'espace prévu à cette fin, au plus tard :

  • le vendredi suivant le cours, 9h le matin

Grille d'évaluation (pondération: 2% de la session)

  • La structure et le nom des fichiers respectent l'énoncé: /1
  • Le doctype et encodage du texte sont précisés et sont fonctionnels: /2
  • Les hyperliens sont bien formés: /2
  • L'élément <title> est présent et contient Titre de la page + Titre du site: /2
  • Les règles de syntaxe et l'imbrication des éléments sont respectés: /2
  • L'indentation est complète et bien faite: /2
  • Les images sont balisées, elles s'affichent et comportent un attribut alt: /2
  • Le formulaire st correctement balisé: /4
  • La page contact.html est structurée correctement: /2
  • Total: /20

Travail à faire

Vous devez créer un formulaire pour la page contact.html du site Javaco (voir TP2).

Pour cela, vous :

1) Créez un dossier au nom de gr1_nomprenom_tp3, dans lequel vous insérez le fichier the.html du tp2, et dans lequel vous insérez également le dossier images du tp2.

2) Ouvrez Brackets et chargez ensuite le dossier gr1_nomprenom_tp3 (menu Fichier/Ouvrir un dossier...)

3) Faites afficher le fichier the.html dans la fenêtre d'édition de Brackets ;

4) Dans le fichier the.html, effectuez les corrections proposées par le professeur;

5) Ajoutez les éléments meta suivants (à la suite de l'élément meta déjà en place dans la partie <head> de votre page) pour rendre la page plus efficace :

<meta name="description" content="Les thés JAVACO: des produits santé pour le plaisir des sens.">

<meta name="keywords" content="thé, african flower, assam fop, ceylon pekoe, darjeeling fop, georgian fop, lapsang souchong, yunnan, formosa oolong, gunpowder, sencha">

<meta name="author" content="Votre nom">

6) Une fois ces modifications faites, dupliquer le document the.html et nommez ce nouveau document contact.html.

7) Faites afficher le fichier contact.html dans Brackets.

8) Modifiez le contenu de <title> de manière appropriée ;

9) Modifiez la section body de la façon suivante :

  1. Conservez le logo JAVACO ;
  2. Conservez la liste des liens du menu intacte, sans modification ;
  3. Conservez tel quel l'élément time présentant la date.
  4. Changez le contenu de h1 par « Contactez-nous » afin de refléter le contenu de la page ;
  5. Retirez la section « Les origines légendaires du thé » (tout en conservant le reste du contenu de la page à partir de « Le saviez-vous? »);
  6. Remplacez cette section par la section intitulée « Pour en savoir plus sur nos produits »; cette section présente un formulaire de demande d'information. Au final, la nouvelle page contact.html prendra cette allure :
Exemple de résultat pour le TP3
Exemple pour le tp3.

N'oubliez pas que les éléments form, input et autres comportent des règles d'utilisation que vous devez appliquer (tels que des éléments et des attributs obligatoires comme name, id, etc.). Voir les notes de cours à ce sujet.