📋 Partie 1

Introduction aux formulaires

Pourquoi et comment ?

Qu'est-ce qu'un formulaire ? 📋

Exemples d'utilisation :

• 🔐 Connexion / Inscription
• 🔍 Recherche sur un site
• 💬 Formulaires de contact
• 🛒 Commandes en ligne
• 📊 Sondages et questionnaires

Le cycle de vie d'un formulaire

La balise <form>

C'est le conteneur principal de tous les éléments du formulaire

<form action="traitement.php" method="POST">
    <!-- Tous les champs du formulaire ici -->
</form>

GET vs POST : Quelle différence ? 🤔

Quand utiliser GET ou POST ?

🏗️ Partie 2

Les balises de base

Input et Label

La balise <input> 📝

<input type="text" name="prenom" id="prenom">

Attributs essentiels :

• type : définit le type de champ (text, email, password...)
• name : nom du champ (pour PHP/serveur) ⚠️ OBLIGATOIRE
• id : identifiant unique (pour le label et CSS)

La balise <label> 🏷️

<!-- Méthode 1 : avec l'attribut for -->
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">

<!-- Méthode 2 : imbrication -->
<label>
    Prénom :
    <input type="text" name="prenom">
</label>

Pourquoi le <label> est crucial ? ♿

Avantages :

• ♿ Accessibilité : Les lecteurs d'écran peuvent annoncer le champ
• 🖱️ UX améliorée : Zone cliquable plus grande
• 📱 Mobile-friendly : Plus facile de toucher le label
• ✅ Validation : Aide à comprendre les erreurs

Exemple complet Input + Label

<form action="inscription.php" method="POST">
    <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
    </div>
    
    <div>
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <button type="submit">S'inscrire</button>
</form>

📝 Partie 3

Les types d'input

Une richesse de possibilités

Input type="text" ✏️

Le champ texte classique pour texte court

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" 
       placeholder="Entrez votre nom"
       maxlength="50">

Input type="email" 📧

Validation automatique du format email

<label for="email">Email :</label>
<input type="email" id="email" name="email" 
       placeholder="exemple@email.com"
       required>

Input type="password" 🔒

Masque automatiquement les caractères saisis

<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password"
       minlength="8"
       required>

Input type="number" 🔢

Pour les valeurs numériques uniquement

<label for="age">Âge :</label>
<input type="number" id="age" name="age"
       min="18" 
       max="120"
       step="1">

Input type="date" 📅

Sélecteur de date intégré au navigateur

<label for="naissance">Date de naissance :</label>
<input type="date" id="naissance" name="naissance"
       min="1900-01-01" 
       max="2024-12-31">

Input type="time" ⏰

Sélecteur d'heure

<label for="heure">Heure de rendez-vous :</label>
<input type="time" id="heure" name="heure"
       min="09:00" 
       max="18:00">

Input type="tel" 📱

Pour les numéros de téléphone (affiche clavier numérique sur mobile)

<label for="tel">Téléphone :</label>
<input type="tel" id="tel" name="tel"
       pattern="[0-9]{10}"
       placeholder="0612345678">

Input type="url" 🌐

Validation automatique du format URL

<label for="site">Site web :</label>
<input type="url" id="site" name="site"
       placeholder="https://example.com">

Input type="color" 🎨

Sélecteur de couleur intégré

<label for="couleur">Couleur préférée :</label>
<input type="color" id="couleur" name="couleur"
       value="#42affa">

Input type="range" 🎚️

Curseur pour sélectionner une valeur dans une plage

<label for="volume">Volume :</label>
<input type="range" id="volume" name="volume"
       min="0" max="100" value="50" step="10">

Input type="file" 📎

Pour télécharger des fichiers

<label for="cv">CV (PDF uniquement) :</label>
<input type="file" id="cv" name="cv"
       accept=".pdf"
       required>

<!-- Fichiers multiples -->
<input type="file" name="photos" 
       accept="image/*" 
       multiple>

Input type="checkbox" ☑️

Cases à cocher (sélection multiple)

<label>
    <input type="checkbox" name="newsletter" value="oui">
    Je souhaite recevoir la newsletter
</label>

<!-- Groupe de checkboxes -->
<p>Langages maîtrisés :</p>
<label>
    <input type="checkbox" name="langages[]" value="html"> HTML
</label>
<label>
    <input type="checkbox" name="langages[]" value="css"> CSS
</label>
<label>
    <input type="checkbox" name="langages[]" value="js"> JavaScript
</label>

Input type="radio" 🔘

Boutons radio (un seul choix parmi plusieurs)

<p>Civilité :</p>
<label>
    <input type="radio" name="civilite" value="mr" checked> M.
</label>
<label>
    <input type="radio" name="civilite" value="mme"> Mme
