<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
| Attribut | Type | Description |
|---|---|---|
action | URL | URL de traitement des données. Si absent, soumission à l’URL courante. |
method | enum | Méthode HTTP : get (données dans l’URL) ou post (dans le corps de la requête). |
enctype | MIME | Encodage des données : application/x-www-form-urlencoded (défaut), multipart/form-data (fichiers), text/plain. |
novalidate | boolean | Désactive la validation HTML native du navigateur. |
autocomplete | enum | Active (on) ou désactive (off) l’autocomplétion pour tout le formulaire. |
target | enum | Contexte de réponse : _self (défaut), _blank, _parent, _top. |
name | string | Nom 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+