Balise <form> — Conteneur de formulaire

Attributs principaux :

<form action="contact.php" method="POST">
    <!-- Champs du formulaire -->
</form>

GET vs POST : GET pour recherche, POST pour envoi de données sensibles

<input> — Champ de saisie

Types principaux :

| date | Date | <input type="date" name="naissance"> |
| checkbox | Case à cocher | <input type="checkbox" name="cgv"> |
| radio | Bouton radio | <input type="radio" name="sexe"> |
| submit | Bouton de soumission | <input type="submit" value="Envoyer"> |

Attributs essentiels de <input>

<label> — Étiquette de champ

Rôle : Associe un texte descriptif à un champ

<!-- Méthode recommandée : avec attribut "for" -->
<label for="email-input">Email :</label>
<input type="email" id="email-input" name="email">

Avantages :

• Améliore l'accessibilité
• Zone cliquable agrandie

Toujours utiliser <label> avec les champs de formulaire

<textarea> — Zone de texte multilignes

Rôle : Saisie de texte long (commentaires, messages)

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

Attributs :

• rows : Nombre de lignes visibles
• cols : Nombre de colonnes

<select> — Liste déroulante

Rôle : Sélection dans une liste d'options

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

Attributs utiles :

• multiple : sélection multiple
• selected sur <option> : option présélectionnée

<button> — Bouton

Types de boutons :

<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>

Préférez <button> à <input type="submit"> : plus flexible

<fieldset> et <legend> — Regroupement de champs

Rôle : Regrouper visuellement et sémantiquement des champs liés

<form>
    <fieldset>
        <legend>Informations personnelles</legend>
        
        <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>
    </fieldset>
</form>

Avantages :

• Améliore l'accessibilité
• Structure visuelle claire
• Bordure automatique (stylisable en CSS)

Exemple de formulaire complet

<form action="inscription.php" method="POST">
    <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>
    
    <label for="pays">Pays :</label>
    <select id="pays" name="pays">
        <option value="fr">France</option>
        <option value="be">Belgique</option>
    </select>
    
    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <label>
        <input type="checkbox" name="cgv" required>
        J'accepte les CGV
    </label>
    
    <button type="submit">Envoyer</button>
</form>

Validation HTML5

HTML5 offre une validation côté client native :

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="99">
<input type="text" name="cp" pattern="[0-9]{5}" placeholder="75001">

Sécurité : Toujours valider côté serveur également !

Structure de base d'un tableau

<table>
    <tr>
        <td>Ligne 1, Colonne 1</td>
        <td>Ligne 1, Colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, Colonne 1</td>
        <td>Ligne 2, Colonne 2</td>
    </tr>
</table>

Structure complète d'un tableau

<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Jean</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Marie</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Moyenne d'âge</td>
            <td>27.5</td>
        </tr>
    </tfoot>
</table>

Sections d'un tableau

Avantages :

• Structure claire et sémantique
• Accessibilité améliorée
• Style CSS facilité (ciblage précis)

<th> vs <td>

<thead>
    <tr>
        <th>Produit</th>
        <th>Prix</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Pommes</td>
        <td>2.50€</td>
    </tr>
</tbody>

Fusion de cellules

Attributs colspan et rowspan :

<table>
    <tr>
        <th colspan="2">Coordonnées</th>
    </tr>
    <tr>
        <td>Nom</td>
        <td>Dupont</td>
    </tr>
    <tr>
        <td>Prénom</td>
        <td>Jean</td>
    </tr>
</table>

• colspan : Fusionne plusieurs colonnes (horizontal)
• rowspan : Fusionne plusieurs lignes (vertical)

Bonnes pratiques pour les tableaux

À faire :

• Utiliser <table> uniquement pour des données tabulaires
• Toujours inclure <thead> et <tbody>
• Utiliser <th> pour les en-têtes
• Styliser avec CSS (pas d'attributs HTML obsolètes)

À éviter :

• Utiliser <table> pour la mise en page (utiliser Flexbox/Grid à la place)
• Attributs obsolètes : border, cellpadding, cellspacing

<img> — Images

Attributs obligatoires :

• src : chemin vers l'image
• alt : texte alternatif (accessibilité, SEO)

<img src="photo.jpg" alt="Description de la photo" 
     width="600" height="400">

Attributs optionnels :

• width / height : dimensions
• loading="lazy" : chargement différé (améliore les performances)

Formats recommandés : WebP, JPEG (photos), PNG (transparence)

<audio> et <video> — Contenu multimédia

Audio :

<audio controls>
    <source src="musique.mp3" type="audio/mpeg">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

Vidéo :

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    Votre navigateur ne supporte pas l'élément vidéo.
</video>

Attributs :

• controls : Affiche les contrôles (play, pause, volume)
• autoplay : Lecture automatique ( mauvaise UX)
• loop : Lecture en boucle

<iframe> — Contenus embarqués

Rôle : Intégrer un document HTML externe

Usages courants :

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        width="560" height="315" 
        title="Vidéo YouTube"
        allowfullscreen>
</iframe>

Sécurité : Éviter d'embarquer des contenus non fiables

Images et vidéos responsives

Technique simple :

img {
    max-width: 100%; /* Ne dépasse jamais son conteneur */
    height: auto;    /* Conserve les proportions */
}

Vidéos responsives :

video {
    max-width: 100%;
    height: auto;
}

Important : Cette technique CSS sera vue en détail plus tard