Aller au contenu principal

Module HTML.7 – Formulaires (NIVEAU PRO)

Objectif​

Maîtriser les formulaires HTML de niveau professionnel : tous les types d'input, labels, validation HTML5, accessibilité et UX formulaire pour créer des formulaires robustes et accessibles.

Théorie​

Structure de base​

Formulaire minimal :

<form action="/submit" method="post">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">
    <button type="submit">Envoyer</button>
</form>

Attributs du formulaire :

  • action : URL de traitement
  • method : GET ou POST
  • enctype : Type d'encodage (pour fichiers)

Types d'input​

Texte​

<input type="text" id="nom" name="nom" placeholder="Votre nom">
<input type="email" id="email" name="email">
<input type="password" id="mdp" name="mdp">
<input type="tel" id="telephone" name="telephone">
<input type="url" id="site" name="site">
<input type="search" id="recherche" name="recherche">

Numériques​

<input type="number" id="age" name="age" min="0" max="120">
<input type="range" id="volume" name="volume" min="0" max="100">

Dates​

<input type="date" id="naissance" name="naissance">
<input type="time" id="heure" name="heure">
<input type="datetime-local" id="rdv" name="rdv">
<input type="month" id="mois" name="mois">
<input type="week" id="semaine" name="semaine">

Choix​

<!-- Case à cocher -->
<input type="checkbox" id="newsletter" name="newsletter" value="oui">
<label for="newsletter">S'abonner à la newsletter</label>

<!-- Bouton radio -->
<input type="radio" id="homme" name="genre" value="homme">
<label for="homme">Homme</label>
<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label>

Fichiers​

<input type="file" id="fichier" name="fichier" accept="image/*">
<input type="file" id="fichiers" name="fichiers" multiple>

Autres​

<input type="color" id="couleur" name="couleur">
<input type="hidden" name="token" value="abc123">
<input type="submit" value="Envoyer">
<input type="reset" value="Réinitialiser">
<input type="button" value="Bouton">

Labels (obligatoires)​

Méthode 1 : Label explicite

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

Méthode 2 : Label enveloppant

<label>
    Nom :
    <input type="text" name="nom">
</label>

Pourquoi :

  • Accessibilité (screen readers)
  • UX (clic sur label = focus sur input)
  • Obligatoire pour l'accessibilité

Validation HTML5​

Attributs de validation​

required : Champ obligatoire

<input type="text" name="nom" required>

min / max : Valeurs min/max

<input type="number" name="age" min="18" max="100">
<input type="date" name="date" min="2024-01-01">

minlength / maxlength : Longueur

<input type="text" name="nom" minlength="2" maxlength="50">

pattern : Expression régulière

<input type="text" name="code" pattern="[A-Z]{2}[0-9]{4}">

type : Validation automatique

<input type="email" name="email"> <!-- Valide format email -->
<input type="url" name="site"> <!-- Valide format URL -->

Messages d'erreur personnalisés​

<input type="email" name="email" 
       required
       oninvalid="this.setCustomValidity('Veuillez entrer un email valide')"
       oninput="this.setCustomValidity('')">

Groupes de champs​

<fieldset> : Groupe de champs

<fieldset>
    <legend>Informations personnelles</legend>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">
    <label for="email">Email :</label>
    <input type="email" id="email" name="email">
</fieldset>

<legend> : Titre du groupe

Textarea​

<label for="message">Message :</label>
<textarea id="message" name="message" rows="5" cols="50"></textarea>

Attributs :

  • rows : Nombre de lignes
  • cols : Nombre de colonnes (préférer CSS)
  • maxlength : Longueur maximale

Select​

<label for="pays">Pays :</label>
<select id="pays" name="pays">
    <option value="">Choisir un pays</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
</select>

Select multiple :

<select id="langues" name="langues" multiple>
    <option value="fr">Français</option>
    <option value="en">Anglais</option>
    <option value="es">Espagnol</option>
</select>

Groupes d'options :

<select id="ville" name="ville">
    <optgroup label="France">
        <option value="paris">Paris</option>
        <option value="lyon">Lyon</option>
    </optgroup>
    <optgroup label="Belgique">
        <option value="bruxelles">Bruxelles</option>
    </optgroup>
</select>

Accessibilité​

Bonnes pratiques :

  1. Labels obligatoires
  2. aria-label si label visuel impossible
  3. aria-describedby pour messages d'aide
  4. Navigation clavier
  5. Messages d'erreur accessibles

Exemple accessible :

<label for="email">Email :</label>
<input type="email" 
       id="email" 
       name="email" 
       required
       aria-describedby="email-help email-error">
