Exercice 0 : Formulaire d'inscription (HTML uniquement)¶

1
2
3
4
5

git checkout main
git pull origin main
git checkout -b exercice-0
mkdir exercice-0
cd exercice-0

Contexte¶

Vous devez créer un formulaire d'inscription complet pour une plateforme éducative en ligne. Ce formulaire doit collecter toutes les informations nécessaires pour créer un compte étudiant.

Introduction : <fieldset> et <legend>¶

Qu'est-ce qu'un <fieldset> ?¶

Un <fieldset> est une balise HTML qui permet de regrouper logiquement des champs de formulaire qui sont liés entre eux. Il crée une bordure visuelle autour du groupe de champs.

Syntaxe :

1
2
3

<fieldset>
  <!-- Vos champs de formulaire ici -->
</fieldset>

Qu'est-ce qu'une <legend> ?¶

Une <legend> est le titre d'un <fieldset>. Elle décrit le groupe de champs et s'affiche généralement en haut de la bordure du fieldset.

Syntaxe :

1
2
3
4

<fieldset>
  <legend>Titre de la section</legend>
  <!-- Vos champs de formulaire ici -->
</fieldset>

Exemple complet¶

Voici un exemple concret d'utilisation de <fieldset> et <legend> :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<form>
  <fieldset>
    <legend>Informations de contact</legend>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <label for="phone">Téléphone :</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>

  <fieldset>
    <legend>Adresse</legend>

    <label for="street">Rue :</label>
    <input type="text" id="street" name="street">

    <label for="city">Ville :</label>
    <input type="text" id="city" name="city">
  </fieldset>
</form>

Résultat visuel¶

Le navigateur affichera :

1
2
3
4
5
6
7
8
9

┌─ Informations de contact ──────────────┐
│ Email : [____________]                 │
│ Téléphone : [____________]             │
└────────────────────────────────────────┘

┌─ Adresse ──────────────────────────────┐
│ Rue : [____________]                   │
│ Ville : [____________]                 │
└────────────────────────────────────────┘

Pourquoi utiliser <fieldset> et <legend> ?¶

1. Organisation visuelle : Rend le formulaire plus clair et structuré
2. Accessibilité : Les lecteurs d'écran annoncent le groupe de champs, aidant les utilisateurs malvoyants
3. Sémantique : Indique au navigateur et aux moteurs de recherche la structure logique du formulaire
4. Meilleure UX : L'utilisateur comprend mieux quelles informations sont demandées

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

