Modèles de formulaires HTML

Un modèle de formulaire HTML est un bloc de balisage de formulaire prêt à l'emploi et réutilisable que vous pouvez copier dans un projet et adapter. La plupart des applications web ont besoin des mêmes formulaires encore et encore — contact, connexion, inscription, commentaires — donc au lieu de tout construire de zéro, vous partez d'un modèle propre et correct, et vous ne changez que les libellés, les champs et l'endpoint de soumission.

Travailler à partir d'un modèle présente de vrais avantages :

• Cohérence — chaque formulaire utilise la même structure, ce qui rend le style et la validation prévisibles sur l'ensemble du site.
• Rapidité — vous évitez le code répétitif et vous concentrez sur les champs vraiment spécifiques à votre formulaire.
• Accessibilité par défaut — un bon modèle associe déjà chaque <label> à son contrôle, regroupe les champs connexes dans un <fieldset>, et utilise les bons types <input>, afin que les lecteurs d'écran et les utilisateurs clavier bénéficient d'une expérience correcte.
• Moins de bogues — les erreurs courantes (un label qui ne pointe vers rien, un name manquant, le mauvais type d'input) sont déjà résolues.

Ce chapitre vous propose trois modèles propres, valides et prêts à être copiés — un formulaire de contact, un formulaire de connexion et un formulaire d'inscription — ainsi qu'une référence rapide aux attributs qui les font fonctionner.

Attributs clés des formulaires

Avant les modèles, voici les attributs que vous retrouverez dans chacun d'eux :

La règle la plus importante : chaque input a besoin d'un label, et le for du label doit être égal au id de l'input. C'est aussi pourquoi <p for="..."> est invalide — seul <label> porte l'attribut for.

Modèle de formulaire de contact

Un formulaire de contact minimal : un nom, un email, un message et un bouton d'envoi. Notez le champ type="email", qui offre une validation de format gratuite dans le navigateur.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

    <p>
      <label for="contact-name">Name</label>
      <input type="text" id="contact-name" name="name" required>
    </p>

    <p>
      <label for="contact-email">Email</label>
      <input type="email" id="contact-email" name="email" required>
    </p>

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

    <p>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </p>

    <button type="submit">Send message</button>
  </fieldset>
</form>

Le <textarea> est utilisé pour la saisie multiligne. Contrairement à <input>, il n'a pas d'attribut value — son contenu se place entre les balises ouvrante et fermante, et rows définit sa hauteur visible.

Modèle de formulaire de connexion

Un formulaire de connexion reste court : un identifiant (email ou nom d'utilisateur), un mot de passe et une case à cocher optionnelle « se souvenir de moi ». Le champ mot de passe utilise type="password" pour masquer les caractères.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

Pour une seule case à cocher, envelopper le texte à l'intérieur du <label> est un modèle courant et valide — le label est alors implicitement associé au contrôle qu'il contient, ce qui évite d'avoir besoin d'une paire for/id. Les indications autocomplete permettent au navigateur et aux gestionnaires de mots de passe de remplir correctement les identifiants.

Modèle de formulaire d'inscription

Un formulaire d'inscription est plus long et présente deux contrôles supplémentaires : un menu déroulant <select> et un groupe de boutons radio. Les boutons radio qui partagent le même name forment un groupe, donc un seul peut être sélectionné à la fois.

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

    <p>
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </p>

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

Quelques points à noter ici :

• Le premier <option value=""> est un espace réservé non sélectionnable. Comme le <select> est required, le navigateur bloque la soumission tant que cette option vide est sélectionnée.
• minlength="8" sur le mot de passe impose une longueur minimale sans aucun JavaScript.
• Le <fieldset> interne regroupe les boutons radio, et son <legend> fait office de label pour l'ensemble du groupe — important pour les utilisateurs de lecteurs d'écran.

Chapitres associés

Pour approfondir chaque élément utilisé ci-dessus :

• La balise <form> — le conteneur et ses attributs action/method.
• La balise <input> — chaque type d'input et ses attributs.
• La balise <label> — associer des labels aux contrôles.
• La balise <fieldset> — regrouper des champs connexes avec un <legend>.
• La balise <textarea> — saisie de texte multiligne.
• La balise <select> — menus déroulants et options.
• La balise <button> — boutons d'envoi et de réinitialisation.

Pour un aperçu plus général du fonctionnement des formulaires, consultez HTML Forms.

Pratique