NSI-LYCÉE
Python • Algo • BAC
Retour au Web

Formulaires HTML

Les formulaires permettent aux utilisateurs d'interagir avec votre site : contact, inscription, recherche, commentaires... Apprenez à créer des formulaires efficaces !

Difficulté:
35 min
+35 XP

Objectifs du cours

  • Comprendre le rôle des formulaires HTML
  • Maîtriser la balise <form> et ses attributs
  • Utiliser les différents types de champs <input>
  • Créer des formulaires de contact, inscription, recherche
  • Comprendre la différence entre GET et POST

Erreurs courantes à éviter

  • Oublier l'attribut name sur les champs (données non envoyées)
  • Ne pas utiliser de <label> pour l'accessibilité
  • Confondre type='submit' et type='button'
  • Ne pas valider les données côté serveur (validation HTML seule insuffisante)

**Définition**

Un **formulaire HTML** est un ensemble de champs qui permettent à l'utilisateur de **saisir des données** et de les **envoyer** au serveur.

**Rôle des formulaires** :

📝 **Collecte de données** : • Informations de contact • Inscription / Connexion • Commentaires et avis • Réservations • Paiements

🔍 **Interaction** : • Barre de recherche • Filtres de produits • Sondages et votes • Upload de fichiers

**Exemples courants** :

🔐 **Formulaire de connexion** : • Email / Nom d'utilisateur • Mot de passe • Bouton "Se connecter"

📧 **Formulaire de contact** : • Nom • Email • Message • Bouton "Envoyer"

🛒 **Formulaire de commande** : • Adresse de livraison • Mode de paiement • Bouton "Valider la commande"

**Fonctionnement** :

1. **Utilisateur** remplit le formulaire 2. **Utilisateur** clique sur "Envoyer" 3. **Navigateur** envoie les données au serveur 4. **Serveur** traite les données (enregistrement BDD, envoi email, etc.) 5. **Serveur** renvoie une réponse (confirmation, erreur, etc.)

**Technologies impliquées** :

• **HTML** : structure du formulaire • **CSS** : style du formulaire • **JavaScript** : validation côté client (optionnel) • **Backend** (PHP, Python, Node.js) : traitement côté serveur

**Sécurité** :

⚠️ **IMPORTANT** : • Toujours valider les données côté serveur • Ne jamais faire confiance aux données utilisateur • Protection contre injections SQL, XSS, etc.

Python
# Simulation de traitement de formulaire
class Formulaire:
    def __init__(self, action, methode="POST"):
        self.action = action
        self.methode = methode
        self.champs = {}

    def ajouter_champ(self, nom, valeur):
        """Ajoute un champ au formulaire."""
        self.champs[nom] = valeur

    def soumettre(self):
        """Simule l'envoi du formulaire."""
        print(f"\n=== ENVOI FORMULAIRE ===")
        print(f"Action : {self.action}")
        print(f"Méthode : {self.methode}")
        print(f"\nDonnées envoyées :")

        for nom, valeur in self.champs.items():
            print(f"  {nom:15} = {valeur}")

        # Simulation validation
        return self.valider()

    def valider(self):
        """Valide les données du formulaire."""
        erreurs = []

        # Vérifier qu'aucun champ n'est vide
        for nom, valeur in self.champs.items():
            if not valeur or valeur.strip() == "":
                erreurs.append(f"Le champ '{nom}' est obligatoire")

        # Vérifier format email
        if 'email' in self.champs:
            email = self.champs['email']
            if '@' not in email or '.' not in email:
                erreurs.append("Format email invalide")

        if erreurs:
            print(f"\n❌ ERREURS DE VALIDATION :")
            for err in erreurs:
                print(f"  • {err}")
            return False
        else:
            print(f"\n✅ VALIDATION RÉUSSIE !")
            print("→ Données envoyées au serveur")
            print("→ Email de confirmation envoyé")
            return True

# Exemple : Formulaire de contact
print("=== SIMULATION FORMULAIRE DE CONTACT ===")

form_contact = Formulaire(action="/contact", methode="POST")
form_contact.ajouter_champ("nom", "Jean Dupont")
form_contact.ajouter_champ("email", "jean.dupont@exemple.fr")
form_contact.ajouter_champ("message", "Bonjour, je voudrais plus d'informations...")

form_contact.soumettre()

# Exemple avec erreur
print("\n\n=== FORMULAIRE AVEC ERREUR ===")

form_erreur = Formulaire(action="/contact", methode="POST")
form_erreur.ajouter_champ("nom", "Marie Martin")
form_erreur.ajouter_champ("email", "marie-invalide")  # Email invalide
form_erreur.ajouter_champ("message", "")  # Message vide

form_erreur.soumettre()

Quiz de validation

1. Quelle balise crée un formulaire HTML ?

2. Quel attribut est OBLIGATOIRE sur un champ <input> pour que les données soient envoyées ?

3. Quelle méthode HTTP utiliser pour un formulaire de CONNEXION (données sensibles) ?

4. Quel type d'<input> pour un champ de MOT DE PASSE ?

5. Quelle balise pour une zone de texte MULTILIGNE ?

EdTech AI Assistant