Formulaires, tableaux et médias

Formulaires, Tableaux et Médias

Séance 2 - DSP - USAL33

2. Formulaires

Balise <form> — Conteneur de formulaire

Attributs principaux :

Attribut	Description	Exemple
action	URL de traitement	action="traitement.php"
method	Méthode HTTP (GET ou POST)	method="POST"

<form action="contact.php" method="POST">
    
</form>

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

<input> — Champ de saisie

Types principaux :

Type	Usage	Exemple
text	Texte simple	<input type="text" name="nom">
email	Adresse email (validation)	<input type="email" name="email">
password	Mot de passe (masqué)	<input type="password" name="mdp">
number	Nombre	<input type="number" name="age">

| 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>

Attribut	Rôle	Exemple
name	Nom du champ (envoyé au serveur)	name="email"
id	Identifiant unique (lien avec <label>)	id="email-input"
placeholder	Texte d’aide dans le champ	placeholder="exemple@mail.com"
required	Champ obligatoire	required
value	Valeur par défaut	value="Paris"
min / max	Valeurs min/max	min="18" max="99"

<label> — Étiquette de champ

Rôle : Associe un texte descriptif à un champ

<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 :

Type	Comportement
submit	Soumet le formulaire (par défaut)
reset	Réinitialise le formulaire
button	Bouton neutre (pour JavaScript)

<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 :

Attribut	Validation
required	Champ obligatoire
type="email"	Format email valide
type="url"	Format URL valide
min / max	Valeurs min/max
pattern	Expression régulière personnalisée

<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 !

3. Tableaux

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>

Balise	Rôle
<table>	Conteneur du tableau
<tr>	Table Row (ligne)
<td>	Table Data (cellule de données)
<th>	Table Header (cellule d’en-tête)

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

Balise	Rôle
<thead>	En-tête du tableau (titres de colonnes)
<tbody>	Corps du tableau (données)
<tfoot>	Pied du tableau (totaux, résumés)

Avantages :

• Structure claire et sémantique

• Accessibilité améliorée

• Style CSS facilité (ciblage précis)

<th> vs <td>

Balise	Usage	Style par défaut
<th>	Cellule d”en-tête	Gras + centré
<td>	Cellule de données	Normal + aligné à gauche

<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

4. Médias

<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 :

Usage	Exemple
Vidéo YouTube	<iframe src="https://www.youtube.com/embed/VIDEO_ID">
Carte Google Maps	<iframe src="https://maps.google.com/...">

<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

Fin de la séance 2

Prochaine étape : TP2 - Formulaires et Tableaux

Questions ?