Aller au contenu

Exercice 4 : Formulaire de commande

Objectif

Créer un formulaire HTML complet avec validation, intégration d'images et stylisation CSS pour comprendre les éléments de formulaire, leur agencement et leur présentation visuelle.

Création du dossier de l'exercice

Avant de commencer cet exercice : créer le dossier de l'exercice.

1
2
# sous Git bash
mkdir -p exercice-4

Avec VS Code :

  • Ctrl+Shift+P > Create Folder
  • Ou sélectionnez le dossier parent dans l'explorateur de fichiers puis entrez le nom du nouveau dossier : exercice-4
  • Ou faites un clic droit sur le dossier parent > New Folder > entrez le nom : exercice-4
  • Ou File > New Folder > entrez le nom : exercice-4

Créer un formulaire de commande en ligne pour un site de vente de produits. Ce formulaire doit permettre à l'utilisateur de sélectionner des produits, de fournir des informations de livraison et de soumettre la commande.

1. Créer la structure du formulaire

  • Créez un fichier HTML nommé commande.html.
  • Le formulaire doit contenir les champs suivants:
    • Nom du client (champ de texte)
    • Adresse de livraison (zone de texte)
    • Email (champ de texte)
    • Sélectionner un produit (menu déroulant):
      • Produit A
      • Produit B
      • Produit C
    • Quantité (champ de texte)
    • Méthode de paiement (boutons radio):
      • Carte de crédit
      • PayPal
      • Virement bancaire
    • Zone pour des instructions supplémentaires (zone de texte)
    • Un bouton pour soumettre le formulaire.

2. Ajouter une image de produit

  • Ajoutez une image pour chaque produit dans le formulaire. Utilisez une disposition qui montre une image à côté de la sélection du produit.

3. Styliser le formulaire avec CSS

  • Créez un fichier CSS nommé commande-styles.css.

  • Appliquez les styles suivants :

    • Couleurs et polices pour les labels et le texte.
    • Styles pour les champs de saisie, les menus déroulants et les boutons.
    • Ajustez le formulaire pour qu'il soit centré sur la page.
    • Ajouter un effet de survol sur le bouton de soumission.

4. Livraison de l'exercice

Checklist avant de soumettre

  • Fichiers : exercice-4/commande.html, exercice-4/commande-styles.css
  • Dossier images avec 3 produits : exercice-4/images/
  • Tous les champs requis présents (nom, adresse, email, produit, quantité, paiement)
  • Images de produits intégrées
  • Formulaire centré et stylisé
  • Effet hover sur le bouton

Ouvrez le terminal intégré Ctrl+'

1
2
3
4
5
6
git status
git add .
git commit -m "feat(exercice-4): formulaire commande HTML complet"
# git commit -m "feat(exercice-4): ajout images produits"
# git commit -m "style(exercice-4): CSS formulaire et bouton hover"
git push

Dans VS Code, utilisez l'interface graphique pour ajouter, committer et pousser vos changements:

  1. Cliquez sur l'icône "Source Control" dans la barre latérale
  2. Ajoutez vos changements en cliquant sur le signe "+"
  3. Commitez vos changements en saisissant un message de commit
  4. Poussez vos changements en cliquant sur l'icône "Push"

Ajout de captures d'écran dans la PR Feedback

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Pull requests" > Ouvrir une pull request "Feedback"

  3. Ajoutez un commentaire dans la PR avec le texte suivant :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
    ## Exercice 4 : Formulaire de commande

### Ce qui a été réalisé

- [x] Création de `exercice-4/commande.html`
- [x] Création de `exercice-4/commande-styles.css`
- [x] Dossier `exercice-4/images/` avec 3 images de produits
- [x] Formulaire avec tous les champs requis :
- Nom du client (input text)
- Adresse de livraison (textarea)
- Email (input email)
- Sélection produit (select avec 3 options)
- Quantité (input number ou text)
- Méthode de paiement (radio buttons : CB, PayPal, Virement)
- Instructions supplémentaires (textarea)
- [x] Images de produits intégrées à côté de la sélection
- [x] Bouton de soumission
- [x] CSS : couleurs, polices, styles des champs
- [x] Formulaire centré sur la page
- [x] Effet hover sur le bouton de soumission

### Captures d'écran

#### Vue complète du formulaire

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Formulaire commande](URL_de_votre_capture)

#### Détail des images de produits

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Images produits](URL_de_votre_capture)

#### Effet hover sur le bouton

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Bouton hover](URL_de_votre_capture)

#### Formulaire rempli (exemple)

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Formulaire rempli](URL_de_votre_capture)

### Points techniques

- HTML : `<form>`, `<input>`, `<select>`, `<textarea>`, radio buttons
- Images : intégration avec `<img>` à côté du select
- CSS : layout centré, styles des inputs, bouton avec :hover
- Validation HTML5 : attributs required, type="email", etc.

### Questions pour l'enseignant

- (optionnel) Listez vos questions ici

  4. Ajoutez vos captures d'écran en glissant-déposant les images dans le champ de description

  5. Cliquez sur "Create pull request"
  6. N'oubliez pas : Ne cliquez PAS sur "Merge pull request" !

Captures d'écran à inclure dans votre PR

  • Vue complète du formulaire
  • Détail des images de produits
  • Effet hover sur le bouton de soumission
  • Formulaire rempli (exemple)

13. Evaluation

Pour lancer l'évaluation automatique, créez une "tag" sur votre branche main avec le nom exercice4 et poussez-la sur GitHub.

1
git tag exercice4 && git push origin exercice4

Voir Classroom50

Vous trouverez un exemple de commande pour créer la "tag" dans la page du devoir du TP (Assignment) sur Classroom50.