đŸ§Ÿ Partie 1 : Les formulaires HTML

🧠 Qu’est-ce qu’un formulaire ?

Un formulaire permet Ă  un utilisateur de saisir des informations : nom, email, message, choix, etc. Ces donnĂ©es peuvent ensuite ĂȘtre envoyĂ©es Ă  un serveur (ou dans notre cas, simulĂ©es avec mailto: ou traitĂ©es via JavaScript).

Les formulaires sont souvent utilisés pour :

  • les pages de contact (envoyer un message Ă  un propriĂ©taire de site),
  • les inscriptions et connexions utilisateurs,
  • la saisie de donnĂ©es dans des bases (par exemple une commande, un commentaire, etc.).

✅ Structure de base d’un formulaire

Voici un exemple de formulaire simple de contact :

<form action="#" method="POST">
  <div>
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="email">Email :</label>
    <input type="email" id="email" name="email" placeholder="exemple@mail.com" required>
  </div>
  <div>
    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Envoyer</button>
</form>

🔍 DĂ©tail des Ă©lĂ©ments HTML utilisĂ©s dans les formulaires

ÉlĂ©ment Description
<form> Balise qui regroupe tous les champs du formulaire. Les attributs action (destination) et method (GET ou POST) sont essentiels.
<label> Texte descriptif associĂ© Ă  un champ. Doit ĂȘtre liĂ© Ă  l’élĂ©ment via l’attribut for correspondant Ă  l’id du champ.
<input> Champ de saisie unique (texte, email, mot de passe, date, etc.). L’attribut type permet de dĂ©finir la nature du champ.
<textarea> Zone de texte multilignes, utile pour les messages ou commentaires.
<button> ou <input type="submit"> Bouton pour envoyer le formulaire. On peut aussi utiliser un bouton reset pour réinitialiser.
required Attribut HTML5 qui rend un champ obligatoire.
placeholder Texte indicatif Ă  l’intĂ©rieur d’un champ, disparaĂźt dĂšs que l’on commence Ă  Ă©crire.
name Identifiant du champ cÎté serveur, obligatoire si on veut récupérer les valeurs transmises.

đŸ› ïž Autres types d’<input> Ă  connaĂźtre

type Utilisation
text Champ de texte simple
email Validation automatique du format email
password Masque les caractĂšres saisis
tel Numéro de téléphone
date SĂ©lecteur de date
radio Boutons d’option (choix unique)
checkbox Cases Ă  cocher (choix multiple possible)
submit Bouton d’envoi
reset RĂ©initialise le formulaire

Exemple de boutons radio :

<p>Genre :</p>
<input type="radio" id="homme" name="genre" value="homme">
<label for="homme">Homme</label>
<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label>

Exemple de case Ă  cocher :

<input type="checkbox" id="newsletter" name="newsletter" checked>
<label for="newsletter">Je souhaite recevoir la newsletter</label>

🎹 Styliser un formulaire avec CSS

Voici un exemple de style CSS pour rendre le formulaire plus lisible et esthétique :

form div {
  margin-bottom: 15px;
}
label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input:focus, textarea:focus {
  border-color: #66aaff;
  outline: none;
}
button[type=submit] {
  background-color: darkslateblue;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
}
button[type=submit]:hover {
  background-color: slateblue;
}

📊 Partie 2 : Les tableaux HTML

📌 Quand utiliser un tableau ?

Les tableaux permettent d’afficher des donnĂ©es organisĂ©es en lignes et colonnes. Exemples : planning, liste de projets, rĂ©sultats.

đŸ§± Structure de base d’un tableau

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Email</th>
      <th>Statut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jean Dupont</td>
      <td>jean@mail.com</td>
      <td>Actif</td>
    </tr>
    <tr>
      <td>Marie Curie</td>
      <td>marie@mail.com</td>
      <td>Inactif</td>
    </tr>
  </tbody>
</table>

🔍 Balises à retenir

Balise Signification
<table> DĂ©bute un tableau
<thead> En-tĂȘte du tableau (facultatif)
<tbody> Corps principal du tableau
<tr> Ligne du tableau
<th> Cellule d’en-tĂȘte (gras, centrĂ©)
<td> Cellule de données

🎹 Exemple de style CSS pour tableau

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
📌 border-collapse: collapse; permet de fusionner les bordures pour un aspect plus propre.

🔗 Ressources utiles