</label>
<label>
    <input type="radio" name="civilite" value="autre"> Autre
</label>

Input type="hidden" 👻

Champ caché (non visible par l'utilisateur)

<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="token" value="abc123xyz">

Récapitulatif des types d'input

🎨 Partie 4

Autres éléments de formulaire

Textarea, Select, Button

<textarea> - Texte multiligne 📝

Pour les textes longs (commentaires, descriptions...)

<label for="message">Votre message :</label>
<textarea id="message" name="message" 
          rows="5" 
          cols="40"
          placeholder="Écrivez votre message ici..."
          maxlength="500"></textarea>

<select> - Liste déroulante 📋

Menu déroulant pour sélectionner une option

<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
    <option value="">-- Sélectionnez un pays --</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
    <option value="ca">Canada</option>
</select>

<select> avec <optgroup> 📂

Regrouper les options par catégories

<label for="ville">Ville :</label>
<select id="ville" name="ville">
    <optgroup label="Île-de-France">
        <option value="paris">Paris</option>
        <option value="versailles">Versailles</option>
    </optgroup>
    <optgroup label="Provence">
        <option value="marseille">Marseille</option>
        <option value="nice">Nice</option>
    </optgroup>
</select>

<select multiple> - Sélection multiple

<label for="competences">Compétences :</label>
<select id="competences" name="competences[]" multiple size="5">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="php">PHP</option>
    <option value="sql">SQL</option>
</select>

<button> - Boutons 🔘

<!-- Bouton de soumission -->
<button type="submit">Envoyer</button>

<!-- Bouton de réinitialisation -->
<button type="reset">Réinitialiser</button>

<!-- Bouton neutre (nécessite JavaScript) -->
<button type="button" onclick="maFonction()">Action</button>

<button> vs <input type="submit">

<!-- Ancienne méthode -->
<input type="submit" value="Envoyer">

<!-- Méthode moderne (recommandée) -->
<button type="submit">
    ✉️ Envoyer le message
</button>

<fieldset> et <legend> 📦

Regrouper des champs liés visuellement et sémantiquement

<fieldset>
    <legend>Informations personnelles</legend>
    
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">
    
    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" name="prenom">
</fieldset>

<fieldset>
    <legend>Coordonnées</legend>
    
    <label for="email">Email :</label>
    <input type="email" id="email" name="email">
</fieldset>

<datalist> - Autocomplétion 💡

Suggestions tout en permettant la saisie libre

<label for="navigateur">Navigateur préféré :</label>
<input type="text" id="navigateur" name="navigateur" 
       list="navigateurs">

<datalist id="navigateurs">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

✅ Partie 5

Validation HTML5

Contrôler les données avant envoi

Pourquoi valider les formulaires ? 🛡️

Objectifs :

• 🛡️ Sécurité : Empêcher les données malveillantes
• ✅ Qualité : Garantir des données exploitables
• 😊 UX : Guider l'utilisateur en temps réel
• ⚡ Performance : Éviter des allers-retours serveur inutiles

Deux niveaux de validation

L'attribut required ⭐

Rend un champ obligatoire

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

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

<button type="submit">Envoyer</button>

L'attribut pattern 🔍

Validation avec expression régulière (regex)

<!-- Code postal français (5 chiffres) -->
<input type="text" name="code_postal" 
       pattern="[0-9]{5}"
       title="5 chiffres requis">

<!-- Téléphone français -->
<input type="tel" name="telephone" 
       pattern="0[1-9][0-9]{8}"
       title="Format : 0612345678">

Regex courantes utiles 📋

min, max, minlength, maxlength

<!-- Longueur de texte -->
<input type="text" name="username" 
       minlength="3" maxlength="20">

<!-- Valeurs numériques -->
<input type="number" name="age" 
       min="18" max="120">

<!-- Dates -->
<input type="date" name="date"
       min="1900-01-01" max="2024-12-31">

L'attribut step

Définit l'incrément pour les champs numériques

<!-- Nombres entiers -->
<input type="number" name="quantite" 
       min="1" max="100" step="1">

<!-- Décimales (prix) -->
<input type="number" name="prix" 
       min="0" step="0.01">

<!-- Multiples de 5 -->
<input type="number" name="age" 
       min="18" step="5">

Désactiver la validation HTML5

<!-- Sur le formulaire entier -->
<form action="traitement.php" method="POST" novalidate>
    <!-- Tous les champs ici -->
</form>

<!-- Sur un bouton de soumission spécifique -->
<button type="submit" formnovalidate>
    Enregistrer le brouillon
</button>

Messages de validation personnalisés

Avec JavaScript (setCustomValidity)

<form id="monForm">
    <input type="password" id="pass1" required>
    <input type="password" id="pass2" required>
    <button type="submit">Valider</button>
</form>

<script>
const pass2 = document.getElementById('pass2');

pass2.addEventListener('input', function() {
    if (pass2.value !== document.getElementById('pass1').value) {
        pass2.setCustomValidity('Les mots de passe ne correspondent pas');
    } else {
        pass2.setCustomValidity('');
    }
});
</script>

♿ Partie 6

Accessibilité

Des formulaires pour tous

Pourquoi l'accessibilité ? ♿

Qui est concerné ?

• 👁️ Personnes aveugles/malvoyantes (lecteurs d'écran)
• 🖱️ Handicap moteur (navigation clavier)
• 🧠 Troubles cognitifs

Règle n°1 : Toujours utiliser <label> 🏷️

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

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

Pourquoi ? Les lecteurs d'écran annoncent le label associé

Attribut aria-label pour cas spéciaux

Quand un label visuel n'est pas possible

<!-- Bouton de recherche avec icône uniquement -->
<button type="submit" aria-label="Rechercher">
    🔍
</button>

<!-- Champ avec icône mais sans texte -->
<input type="search" 
       name="recherche" 
       aria-label="Rechercher sur le site"
       placeholder="Recherche...">

Grouper les champs liés avec <fieldset>

<fieldset>
    <legend>Civilité</legend>
    <label><input type="radio" name="civilite" value="mr"> M.</label>
    <label><input type="radio" name="civilite" value="mme"> Mme</label>
</fieldset>

<fieldset>
    <legend>Compétences</legend>
    <label><input type="checkbox" name="comp[]" value="html"> HTML</label>
    <label><input type="checkbox" name="comp[]" value="css"> CSS</label>
</fieldset>

Pourquoi ? Le lecteur d'écran annonce : "Civilité, groupe, M., bouton radio"

Messages d'erreur accessibles

<label for="email">Email :</label>
<input type="email" 
       id="email" 
       name="email"
       aria-describedby="email-error"
       aria-invalid="true">
<p id="email-error" class="error" role="alert">
    ⚠️ Veuillez entrer une adresse email valide
</p>

Navigation au clavier ⌨️

Règles essentielles :

• ✅ Tous les champs doivent être accessibles avec Tab
• ✅ L'ordre de tabulation doit être logique
• ✅ Le focus doit être visible (outline CSS)
• ✅ Les boutons activables avec Espace ou Entrée

/* Ceci rend la navigation impossible ! */
*:focus { outline: none; }

Ordre de tabulation : tabindex

<!-- tabindex="0" : ordre naturel -->
<div tabindex="0">Élément focusable</div>

<!-- tabindex="-1" : non dans l'ordre, mais focusable en JS -->
<div tabindex="-1">Pas dans la navigation</div>

<!-- tabindex > 0 : À ÉVITER (anti-pattern) -->
<input tabindex="1"> <!-- ❌ Ne pas utiliser -->

Champs requis : indication visuelle ET programmatique

<label for="nom">
    Nom <span class="required" aria-label="obligatoire">*</span>
</label>
<input type="text" 
       id="nom" 
       name="nom" 
       required
       aria-required="true">

Checklist Accessibilité ✅ (1/2)

• ✅ Chaque input a un <label> associé (for + id)
• ✅ Les champs obligatoires ont required
• ✅ Les radio/checkbox sont dans des <fieldset>
• ✅ Les messages d'erreur utilisent aria-describedby

Checklist Accessibilité ✅ (2/2)

• ✅ Le focus est visible (outline CSS)
• ✅ Navigation au clavier fonctionnelle (Tab)
• ✅ Contraste de couleurs suffisant (4.5:1 min)
• ✅ Les placeholder ne remplacent PAS les labels

🎯 Partie 7

Bonnes pratiques

Créer des formulaires professionnels

Organisation du code HTML

<form action="traitement.php" method="POST">
    
    <!-- Groupe 1 -->
    <div class="form-group">
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
    </div>
    
    <!-- Groupe 2 -->
    <div class="form-group">
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <!-- Bouton -->
    <div class="form-group">
        <button type="submit">Envoyer</button>
    </div>
    
</form>

Nommage des champs

name="prenom"
name="date_naissance"
name="code_postal"
name="competences[]"  <!-- Pour tableaux -->

name="p"  <!-- Trop court -->
name="firstName"  <!-- camelCase peu standard en PHP -->
name="competences"  <!-- Sans [] pour checkbox multiples -->

Placeholder vs Label

<!-- MAUVAIS -->
<input type="text" name="nom" placeholder="Votre nom">

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

Pourquoi ? Le placeholder disparaît à la saisie et n'est pas lu par les lecteurs d'écran

Valeurs par défaut pertinentes

<!-- Pays par défaut -->
<select name="pays">
    <option value="fr" selected>France</option>
    <option value="be">Belgique</option>
</select>

<!-- Date du jour -->
<input type="date" name="date" 
       value="<?= date('Y-m-d') ?>">

<!-- Case cochée par défaut -->
<input type="checkbox" name="newsletter" checked>

<!-- Radio présélectionné -->
<input type="radio" name="civilite" value="mr" checked>

Autocomplete pour faciliter la saisie

<input type="text" name="nom" 
       autocomplete="family-name">
<input type="text" name="prenom" 
       autocomplete="given-name">
<input type="email" name="email" 
       autocomplete="email">
<input type="tel" name="tel" 
       autocomplete="tel">
<input type="text" name="adresse" 
       autocomplete="street-address">

Protection CSRF (sécurité)

Token CSRF pour empêcher les attaques Cross-Site Request Forgery

<form action="traitement.php" method="POST">
    
    <!-- Token de sécurité -->
    <input type="hidden" 
           name="csrf_token" 
           value="<?= $_SESSION['csrf_token'] ?>">
    
    <!-- Reste du formulaire -->
    <input type="email" name="email">
    <button type="submit">Envoyer</button>
    
</form>

Upload de fichiers : configuration

<!-- IMPORTANT : enctype pour les fichiers -->
<form action="upload.php" 
      method="POST" 
      enctype="multipart/form-data">
    
    <label for="cv">CV (PDF, max 2 Mo) :</label>
    <input type="file" 
           id="cv" 
           name="cv"
           accept=".pdf"
           required>
    
    <!-- Multiples fichiers -->
    <label for="photos">Photos :</label>
    <input type="file" 
           id="photos" 
           name="photos[]"
           accept="image/*"
           multiple>
    
    <button type="submit">Envoyer</button>
</form>

Exemple complet : Formulaire de contact

<form action="contact.php" method="POST" class="contact-form">
    
    <fieldset>
        <legend>Vos informations</legend>
        
        <div class="form-group">
            <label for="nom">Nom * :</label>
            <input type="text" id="nom" name="nom" 
                   required autocomplete="family-name">
        </div>
        
        <div class="form-group">
            <label for="email">Email * :</label>
            <input type="email" id="email" name="email" 
                   required autocomplete="email">
        </div>
        
        <div class="form-group">
            <label for="tel">Téléphone :</label>
            <input type="tel" id="tel" name="tel"
                   pattern="0[1-9][0-9]{8}"
                   placeholder="0612345678">
        </div>
    </fieldset>

Exemple complet : Suite

    <fieldset>
        <legend>Votre message</legend>
        
        <div class="form-group">
            <label for="sujet">Sujet * :</label>
            <select id="sujet" name="sujet" required>
                <option value="">-- Choisir --</option>
                <option value="info">Demande d'information</option>
                <option value="support">Support technique</option>
                <option value="autre">Autre</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="message">Message * :</label>
            <textarea id="message" name="message" 
                      rows="6" required
                      minlength="10" maxlength="500"></textarea>
        </div>
    </fieldset>

Exemple complet : Fin

    <div class="form-group">
        <label>
            <input type="checkbox" name="rgpd" required>
            J'accepte la politique de confidentialité *
        </label>
    </div>
    
    <input type="hidden" name="csrf_token" 
           value="<?= $_SESSION['csrf_token'] ?>">
    
    <div class="form-group">
        <button type="submit">✉️ Envoyer le message</button>
        <button type="reset">🔄 Réinitialiser</button>
    </div>
    
</form>

Récapitulatif 🎯

Ce que vous maîtrisez maintenant :

• ✅ Structure d'un formulaire (form, action, method)
• ✅ Tous les types d'input et leurs usages
• ✅ Éléments complémentaires (textarea, select, button)
• ✅ Validation HTML5 (required, pattern, min/max)
• ✅ Accessibilité (label, aria, fieldset)
• ✅ Bonnes pratiques professionnelles

Points clés à retenir 💡

GET vs POST : Récap

Types d'input : Récap

Ressources pour pratiquer 📚

• 📖 MDN Web Docs : developer.mozilla.org/fr/docs/Web/HTML/Element/form
• 🎯 W3Schools : w3schools.com/html/html_forms.asp
• ♿ WebAIM : webaim.org/techniques/forms/
• 🔧 Can I Use : caniuse.com (compatibilité)
• 🎨 HTML5 Pattern : html5pattern.com (regex)

Prochaines étapes 🚀

• 📱 Styliser avec CSS : Rendre vos formulaires beaux
• ⚡ JavaScript : Validation avancée, messages dynamiques
• 🐘 PHP : Traiter les données côté serveur
• 🗄️ Base de données : Stocker les informations
• 🔐 Sécurité : Protection contre les attaques (XSS, CSRF, SQL Injection)