✨ Créer un formulaire simple avec HTML et CSS, étape par étape pour to(même les débutants)

Dans ce tutoriel, je vais expliquer comment faire un formulaire très simple, même si vous êtes totalement nouveau en programmation. L’idée est de comprendre chaque ligne et de créer un petit formulaire beau et fonctionnel.

💡 Qu’est-ce qu’un formulaire ?

Un formulaire, c’est un endroit où l’utilisateur peut :

Écrire son nom.
Entrer son email.
Donner son mot de passe.

Les formulaires sont utilisés partout : pour créer un compte, se connecter ou remplir un questionnaire.

À la fin, voici ce que vous allez obtenir :

Exemple de formulaire final :

Nom : []
Email : []
Mot de passe : [______________]
[Bouton : S'inscrire]

🛠️ Étape 1 : Écrire le HTML (la structure)

Le HTML est comme le squelette du formulaire. Voici le code :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulaire Simple</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="form-container">
    <h2>Formulaire d'inscription</h2>
    <form>
      <!-- Nom -->
      <label for="name">Nom :</label>
      <input type="text" id="name" name="name" placeholder="Entrez votre nom" required>

      <!-- Email -->
      <label for="email">Email :</label>
      <input type="email" id="email" name="email" placeholder="Entrez votre email" required>

      <!-- Mot de passe -->
      <label for="password">Mot de passe :</label>
      <input type="password" id="password" name="password" placeholder="Entrez votre mot de passe" required>

      <!-- Bouton -->
      <button type="submit">S'inscrire</button>
    </form>
  </div>
</body>
</html>

📝 Explications détaillées

<div class="form-container"> : On utilise <div> pour regrouper tout le formulaire dans une "boîte".
<h2> : Titre du formulaire : Ici, on affiche "Formulaire d'inscription".
<form> : Cette balise contient tous les champs du formulaire.
<label for="name">Nom :</label> : <label> sert à indiquer ce que l’utilisateur doit remplir (exemple : "Nom :"). for="name" connecte le label au champ id="name".
<input type="text"> : C’est un champ pour entrer du texte (comme votre nom). placeholder="Entrez votre nom" : Ce texte apparaît dans le champ avant qu’on écrive. required : Rend ce champ obligatoire.
<button type="submit"> : C’est un bouton pour envoyer les données. Ici, le texte sur le bouton est "S'inscrire".

🎨 Étape 2 : Styliser avec CSS (la décoration)

Le CSS permet de rendre le formulaire beau et bien organisé. Voici le code CSS :

/* Style général */
body {
  font-family: Arial, sans-serif; /* Texte lisible */
  background-color: #f4f4f4; /* Fond gris clair */
  margin: 0; /* Enlève les marges par défaut */
  display: flex; /* Centre tout */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  height: 100vh; /* Hauteur de la fenêtre */
}

/* Conteneur du formulaire */
.form-container {
  background-color: white; /* Fond blanc */
  padding: 20px 30px; /* Espace intérieur */
  border-radius: 10px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre subtile */
  width: 100%; /* Largeur automatique */
  max-width: 400px; /* Pas plus de 400px */
}

/* Titre */
h2 {
  text-align: center; /* Centrer le titre */
  color: #333; /* Couleur sombre */
}

/* Style des labels */
label {
  display: block; /* Chaque label sur une nouvelle ligne */
  margin-bottom: 5px; /* Espace sous le texte */
  font-weight: bold; /* Texte en gras */
  color: #555; /* Couleur légèrement grise */
}

/* Style des champs */
input {
  width: 100%; /* Prend toute la largeur */
  padding: 10px; /* Espace intérieur */
  margin-bottom: 20px; /* Espace entre les champs */
  border: 1px solid #ccc; /* Bordure grise claire */
  border-radius: 5px; /* Coins arrondis */
}

input:focus {
  border-color: #4CAF50; /* Bordure verte quand on clique */
  outline: none; /* Supprime la bordure bleue par défaut */
}

/* Bouton */
button {
  width: 100%; /* Bouton aussi large que le formulaire */
  padding: 10px; /* Espace intérieur */
  background-color: #4CAF50; /* Couleur verte */
  color: white; /* Texte blanc */
  border: none; /* Pas de bordure */
  border-radius: 5px; /* Coins arrondis */
  font-size: 16px; /* Texte plus grand */
  cursor: pointer; /* Curseur en forme de main */
}

button:hover {
  background-color: #45a049; /* Change la couleur au survol */
}

📝 Explications CSS (ligne par ligne)

body : display: flex : Permet de centrer le formulaire au milieu de l’écran. background-color: #f4f4f4; : Couleur de fond douce pour éviter un écran blanc.
.form-container : border-radius: 10px; : Ajoute des coins arrondis pour un design moderne. box-shadow : Crée une ombre discrète sous la "boîte" du formulaire.
label et input : Chaque label est placé au-dessus de son champ. Les champs (input) ont des bordures claires et des coins arrondis.
Bouton (button) : Couleur verte pour attirer l’attention. Effet au survol : La couleur devient légèrement plus foncée.

🚀 Tester et Améliorer

Créez deux fichiers :

index.html : Le code HTML.
styles.css : Le code CSS.

Ouvrez le fichier HTML dans un navigateur pour voir le formulaire.

🎯 Challenge pour aller plus loin

Ajoutez un champ pour un numéro de téléphone :

<label for="phone">Téléphone :</label>
<input type="tel" id="phone" name="phone" placeholder="Entrez votre numéro">

Ajoutez un champ pour une date de naissance :

<label for="birthdate">Date de naissance :</label>
<input type="date" id="birthdate" name="birthdate">

🎉 Bravo ! Vous savez maintenant créer un formulaire simple et élégant. Besoin d’aide ou de conseils supplémentaires ? N’hésitez pas à demander. 😊

Créer un formulaire simple avec HTML et CSS, étape par étape pour tous