Aller au contenu

Séance 3 : Formulaires HTML

🎯 Objectifs de la séance

À la fin de cette séance, vous serez capable de :

  • Créer des formulaires HTML fonctionnels
  • Utiliser différents types d'inputs et leurs attributs
  • Implémenter la validation côté client
  • Structurer un formulaire accessible

📚 Partie théorique

3.1 Introduction aux formulaires

Les formulaires permettent aux utilisateurs d'interagir avec un site web en envoyant des données.

Structure de base

<form action="traitement.php" method="POST">
    <!-- Champs du formulaire -->
    <button type="submit">Envoyer</button>
</form>

Attributs principaux :

  • action : URL où envoyer les données (serveur backend)
  • method : Méthode HTTP
  • GET : Données visibles dans l'URL (recherche, filtres)
  • POST : Données cachées (inscription, mot de passe)

3.2 Les inputs de base

Input texte

<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username">

Pourquoi <label> ?

  • Associe une étiquette à un champ (accessibilité)
  • Cliquer sur le label active le champ
  • for doit correspondre à l'id de l'input

Types d'inputs texte

<!-- Texte simple -->
<input type="text" name="nom">

<!-- E-mail (validation automatique) -->
<input type="email" name="email">

<!-- Mot de passe (caractères masqués) -->
<input type="password" name="mdp">

<!-- Téléphone -->
<input type="tel" name="telephone">

<!-- URL -->
<input type="url" name="site-web">

<!-- Nombre -->
<input type="number" name="age" min="18" max="99">

<!-- Date -->
<input type="date" name="date-naissance">

<!-- Heure -->
<input type="time" name="heure-rdv">

<!-- Recherche -->
<input type="search" name="recherche">

3.3 Attributs importants des inputs

<input 
    type="text" 
    name="pseudo"           <!-- Nom envoyé au serveur -->
    id="pseudo"             <!-- Pour le label -->
    placeholder="Ex: John42" <!-- Texte d'indication -->
    value="Valeur par défaut" <!-- Valeur pré-remplie -->
    required                <!-- Champ obligatoire -->
    minlength="3"           <!-- Longueur minimum -->
    maxlength="20"          <!-- Longueur maximum -->
    pattern="[A-Za-z0-9]+"  <!-- Expression régulière -->
    readonly                <!-- Lecture seule -->
    disabled                <!-- Désactivé (non envoyé) -->
    autofocus               <!-- Focus automatique -->
>

Exemple avec validation

<label for="email">E-mail :</label>
<input 
    type="email" 
    id="email" 
    name="email"
    placeholder="votre@email.com"
    required
>

3.4 Cases à cocher et boutons radio

Checkbox (cases à cocher)

Permet de sélectionner plusieurs options.

<p>Choisissez vos langages :</p>
<input type="checkbox" id="python" name="langages" value="python">
<label for="python">Python</label>

<input type="checkbox" id="java" name="langages" value="java">
<label for="java">Java</label>

<input type="checkbox" id="js" name="langages" value="javascript">
<label for="js">JavaScript</label>

Pré-cocher une case :

<input type="checkbox" id="accepte" name="accepte" checked>
<label for="accepte">J'accepte les conditions</label>

Radio buttons (boutons radio)

Permet de sélectionner une seule option parmi plusieurs.

<p>Niveau d'études :</p>
<input type="radio" id="l1" name="niveau" value="L1">
<label for="l1">Licence 1</label>

<input type="radio" id="l2" name="niveau" value="L2" checked>
<label for="l2">Licence 2</label>

<input type="radio" id="l3" name="niveau" value="L3">
<label for="l3">Licence 3</label>

⚠️ Important : Même name pour grouper les options (une seule sélection possible).

3.5 Zones de texte et listes déroulantes

Textarea (zone de texte multiligne)

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

Select (liste déroulante)

<label for="formation">Formation :</label>
<select id="formation" name="formation">
    <option value="">-- Choisissez --</option>
    <option value="info">Informatique</option>
    <option value="maths">Mathématiques</option>
    <option value="physique" selected>Physique</option>
</select>

Select multiple :

<select id="options" name="options" multiple size="4">
    <option value="opt1">Option 1</option>
    <option value="opt2">Option 2</option>
    <option value="opt3">Option 3</option>
</select>

Grouper les options

<select id="pays" name="pays">
    <optgroup label="Europe">
        <option value="fr">France</option>
        <option value="de">Allemagne</option>
    </optgroup>
    <optgroup label="Asie">
        <option value="jp">Japon</option>
        <option value="cn">Chine</option>
    </optgroup>
</select>

3.6 Boutons

<!-- Bouton de soumission (envoie le formulaire) -->
<button type="submit">Envoyer</button>
<input type="submit" value="Envoyer">

<!-- Bouton de réinitialisation (efface les champs) -->
<button type="reset">Réinitialiser</button>
<input type="reset" value="Effacer">

<!-- Bouton normal (nécessite JavaScript) -->
<button type="button">Cliquez-moi</button>

3.7 Organisation et accessibilité

Fieldset et Legend (grouper des champs)