fieldset {
  border: 2px solid #4CAF50;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

legend {
  font-weight: bold;
  font-size: 1.2em;
  color: #4CAF50;
  padding: 0 10px;
}

1. Structure de base du formulaire¶

• Créez un fichier inscription.html dans le dossier exercice-0.
• Le formulaire doit utiliser la balise <form> avec les attributs suivants :
  • action: /submit-inscription (fictif)
  • method: POST
  • enctype: multipart/form-data (pour l'upload de fichiers)

2. Section : Informations personnelles¶

Créez une première section avec un <fieldset> et une <legend> intitulée "Informations personnelles".

Cette section doit contenir :

• Civilité (boutons radio obligatoires) :
  • M.
  • Mme
  • Autre
• Prénom (champ texte obligatoire, max 50 caractères)
• Nom (champ texte obligatoire, max 50 caractères)
• Date de naissance (champ de type date, obligatoire)
• Lieu de naissance (champ texte, max 100 caractères)

 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

<fieldset>
  <legend>Informations personnelles</legend>

  <!-- Civilité avec boutons radio -->
  <div>
    <label>Civilité * :</label>
    <input type="radio" id="civilite-m" name="civilite" value="M" required>
    <label for="civilite-m">M.</label>

    <input type="radio" id="civilite-mme" name="civilite" value="Mme" required>
    <label for="civilite-mme">Mme</label>

    <input type="radio" id="civilite-autre" name="civilite" value="Autre" required>
    <label for="civilite-autre">Autre</label>
  </div>

  <!-- Prénom -->
  <div>
    <label for="prenom">Prénom * :</label>
    <input type="text" id="prenom" name="prenom" maxlength="50" required>
  </div>

  <!-- Nom -->
  <div>
    <label for="nom">Nom * :</label>
    <input type="text" id="nom" name="nom" maxlength="50" required>
  </div>

  <!-- Date de naissance -->
  <div>
    <label for="date-naissance">Date de naissance * :</label>
    <input type="date" id="date-naissance" name="date_naissance" max="2010-01-01" required>
  </div>

  <!-- Lieu de naissance -->
  <div>
    <label for="lieu-naissance">Lieu de naissance :</label>
    <input type="text" id="lieu-naissance" name="lieu_naissance" maxlength="100">
  </div>
</fieldset>

3. Section : Coordonnées¶

Créez une deuxième section avec un <fieldset> et une <legend> intitulée "Coordonnées".

Cette section doit contenir :

• Adresse email (champ email obligatoire avec validation)
• Téléphone (champ tel avec pattern français : pattern="0[1-9][0-9]{8}")
• Adresse postale (zone de texte sur 3 lignes, obligatoire)
• Code postal (champ texte, pattern 5 chiffres : pattern="[0-9]{5}")
• Ville (champ texte obligatoire)
• Pays (liste déroulante avec au moins 5 pays, France sélectionnée par défaut)

4. Section : Formation¶

Créez une troisième section avec un <fieldset> et une <legend> intitulée "Formation".

Cette section doit contenir :

• Niveau d'études (liste déroulante obligatoire) :
  • Bac
  • Bac +2
  • Bac +3
  • Bac +5
  • Doctorat
• Domaine d'études (liste déroulante obligatoire) :
  • Informatique
  • Mathématiques
  • Physique
  • Électronique
  • Autre
• Établissement actuel (champ texte, max 100 caractères)
• Année d'obtention du diplôme (champ number, min 1950, max 2030)

5. Section : Préférences de cours¶

Créez une quatrième section avec un <fieldset> et une <legend> intitulée "Préférences de cours".

Cette section doit contenir :

• Cours souhaités (cases à cocher multiples, au moins 3 choix) :
  • Développement Web
  • Développement Mobile
  • Intelligence Artificielle
  • Cybersécurité
  • Base de données
  • Cloud Computing
• Niveau souhaité (boutons radio) :
  • Débutant
  • Intermédiaire
  • Avancé
• Disponibilité (sélection multiple avec <select multiple>) :
  • Lundi
  • Mardi
  • Mercredi
  • Jeudi
  • Vendredi
  • Samedi
  • Dimanche

6. Section : Documents¶

Créez une cinquième section avec un <fieldset> et une <legend> intitulée "Documents".

Cette section doit contenir :

• Photo d'identité (champ file, accepte uniquement jpg, jpeg, png, max 2MB)
  • Utilisez : accept="image/jpeg,image/png"
• CV (champ file, accepte uniquement PDF)
  • Utilisez : accept="application/pdf"
• Lettre de motivation (zone de texte, 10 lignes minimum, avec placeholder explicatif)

7. Section : Validation et conditions¶

Créez une dernière section avec :

• Mot de passe (champ password obligatoire, min 8 caractères)
  • Ajoutez un attribut minlength="8"
  • Ajoutez un pattern pour exiger au moins une majuscule, une minuscule et un chiffre
• Confirmation mot de passe (champ password obligatoire)
• Acceptation des conditions (case à cocher obligatoire) :
  • "J'accepte les conditions générales d'utilisation"
  • Lien vers les CGU (fictif : #cgu)
• Newsletter (case à cocher optionnelle) :
  • "Je souhaite recevoir la newsletter hebdomadaire"
• Commentaires supplémentaires (zone de texte optionnelle, 5 lignes)

8. Boutons d'action¶

En dehors de tous les fieldsets, ajoutez :

• Un bouton Soumettre de type submit avec la classe primary
• Un bouton Réinitialiser de type reset
• Un bouton Sauvegarder le brouillon de type button (non fonctionnel pour cet exercice)

9. Accessibilité et conseils pratiques¶

Assurez-vous que votre formulaire respecte les critères suivants :

• Chaque <input>, <select>, et <textarea> a un <label> associé (avec for et id)
• Les champs obligatoires ont l'attribut required
• Les groupes de boutons radio ont le même attribut name
• Utilisation de placeholder pour guider l'utilisateur
• Utilisation de autocomplete approprié (ex: autocomplete="email" pour l'email)
• Ajout d'attributs aria-describedby pour les champs avec instructions
• Structure sémantique avec <fieldset> et <legend>

10. Validation HTML5¶

Utilisez les attributs de validation HTML5 suivants :

11. Tests à effectuer¶

Avant de soumettre, testez votre formulaire :

• Essayez de soumettre sans remplir les champs obligatoires
• Testez la validation de l'email (entrez un email invalide)
• Testez la validation du téléphone (numéro français uniquement)
• Testez la validation du code postal (5 chiffres)
• Testez le pattern du mot de passe
• Vérifiez que les boutons radio fonctionnent (un seul sélectionnable par groupe)
• Vérifiez que les cases à cocher multiples fonctionnent
• Testez le select multiple (Ctrl+clic pour sélectionner plusieurs jours)
• Testez l'upload de fichiers (essayez un type non autorisé)

12. Livraison de l'exercice¶

1
2
3

git add .
git commit -m "feat(exercice-0): formulaire inscription HTML complet"
git push origin exercice-0