Ici tu vas apprendre à créer des formulaires (champs à remplir, boutons) et des tableaux pour présenter des données. À la fin : mini-projet “page de contact”.
Un formulaire permet à l’utilisateur d’entrer des informations : pseudo, email, mot de passe, message, etc.
On le crée avec la balise <form> ... </form> :
<form action="/traitement" method="post">
<!-- Champs du formulaire ici -->
</form>action : l’URL où les données seront envoyées (plus tard côté serveur).method : souvent get ou post.action="#" juste pour tester le formulaire
sans envoi réel.
Quel élément entoure tout le contenu d’un formulaire HTML ?
On utilise <label> pour le texte du champ,
et <input> pour la zone de saisie.
<form action="#" method="post">
<label for="pseudo">Pseudo :</label>
<input type="text" id="pseudo" name="pseudo">
<br>
<label for="email">Email :</label>
<input type="email" id="email" name="email">
</form>for dans <label> doit être égal à l’id de l’input.type="text" : texte normaltype="email" : email (avec vérification basique)type="password" : mot de passe (masqué)type="checkbox" : case à cochertype="radio" : bouton radio (choix unique)type="submit" : bouton pour envoyer le formulaire<input type="password" name="mdp">
<input type="submit" value="Envoyer">Exercice : comment s’appelle la balise qui sert à afficher un texte descriptif pour un champ (ex : “Email :” avant l’input) ?
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4" cols="40">
Écris ton message ici...
</textarea>Attributs utiles :
rows : nombre de lignes visibles.cols : largeur approximative en caractères.<label for="sujet">Sujet :</label>
<select id="sujet" name="sujet">
<option value="question">Question</option>
<option value="bug">Bug</option>
<option value="autre">Autre</option>
</select><p>Comment as-tu connu le site ?</p>
<label>
<input type="radio" name="origine" value="ami">
Un ami
</label>
<label>
<input type="radio" name="origine" value="google">
Google
</label>
<p>Qu’aimes-tu ? (plusieurs choix)</p>
<label>
<input type="checkbox" name="gouts" value="html">
HTML
</label>
<label>
<input type="checkbox" name="gouts" value="css">
CSS
</label>Quel élément utilise-t-on pour une zone de texte sur plusieurs lignes ?
Les tableaux servent à afficher des données organisées (horaires, scores, prix…), pas pour mettre en page tout un site.
<table>
<thead>
<tr>
<th>Nom</th>
<th>Score</th>
<th>Pays</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>1200</td>
<td>France</td>
</tr>
<tr>
<td>Bob</td>
<td>900</td>
<td>Belgique</td>
</tr>
</tbody>
</table><table> : le tableau entier<tr> : une ligne (table row)<th> : cellule d’en-tête (title de colonne)<td> : cellule normale (table data)Rendu de l’exemple ci-dessus :
| Nom | Score | Pays |
|---|---|---|
| Alice | 1200 | France |
| Bob | 900 | Belgique |
Quelle balise sert à créer une ligne dans un tableau ?
Maintenant, crée un fichier contact.html avec :
un titre, un formulaire de contact et un petit tableau des horaires.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Contact</title>
</head>
<body>
<h1>Contact</h1>
<h2>Formulaire de contact</h2>
<form action="#" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<br>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<br>
<label for="sujet">Sujet :</label>
<select id="sujet" name="sujet">
<option value="question">Question</option>
<option value="bug">Bug</option>
<option value="autre">Autre</option>
</select>
<br>
<label for="message">Message :</label>
<br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
<br>
<button type="submit">Envoyer</button>
</form>
<h2>Horaires</h2>
<table>
<thead>
<tr>
<th>Jour</th>
<th>Matin</th>
<th>Après-midi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lundi</td>
<td>9h - 12h</td>
<td>14h - 18h</td>
</tr>
<tr>
<td>Mardi</td>
<td>9h - 12h</td>
<td>14h - 18h</td>
</tr>
</tbody>
</table>
</body>
</html>
<a href="contact.html">Contact</a>
(par exemple dans ton menu ou en bas de la page).