<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>Identifiants</legend>

    <label for="email">E-mail :</label>
    <input type="email" id="email" name="email">

    <label for="mdp">Mot de passe :</label>
    <input type="password" id="mdp" name="mdp">
</fieldset>

Datalist (auto-complétion)

<label for="navigateur">Votre navigateur :</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>

3.8 Validation HTML5

Attributs de validation

<!-- Champ obligatoire -->
<input type="text" required>

<!-- Longueur -->
<input type="text" minlength="3" maxlength="20">

<!-- Valeurs numériques -->
<input type="number" min="0" max="100" step="5">

<!-- Pattern (regex) -->
<input type="text" pattern="[0-9]{5}" title="Code postal à 5 chiffres">

<!-- E-mail valide -->
<input type="email" required>

Messages d'erreur personnalisés

<input 
    type="text" 
    id="code" 
    pattern="[A-Z]{3}[0-9]{3}"
    title="Format : 3 lettres majuscules + 3 chiffres (ex: ABC123)"
    required
>

💻 Partie pratique

Exercice 4 : Formulaire d'inscription événement tech

📋 Consignes

Créez un fichier inscription.html avec un formulaire d'inscription pour un événement tech (hackathon, conférence, LAN party...).

Le formulaire est modulaire : faites au minimum les sections obligatoires, les sections bonus sont optionnelles si vous avez le temps.

🔴 PARTIE OBLIGATOIRE

Section 1 : Informations personnelles

  • Nom (texte, obligatoire)
  • Prénom (texte, obligatoire)
  • E-mail (e-mail, obligatoire)
  • Date de naissance (date)

Section 2 : Choix de participation

  • Type d'événement (liste déroulance avec options : Hackathon, Conférence, LAN Party, Workshop)
  • Niveau d'expérience (case à cocher avec un seul choix possible parmis: Débutant, Intermédiaire, Avancé)

Section 3 : Centres d'intérêt

  • Technologies (case à cocher avec 5 choix : Web, Mobile, IA, Data, Cloud, Cybersécurité)
  • Commentaires (texte long)

Section 4 : Validation

  • Case à cocher "J'accepte les conditions" (obligatoire)
  • Boutons submit et reset

🟢 PARTIE BONUS

Section 5 : Adresse

  • Adresse complète (texte)
  • Code postal (texte avec pattern pour imposer 5 chiffres)
  • Ville (auto-complétion des villes avec options : Paris, Lyon, Marseille, Toulouse, Bordeaux, Lille)

Exigences techniques

  • [ ] Utiliser <fieldset> et <legend> pour grouper les sections
  • [ ] Tous les champs doivent avoir un <label> associé
  • [ ] Utiliser placeholder pour guider l'utilisateur
  • [ ] Structure HTML valide
  • [ ] Code commenté pour séparer les sections

✅ Checklist de validation

  • [ ] Partie obligatoire complète et fonctionnelle
  • [ ] Tous les labels associés aux inputs
  • [ ] Validation (required) sur les champs importants
  • [ ] Boutons submit et reset présents
  • [ ] Code indenté et commenté

Note : Si vous finissez la partie obligatoire rapidement, essayez d'implémenter les sections bonus !

🔧 Conseils et bonnes pratiques

Structure d'un formulaire accessible

<form>
    <!-- Toujours associer label et input -->
    <label for="champ">Label :</label>
    <input type="text" id="champ" name="champ">

    <!-- Ou envelopper -->
    <label>
        Label :
        <input type="text" name="champ">
    </label>
</form>

Messages d'aide

<label for="mdp">Mot de passe :</label>
<input type="password" id="mdp" name="mdp" required>
<small>Minimum 8 caractères, incluant majuscules et chiffres</small>

📝 À retenir de cette séance

✅ <form> contient tous les champs et définit action et method
✅ Toujours associer <label> et input via for et id
✅ type détermine le comportement de l'input (text, email, password, number, date...)
✅ required, pattern, min/max permettent la validation côté client
✅ <fieldset> et <legend> organisent les sections
✅ Checkbox pour choix multiples, radio pour choix unique
✅ <select> pour listes déroulantes, <textarea> pour texte long
✅ Attribut name est crucial : c'est lui qui est envoyé au serveur

📚 Pour aller plus loin

Documentation

Outils

💬 Questions fréquentes (FAQ)

Q : Quelle différence entre name et id ?
R : id sert à identifier l'élément côté client (CSS, JS, label). name est le nom de la variable envoyée au serveur.

Q : Pourquoi utiliser required si on peut valider côté serveur ?
R : Double sécurité ! La validation HTML améliore l'UX (feedback immédiat) mais il faut TOUJOURS valider côté serveur aussi.

Q : <button> ou <input type="submit"> ?
R : <button> est plus flexible (peut contenir des images, du HTML). Préférez <button type="submit">.

Q : Les données sont-elles envoyées automatiquement ?
R : Non, vous devez avoir un serveur backend (PHP, Node.js, Python...) à l'adresse indiquée dans action. Pour l'instant, on met action="#" pour tester.