Chapitre 590 | Formulaire

Création d’un formulaire simple en HTML et CSS

Titre : Formulaire de base en HTML et CSS

---

Objectifs :

1. Comprendre comment structurer un formulaire en HTML.
2. Apprendre à utiliser CSS pour styliser un formulaire.
3. Découvrir les bases de Flexbox pour organiser les éléments de manière claire et lisible.
4. Réaliser un formulaire simple affichant les champs et les boutons sans aucune gestion fonctionnelle de l’envoi des données.

---

Code du formulaire

HTML

<div class="form-container">
  <h2>Formulaire</h2>
  <form>
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" placeholder="Votre nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" placeholder="Votre email">

    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" placeholder="Votre mot de passe">

    <label for="message">Message :</label>
    <textarea id="message" name="message" placeholder="Votre message"></textarea>

    <button type="submit">Envoyer</button>
  </form>
</div>
S

CSS

/* Applique le box-sizing à tous les éléments pour inclure bordure et padding */
* {
  box-sizing: border-box;
}

.form-container {
  width: 100%;
  max-width: 400px; /* Conteneur centré avec largeur maximale */
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

label {
  font-size: 0.9rem;
  font-weight: bold;
}

input,
textarea {
  width: 100%; /* Champs alignés à la largeur du conteneur */
  padding: 10px; /* Intérieur des champs */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0; /* Évite des marges parasites */
}

textarea {
  resize: none; /* Désactive le redimensionnement manuel */
  height: 80px;
}

button {
  padding: 10px;
  font-size: 1rem;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

---

Explication détaillée du code

Explication détaillée du code

1. HTML : Structure du formulaire

1. <div class="form-container"> :
   • C’est le conteneur principal du formulaire.
   • Il centralise tous les éléments et leur applique un style spécifique pour être visuellement attractif (fond, bordure, ombre, etc.).
2. <h2> :
   • Titre du formulaire. Il est centré pour une meilleure lisibilité.
3. <form> :
   • Contient les champs et le bouton. C’est l’élément principal du formulaire.
4. <label> :
   • Chaque champ est accompagné d’une étiquette descriptive pour indiquer son rôle. Par exemple, « Nom », « Email », etc.
5. <input> et <textarea> :
   • Ces éléments sont utilisés pour capturer les données utilisateur.
     • <input> : Champs pour saisir des informations simples comme le nom, l’email, ou le mot de passe.
     • <textarea> : Champ pour les messages longs.
   • L’attribut placeholder affiche un texte indicatif pour guider l’utilisateur.
6. <button> :
   • Un bouton stylisé pour simuler une action d’envoi. Il est visuellement attrayant grâce à ses styles et son effet de survol.

---

2. CSS : Mise en forme du formulaire

1. Propriété box-sizing: border-box; :
   • Appliquée globalement (* { box-sizing: border-box; }) pour s’assurer que les padding et border des éléments sont inclus dans leur largeur et hauteur totales.
   • Cela évite les débordements des champs ou des éléments.
2. Classe .form-container :
   • Définit un conteneur avec une largeur maximale (max-width: 400px) pour garantir un affichage adapté sur tous les écrans.
   • Ajoute des marges automatiques pour centrer horizontalement le formulaire (margin: 0 auto;).
   • Applique des paddings internes pour éviter que le contenu soit collé aux bords du conteneur.
3. Propriétés pour le titre (h2) :
   • Centré (text-align: center) et espacé en bas (margin-bottom: 20px).
   • Utilise une taille de police adaptée (font-size: 1.5rem) pour être lisible.
4. Classe form :
   • Utilise Flexbox (display: flex;) pour organiser les champs verticalement.
   • La propriété gap: 15px; crée un espacement uniforme entre les éléments.
5. Champs input et textarea :
   • Prennent toute la largeur disponible dans le conteneur grâce à width: 100%;.
   • Leur largeur est désormais contrôlée par box-sizing: border-box; pour inclure bordure et padding dans la largeur totale.
   • Bordures (border: 1px solid #ccc) et coins arrondis (border-radius: 4px) sont appliqués pour un style moderne.
   • La hauteur du champ textarea est fixe pour éviter un aspect irrégulier (height: 80px).
6. Bouton button :
   • Centré et stylisé pour attirer l’attention grâce à une couleur vive (background-color: #007BFF) et un texte blanc.
   • Effet visuel ajouté : La couleur du bouton change au survol grâce à :hover.

---

Exercice : Ajouter deux champs supplémentaires

Consigne 1 : enlever le box-sizing et regardez le résultat. Puis remettez le.

Consigne 2 : à partir du formulaire présenté ci-dessus, ajoutez deux nouveaux champs :

• Un champ pour saisir un numéro de téléphone.
• Un champ pour saisir une adresse postale.

Important :

Ce code ne propose qu’un formulaire d’affichage. Il n’est pas fonctionnel, car il ne contient aucune logique côté serveur ou JavaScript pour traiter ou envoyer les données saisies. Il est uniquement destiné à illustrer la mise en forme visuelle d’un formulaire.