Qu'allez-vous apprendre ?

Dans ce chapitre, tu vas découvrir deux éléments très importants du HTML : les tableaux et les formulaires. Ils servent à organiser des informations et à interagir avec l’utilisateur. Même si ces notions seront approfondies plus tard, cette introduction est essentielle pour bien comprendre leur rôle.

Les tableaux sont utilisés pour afficher des données structurées (notes, listes, emplois du temps, résultats, etc.). Les formulaires, quant à eux, permettent à l’utilisateur d’envoyer des informations : nom, email, message, recherche, connexion, etc.

En tant que débutant, ton objectif n’est pas encore de tout maîtriser, mais de comprendre la logique et la structure de base de ces éléments.

1. Le tableau HTML
   Un tableau sert à afficher des données sous forme de lignes et de colonnes.
2. La balise <table>
   Elle contient tout le tableau.
3. La balise <tr>
   Elle représente une ligne du tableau.
4. La balise <td>
   Elle représente une cellule (une colonne).
5. Organisation logique
   Chaque ligne doit avoir le même nombre de cellules.
6. Utilité réelle
   Tableaux = données, pas mise en page.
7. Le formulaire HTML
   Un formulaire permet à l’utilisateur de saisir des informations.
8. La balise <form>
   Elle englobe tous les champs du formulaire.
9. La balise <input>
   Sert à créer des champs de saisie.
10. La balise <button>
    Permet d’envoyer ou de valider un formulaire.

Exemples simples de tableaux :

<table>
  <tr>
    <td>Nom</td>
    <td>Âge</td>
  </tr>
</table>
      

<table>
  <tr>
    <td>HTML</td>
    <td>Débutant</td>
  </tr>
</table>
      

<table>
  <tr>
    <td>CSS</td>
    <td>Intermédiaire</td>
  </tr>
</table>
      

<table>
  <tr>
    <td>Jour</td>
    <td>Cours</td>
  </tr>
</table>
      

<table>
  <tr>
    <td>Lundi</td>
    <td>HTML</td>
  </tr>
</table>
      

Exemples simples de formulaires :

<form>
  <input type="text" placeholder="Nom">
</form>
      

<form>
  <input type="email" placeholder="Email">
</form>
      

<form>
  <input type="password" placeholder="Mot de passe">
</form>
      

<form>
  <button>Envoyer</button>
</form>
      

<form>
  <input type="search" placeholder="Rechercher">
</form>
      

Exercices pratiques :

1. Crée un tableau avec 2 lignes et 2 colonnes.
2. Ajoute un tableau listant tes cours préférés.
3. Crée un tableau avec ton emploi du temps.
4. Ajoute un formulaire avec un champ nom.
5. Ajoute un champ email dans le formulaire.
6. Ajoute un bouton “Envoyer”.
7. Teste la saisie sur mobile.
8. Ajoute plusieurs champs input.
9. Observe la différence entre tableau et formulaire.
10. Explique avec tes mots à quoi sert chaque balise.

À la fin de ce chapitre, tu comprends les bases des tableaux et des formulaires. Tu es maintenant capable de structurer des données et de créer une première interaction avec l’utilisateur. Ces notions seront approfondies dans les chapitres suivants.