Les formulaires HTML de base

Les formulaires sont essentiels pour collecter des informations auprès des utilisateurs, que ce soit pour une inscription, une recherche, ou un formulaire de contact.

La balise <form>

La balise <form> est le conteneur de tous les champs d’un formulaire. Elle possède deux attributs principaux :

• action : L’URL de la page ou du script qui traitera les données soumises.
• method : La méthode HTTP à utiliser pour envoyer les données. Les deux valeurs les plus courantes sont GET (les données sont ajoutées à l’URL) et POST (les données sont envoyées dans le corps de la requête, de manière invisible pour l’utilisateur).

<form action="/traitement.php" method="POST">
    <!-- Les champs du formulaire viendront ici -->
</form>

Les champs de saisie (<input>) et leurs étiquettes (<label>)

Pour créer des champs où l’utilisateur peut entrer des données, on utilise principalement la balise <input>. Pour des raisons d’accessibilité et d’ergonomie, chaque champ doit être associé à une étiquette descriptive grâce à la balise <label>.

L’association se fait en donnant un id unique à l’<input> et en utilisant cet id dans l’attribut for du <label>.

• <label> : Le texte descriptif du champ. Cliquer sur le label active le champ associé.
• <input> : Le champ de saisie lui-même. Son comportement varie selon son attribut type.
  • type="text" : Un champ de texte sur une seule ligne.
  • type="email" : Un champ pour une adresse e-mail (avec validation de format par le navigateur).
  • type="password" : Un champ de mot de passe (les caractères sont masqués).
• name : Cet attribut est crucial. Il donne un nom à la donnée qui sera envoyée au serveur.

Les contrôles de surface (validation)

HTML5 a introduit des attributs qui permettent au navigateur de vérifier la validité des données saisies par l’utilisateur avant même d’envoyer le formulaire. C’est ce qu’on appelle la validation côté client.

• required : Rend un champ obligatoire. L’utilisateur ne pourra pas soumettre le formulaire si le champ est vide.
• minlength et maxlength : Définissent le nombre minimum et maximum de caractères pour un champ de type texte.
• min et max : Spécifient les valeurs minimale et maximale pour un champ de type numérique (type="number").
• pattern : Permet de définir une expression régulière (RegExp) que la valeur du champ doit respecter. Utile pour des formats complexes (ex: code postal, numéro de téléphone).

Ces validations de base améliorent l’expérience utilisateur en fournissant un retour immédiat, mais elles ne remplacent jamais une validation côté serveur, qui reste indispensable pour la sécurité.

Le bouton de soumission (<button>)

Pour permettre à l’utilisateur d’envoyer le formulaire, on ajoute un bouton. La balise <button> est très flexible. Lorsqu’elle est placée dans un <form>, son comportement par défaut (type="submit") est de soumettre le formulaire.

On peut aussi utiliser <input type="submit">, mais <button> est souvent préféré car il permet d’inclure du contenu plus riche (comme des icônes ou du texte formaté).

Exemple complet

Voici un formulaire de contact simple qui rassemble tous ces éléments.

<form action="/contact" method="POST">
    <p>
        <label for="nom">Votre nom :</label>
        <input type="text" id="nom" name="user_name" required minlength="2">
    </p>
    <p>
        <label for="email">Votre e-mail :</label>
        <input type="email" id="email" name="user_email" required>
    </p>
    <p>
        <button type="submit">Envoyer</button>
    </p>
</form>