<span id="email-help">Nous ne partagerons jamais votre email</span>
<span id="email-error" role="alert"></span>

UX Formulaire​

Bonnes pratiques :

  1. Ordre logique des champs
  2. Groupes visuels (<fieldset>)
  3. Placeholders informatifs
  4. Messages d'erreur clairs
  5. Bouton submit visible
  6. Indication des champs obligatoires (* ou required)
  7. Feedback immédiat (validation en temps réel)

Exemple UX optimisé :

<form>
    <fieldset>
        <legend>Informations personnelles <span aria-label="obligatoire">*</span></legend>
        
        <div>
            <label for="nom">Nom <span aria-label="obligatoire">*</span></label>
            <input type="text" id="nom" name="nom" required aria-describedby="nom-help">
            <small id="nom-help">Minimum 2 caractères</small>
        </div>
        
        <div>
            <label for="email">Email <span aria-label="obligatoire">*</span></label>
            <input type="email" id="email" name="email" required>
        </div>
    </fieldset>
    
    <button type="submit">Envoyer</button>
</form>

Exercices guidés​

Exercice 1 : Formulaire de base​

Créez un formulaire avec :

  • Nom (texte, required)
  • Email (email, required)
  • Message (textarea)
  • Bouton submit

Exercice 2 : Validation HTML5​

Créez un formulaire avec :

  • Validation par type (email, url, tel)
  • Validation par pattern (code postal)
  • Validation par min/max (âge)
  • Messages d'erreur personnalisés

Exercice 3 : Formulaires complexes​

Créez un formulaire avec :

  • Checkboxes (choix multiples)
  • Radio buttons (choix unique)
  • Select avec groupes
  • File upload

Exercice 4 : Accessibilité​

Créez un formulaire accessible avec :

  • Labels explicites
  • aria-describedby pour l'aide
  • fieldset et legend
  • Navigation clavier

Exercice 5 : UX optimisée​

Créez un formulaire avec :

  • Groupes visuels
  • Indication des champs obligatoires
  • Placeholders informatifs
  • Feedback visuel

❌ Erreurs fréquentes​

Erreur 1 : Oublier les labels​

❌ Mauvais :

<input type="text" name="nom" placeholder="Nom">

✅ Bon :

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

Pourquoi : Obligatoire pour l'accessibilité.

Erreur 2 : Utiliser placeholder comme label​

❌ Mauvais :

<input type="text" name="nom" placeholder="Nom">

✅ Bon :

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Ex: Jean Dupont">

Pourquoi : Le placeholder disparaît, le label reste.

Erreur 3 : Pas de validation​

❌ Mauvais :

<input type="email" name="email">

✅ Bon :

<input type="email" name="email" required>

Pourquoi : Validation côté client = meilleure UX.

Erreur 4 : Formulaires non groupés​

❌ Mauvais :

<input type="text" name="nom">
<input type="text" name="prenom">
<input type="email" name="email">

✅ Bon :

<fieldset>
    <legend>Informations personnelles</legend>
    <input type="text" name="nom">
    <input type="text" name="prenom">
    <input type="email" name="email">
</fieldset>

Pourquoi : Meilleure organisation et accessibilité.

Erreur 5 : Pas de feedback​

❌ Mauvais :

<input type="email" name="email" required>
<!-- Pas de message d'erreur -->

✅ Bon :

<input type="email" name="email" required aria-describedby="email-error">
<span id="email-error" role="alert"></span>

Pourquoi : L'utilisateur doit savoir pourquoi c'est invalide.

🚀 Mini-projet​

Mission : Créer un formulaire de contact professionnel

Créez un fichier contact.html avec un formulaire complet :

Champs :

  1. Nom (texte, required, minlength 2)
  2. Prénom (texte, required)
  3. Email (email, required)
  4. Téléphone (tel, pattern)
  5. Sujet (select avec options)
  6. Message (textarea, required, minlength 10)
  7. Newsletter (checkbox)
  8. RGPD (checkbox, required)

Fonctionnalités :

  • Validation HTML5 complète
  • Groupes de champs (fieldset)
  • Labels accessibles
  • Messages d'aide (aria-describedby)
  • Indication des champs obligatoires
  • Bouton submit

Critères :

  • ✅ Tous les champs ont des labels
  • ✅ Validation HTML5 appropriée
  • ✅ Accessibilité complète
  • ✅ UX optimisée
  • ✅ Structure sémantique

Objectif : Créer un formulaire professionnel, accessible et avec une excellente UX.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les formulaires HTML de niveau professionnel et avez créé un formulaire complet et accessible.