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.

Workflow Git

Avant de commencer cet exercice :

1
2
3
4
5
git checkout main
git pull origin main
git checkout -b exercice-4
mkdir -p exercice-4/images
cd 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
1
2
3
4
5
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 origin exercice-4

Création de la Pull Request

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Compare & pull request"
  3. Titre de la PR : feat(exercice-4): formulaire de commande

  4. Remplissez la description de la PR :

     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
    ## 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

![Formulaire commande](URL_de_votre_capture)

#### Détail des images de produits

![Images produits](URL_de_votre_capture)

#### Effet hover sur le bouton

![Bouton hover](URL_de_votre_capture)

#### Formulaire rempli (exemple)

![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

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

  6. Cliquez sur "Create pull request"
  7. 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)