formulaires block

<form>

Représente un formulaire interactif permettant à l'utilisateur de saisir et soumettre des données.

Description

L’élément <form> définit un formulaire HTML. Il regroupe les contrôles de saisie (<input>, <textarea>, <select>, <button>) et configure comment les données seront envoyées au serveur via action et method. Sans action, le formulaire est soumis à l’URL courante.

Syntaxe

<form action="/inscription" method="post">
  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">S'inscrire</button>
</form>

Exemples

Formulaire de contact complet :

<form action="/contact" method="post">
  <fieldset>
    <legend>Vos coordonnées</legend>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>
  </fieldset>

  <label for="message">Message :</label>
  <textarea id="message" name="message" rows="5" required></textarea>

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

Formulaire avec upload de fichier :

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="fichier" accept="image/*">
  <button type="submit">Envoyer</button>
</form>

Attributs spécifiques

AttributTypeDescription
actionURLURL de traitement des données. Si absent, soumission à l’URL courante.
methodenumMéthode HTTP : get (données dans l’URL) ou post (dans le corps de la requête).
enctypeMIMEEncodage des données : application/x-www-form-urlencoded (défaut), multipart/form-data (fichiers), text/plain.
novalidatebooleanDésactive la validation HTML native du navigateur.
autocompleteenumActive (on) ou désactive (off) l’autocomplétion pour tout le formulaire.
targetenumContexte de réponse : _self (défaut), _blank, _parent, _top.
namestringNom du formulaire pour le ciblage via document.forms.

Notes

method="get" vs method="post" : get ajoute les données à l’URL (visible, bookmarkable) — adapté aux recherches. post envoie les données dans le corps HTTP (invisible dans l’URL) — obligatoire pour les mots de passe, fichiers, données sensibles.

Validation native : HTML5 offre une validation intégrée (required, type="email", pattern…). Ne pas utiliser novalidate sauf si vous implémentez une validation JavaScript personnalisée accessible.

Support navigateurs

Chrome1+ · Firefox1+ · Safari3+ · Edge12+