La balise <form> constitue l'élément fondamental pour créer des formulaires HTML interactifs permettant la saisie et la collecte de données utilisateur. Cette balise conteneur établit une zone dédiée où les visiteurs peuvent entrer des informations qui seront ensuite transmises et traitées côté serveur par des scripts PHP, Python, ou d'autres langages backend.
En tant qu'élément structurant essentiel des formulaires web, la balise FORM déclare précisément une zone de formulaire interactive dans laquelle les utilisateurs peuvent saisir diverses informations : textes, choix multiples, fichiers à télécharger, et bien d'autres types de données. Ces informations saisies sont ensuite récupérées et traitées côté serveur grâce aux méthodes HTTP GET ou POST.
Il est techniquement possible d'utiliser plusieurs formulaires indépendants dans une même page HTML, à condition absolue de ne jamais les imbriquer l'un dans l'autre, car l'imbrication de formulaires n'est pas valide selon les standards du W3C.
Pour assurer une manipulation efficace des formulaires en JavaScript ou lors du traitement côté serveur, il est fortement recommandé de toujours attribuer une valeur significative à l'attribut name du formulaire. Cet identifiant permet de référencer facilement le formulaire dans vos scripts.
Les structures HTML utilisées à l'intérieur d'un formulaire pour échanger des informations avec l'utilisateur sont nombreuses et incluent les éléments interactifs suivants :
<input> (champs de saisie variés),
<textarea> (zones de texte multiligne),
<button> (boutons personnalisables),
<select> (listes déroulantes),
<option> (options de menu),
<optgroup> (groupements d'options),
<fieldset> (regroupement de champs), et
<label> (étiquettes descriptives pour l'accessibilité).
Règle fondamentale : L'élément de formulaire <form> ne doit contenir aucun autre élément <form> imbriqué. Cette restriction garantit la validité du code HTML et évite les comportements imprévisibles lors de la soumission des données.
Concernant la syntaxe correcte des formulaires HTML, l'élément de formulaire form doit obligatoirement avoir à la fois une balise d'ouverture <form> et une balise de fermeture </form>. Tout contenu entre ces deux balises fait partie intégrante du formulaire.
Du point de vue du modèle de rendu CSS, l'élément de formulaire <form> est de type block, ce qui signifie qu'il engendre automatiquement un retour à la ligne avant et après l'élément, créant ainsi une séparation visuelle naturelle dans le flux du document.
Exemple pratique : formulaire HTML basique avec champs de saisie et bouton d'envoi
Voici un exemple de formulaire HTML simple démontrant l'utilisation de base de la balise <form> avec deux champs texte pour le nom et le prénom, ainsi qu'un bouton de soumission :
Exemple : 📋 Copier le code
<!-- Formulaire basique avec méthode GET pour transmission des données -->
<form action="" method="get">
<!-- Champ de saisie pour le nom de famille -->
Nom : <input type="text" name="nom" placeholder="Entrez votre nom"><br>
<!-- Champ de saisie pour le prénom -->
Prénom : <input type="text" name="prenom" placeholder="Entrez votre prénom"><br>
<!-- Bouton de soumission du formulaire -->
<input type="submit" value="Envoyer">
</form>
(Découvrez des exemples avancés de formulaires HTML en bas de cette page, incluant l'upload de fichiers, la validation HTML5, et l'utilisation de différentes méthodes d'envoi)
Support et compatibilité navigateurs pour la balise <form>
La balise <form> est universellement prise en charge dans tous les principaux navigateurs web modernes et anciens : Internet Explorer (toutes versions), Firefox, Chrome, Safari, Opera, Edge, et leurs équivalents mobiles. Cette compatibilité totale garantit que vos formulaires HTML fonctionneront correctement sur tous les appareils et plateformes.
Évolution HTML : différences entre HTML 4.01 et HTML5 pour les formulaires
HTML5 a introduit des améliorations significatives pour les formulaires web en ajoutant deux nouveaux attributs puissants : autocomplete (pour la saisie semi-automatique des champs) et novalidate (pour désactiver la validation native du navigateur). Parallèlement, HTML5 a supprimé l'attribut accept de la balise <form> (cet attribut est maintenant utilisé uniquement sur les éléments <input type="file">), simplifiant ainsi la spécification et améliorant la cohérence du standard.
Différences XHTML : considérations pour l'attribut name
Dans le contexte de XHTML strict, l'attribut name est officiellement déconseillé (deprecated) pour la balise <form>. Il est recommandé d'utiliser à la place l'attribut id global, qui offre les mêmes fonctionnalités d'identification tout en respectant les normes XHTML plus strictes concernant les attributs d'identification.
Attributs de la balise <form> : référence complète et détaillée
Nouveau : Indique les attributs introduits avec HTML5.
| Attribut |
Valeur |
Description |
|
accept
|
MIME_type |
N'est plus pris en charge par HTML5. Spécifiait auparavant les types de fichiers MIME que le serveur acceptait via l'upload de fichiers (fonctionnalité déplacée vers <input type="file">)
|
|
accept-charset
|
character_set |
Spécifie l'encodage de caractères (charset) qui doit être utilisé pour l'envoi et le traitement des données du formulaire côté serveur
|
|
action
|
URL |
Spécifie l'URL de destination où envoyer les données du formulaire lors de la soumission (page de traitement PHP, script backend, API REST, etc.)
|
|
autocomplete Nouveau
|
on
off |
Spécifie si le formulaire doit avoir la saisie semi-automatique activée (on) ou désactivée (off), permettant au navigateur de suggérer des valeurs précédemment saisies
|
|
enctype
|
application/x-www-form-urlencoded
multipart/form-data
text/plain
|
Spécifie comment les données du formulaire doivent être encodées lors de la soumission au serveur (obligatoire uniquement pour method="post", essentiel pour l'upload de fichiers)
|
|
method
|
get
post |
Spécifie la méthode HTTP à utiliser pour l'envoi des données : GET (données visibles dans l'URL) ou POST (données dans le corps de la requête, plus sécurisé)
|
|
name
|
texte |
Spécifie le nom d'identification du formulaire, utilisé pour référencer le formulaire en JavaScript ou dans les scripts de traitement
|
|
novalidate Nouveau
|
novalidate |
Attribut booléen qui spécifie que le formulaire ne doit pas être validé automatiquement par le navigateur lors de la soumission (utile pour validation personnalisée en JavaScript)
|
|
target
|
_blank
_self
_parent
_top
|
Spécifie l'emplacement où afficher la réponse reçue après soumission du formulaire : nouvelle fenêtre (_blank), même fenêtre (_self), frame parent (_parent), ou fenêtre complète (_top)
|
Attributs globaux HTML : support universel
La balise <form> prend également en charge tous les attributs globaux HTML, incluant id, class, style, data-*, tabindex, contenteditable, et tous les autres attributs universels applicables à n'importe quel élément HTML.
Événements JavaScript : gestion des interactions formulaire
La balise <form> prend également en charge tous les attributs d'événements JavaScript HTML, notamment onsubmit (déclenché lors de la soumission), onreset (lors de la réinitialisation), onchange, oninput, et tous les gestionnaires d'événements standards permettant une interaction dynamique avec l'utilisateur.
L'attribut accept-charset : encodage des caractères du formulaire
Définition et utilisation de accept-charset
L'attribut accept-charset spécifie l'encodage de caractères (charset) qui doit être utilisé pour l'envoi et le traitement des données du formulaire côté serveur. Cet attribut est crucial pour garantir que les caractères spéciaux, les accents, et les symboles non-ASCII sont correctement transmis et interprétés.
La valeur par défaut est la chaîne réservée "UNKNOWN" (inconnu), qui indique que l'encodage correspond automatiquement à l'encodage du document HTML contenant l'élément <form>. Dans la plupart des cas modernes, l'encodage UTF-8 est utilisé par défaut.
Syntaxe de accept-charset
<form accept-charset="character_set">
Valeurs d'attribut accept-charset
| Valeur |
Description |
| CHARACTER_SET |
Une liste séparée par des espaces d'un ou plusieurs encodages de caractères qui doivent être utilisés pour l'envoi et le traitement des données du formulaire.
Valeurs communes et recommandées :
UTF-8 - Encodage Unicode universel (recommandé pour tous les nouveaux projets web, supporte tous les caractères et symboles mondiaux)
ISO-8859-1 - Encodage pour l'alphabet Latin (Europe occidentale, caractères accentués français, espagnols, etc.)
En théorie, n'importe quel encodage de caractères enregistré peut être utilisé (ISO-8859-15, Windows-1252, etc.), mais aucun navigateur ne comprend l'intégralité des encodages existants. Plus largement un encodage est utilisé, plus grande est la chance qu'un navigateur le supporte correctement. UTF-8 est aujourd'hui le standard universel recommandé.
|
Exemple : formulaire avec encodage ISO-8859-1 spécifié
Cet exemple démontre l'utilisation de l'attribut accept-charset pour forcer un encodage ISO-8859-1 lors de la soumission du formulaire :
Exemple : 📋 Copier le code
<!-- Formulaire avec encodage ISO-8859-1 pour l'alphabet latin -->
<form action="" accept-charset="ISO-8859-1">
<!-- Les données seront encodées en ISO-8859-1 lors de l'envoi -->
Nom : <input type="text" name="nom"><br>
Prénom : <input type="text" name="prenom"><br>
<input type="submit" value="Envoyer">
</form>
Support navigateur pour accept-charset
L'attribut accept-charset est universellement pris en charge par tous les navigateurs principaux modernes et anciens, garantissant un encodage correct des données soumises.
Différences entre HTML 4.01 et HTML5 pour accept-charset
Dans HTML 4.01, la liste des encodages de caractères pouvait être délimitée indifféremment par des espaces ou des virgules. En HTML5, la liste doit obligatoirement être séparée par des espaces uniquement, conformément à la simplification et à l'uniformisation de la syntaxe HTML5.
L'attribut action : destination du traitement du formulaire
Définition et utilisation de l'attribut action
L'attribut action spécifie où envoyer les données du formulaire lorsqu'un formulaire est soumis par l'utilisateur. En d'autres termes, l'attribut action désigne l'URL de la page de traitement (script PHP, API REST, fonction serverless, etc.) qui se chargera de recevoir, valider et traiter les données envoyées par le formulaire. Cet attribut est l'un des plus critiques pour le fonctionnement d'un formulaire web.
Syntaxe de l'attribut action
<form action="URL">
Valeurs possibles de l'attribut action
| Valeur |
Description |
| URL |
Spécifie où envoyer les données du formulaire lorsque celui-ci est soumis (clic sur bouton submit ou validation par Enter).
Valeurs possibles et cas d'usage :
URL absolue - Pointe vers un autre site web ou domaine externe (exemple : action="https://www.example.com/traitement/form-handler.php"). Utile pour envoyer des données vers une API tierce ou un service externe.
URL relative - Pointe vers un fichier dans le même site web (exemple : action="traitement/handler.php" ou action="../process-form.php"). C'est l'approche la plus courante pour les formulaires standards.
URL vide - action="" ou action=" " (vide) qui renvoie vers la même page qui contient le formulaire, permettant un traitement PHP sur la même page (pattern auto-traitement très utilisé).
|
Exemple : envoi des données vers une page de traitement PHP
Lors de la soumission, ce formulaire enverra les données vers le fichier "page-traitement.php" pour traitement côté serveur :
Exemple : 📋 Copier le code
<!-- Formulaire envoyant les données vers page-traitement.php via GET -->
<form action="page-traitement.php" method="get">
<!-- Les données nom et prénom seront accessibles via $_GET en PHP -->
Nom : <input type="text" name="nom" required><br>
Prénom : <input type="text" name="prenom" required><br>
<!-- Bouton déclenchant la soumission vers l'URL action -->
<input type="submit" value="Envoyer les données">
</form>
Support navigateur pour l'attribut action
L'attribut action est universellement pris en charge dans tous les principaux navigateurs depuis leurs premières versions, garantissant une compatibilité totale pour vos formulaires web.
Différences entre HTML 4.01 et HTML5 pour action
En HTML5, l'attribut action n'est plus techniquement nécessaire (il peut être omis). Si l'attribut action est absent, le formulaire est soumis à l'URL de la page courante par défaut. Cependant, pour la clarté du code et la maintenance, il est toujours recommandé de spécifier explicitement l'attribut action.
L'attribut autocomplete : saisie semi-automatique des formulaires
Définition et utilisation de autocomplete
L'attribut autocomplete spécifie si un formulaire doit avoir la fonction de saisie semi-automatique activée ou désactivée. Cette fonctionnalité HTML5 améliore considérablement l'expérience utilisateur en permettant au navigateur de se souvenir et de suggérer automatiquement les valeurs précédemment saisies.
Lorsque la saisie semi-automatique est activée (autocomplete="on"), le navigateur affiche automatiquement dans une liste déroulante toutes les valeurs que l'utilisateur a entrées auparavant dans des champs similaires, accélérant ainsi la saisie et réduisant les erreurs de frappe.
Astuce avancée : Il est parfaitement possible d'avoir la saisie semi-automatique activée (« on ») pour le formulaire global et désactivée (« off ») pour des champs d'entrée spécifiques sensibles (comme les numéros de carte bancaire), ou vice versa. Cette granularité permet un contrôle fin de la sécurité et de l'expérience utilisateur.
Syntaxe de autocomplete
<form autocomplete="on|off">
Valeurs d'attribut autocomplete
| Valeur |
Description |
| on |
Valeur par défaut. Le navigateur suggérera automatiquement et complétera les valeurs basées sur ce que l'utilisateur a saisi précédemment dans des champs similaires. Améliore l'expérience utilisateur pour les formulaires fréquemment utilisés.
|
| off |
L'utilisateur doit entrer manuellement une valeur complète dans chaque champ à chaque utilisation. Le navigateur ne complète pas automatiquement les entrées et ne propose pas de suggestions. Recommandé pour les données sensibles (mots de passe à usage unique, codes PIN, etc.).
|
Exemple : formulaire avec saisie semi-automatique activée
Ce formulaire permettra au navigateur de suggérer automatiquement les noms et prénoms précédemment saisis :
Exemple : 📋 Copier le code
<!-- Formulaire avec autocomplete activé pour améliorer l'UX -->
<form action="page-traitement.php" autocomplete="on" method="get">
<!-- Le navigateur suggérera les noms précédemment saisis -->
Nom : <input type="text" name="nom"><br>
<!-- Le navigateur suggérera les prénoms précédemment saisis -->
Prénom : <input type="text" name="prenom"><br>
<input type="submit" value="Envoyer">
</form>
Support navigateur pour autocomplete
L'attribut autocomplete est pris en charge dans tous les principaux navigateurs modernes (Internet Explorer 10+, Firefox, Chrome, Safari, Edge), à l'exception notable d'Opera dans ses anciennes versions. Le support est maintenant quasi-universel.
Différences entre HTML 4.01 et HTML5
L'attribut autocomplete est une nouveauté introduite en HTML5. Il n'existait pas dans les versions antérieures d'HTML (HTML 4.01, XHTML 1.0), reflétant l'évolution des standards web vers une meilleure expérience utilisateur et une interaction plus intelligente avec les formulaires.
L'attribut enctype : encodage des données du formulaire
Définition et utilisation de enctype
L'attribut enctype (encoding type) spécifie comment les données du formulaire doivent être encodées lors de la soumission d'une requête au serveur. Cet attribut est absolument crucial pour le bon fonctionnement de l'upload de fichiers et la transmission correcte des données.
Remarque importante : L'attribut enctype peut être utilisé uniquement si method="post". Il n'a aucun effet avec la méthode GET car les données GET sont toujours encodées dans l'URL selon le format application/x-www-form-urlencoded.
Syntaxe de enctype
<form enctype="value">
Valeurs d'attribut enctype : comparaison détaillée
| Valeur |
Description |
| application/x-www-form-urlencoded |
Valeur par défaut. Tous les caractères sont encodés avant l'envoi : les espaces sont convertis en symboles « + » et les caractères spéciaux sont convertis en valeurs ASCII hexadécimales (percent-encoding : %20, %3A, etc.). Idéal pour les formulaires textuels standards sans upload de fichiers.
|
| multipart/form-data |
Les caractères ne sont pas encodés. Cette valeur est absolument requise lorsque vous utilisez des formulaires qui possèdent un contrôle d'upload de fichiers (<input type="file">). Permet la transmission de données binaires (images, PDF, vidéos, etc.) sans corruption.
|
| text/plain |
Les espaces sont convertis en symboles « + », mais aucun caractère spécial n'est encodé. Rarement utilisé en production, principalement pour le débogage ou l'envoi d'emails simples. Non recommandé pour les applications réelles.
|
Exemple : formulaire avec upload de fichier utilisant multipart/form-data
Pour permettre l'upload de fichiers, il est impératif d'utiliser enctype="multipart/form-data" :
Exemple : 📋 Copier le code
<!-- Formulaire d'upload - OBLIGATOIRE : method="post" et enctype="multipart/form-data" -->
<form action="page-traitement.php" method="post" enctype="multipart/form-data">
<!-- Champs texte standards -->
Nom : <input type="text" name="nom"><br>
Prénom : <input type="text" name="prenom"><br>
<!-- Champ d'upload de fichier - nécessite multipart/form-data -->
Télécharger un fichier : <input type="file" name="fichier"><br>
<input type="submit" value="Envoyer">
</form>
Support navigateur pour enctype
L'attribut enctype est universellement pris en charge dans tous les principaux navigateurs depuis leurs premières versions, garantissant un fonctionnement fiable de l'upload de fichiers.
Différences entre HTML 4.01 et HTML5 pour enctype
AUCUNE différence. L'attribut enctype fonctionne de manière identique en HTML 4.01 et HTML5, avec les mêmes valeurs possibles et la même sémantique.
L'attribut method : méthode HTTP de soumission du formulaire
Définition et utilisation de l'attribut method
L'attribut method spécifie la méthode HTTP à utiliser pour envoyer les données du formulaire vers le serveur (la page spécifiée dans l'attribut action). Le choix entre GET et POST a des implications majeures sur la sécurité, la visibilité des données, et les limitations de taille.
Les données du formulaire peuvent être envoyées de deux manières principales : comme variables d'URL (avec method="get") ou comme transaction HTTP POST dans le corps de la requête (avec method="post"). Chaque méthode a ses cas d'usage appropriés.
Notes importantes sur GET vs POST
Caractéristiques de la méthode GET :
✓ Ajoute les données du formulaire dans l'URL sous forme de paires nom/valeur (exemple : page.php?nom=Dupont&prenom=Jean)
✗ La longueur d'URL est strictement limitée (environ 2000-3000 caractères selon les navigateurs et serveurs)
✗ Ne jamais utiliser GET pour envoyer des données sensibles ! (mots de passe, informations bancaires, etc.) car elles seront visibles dans l'URL, l'historique du navigateur, et les logs serveur
✓ Utile pour les soumissions de formulaire où un utilisateur souhaite mettre en favori ou partager le résultat (recherches, filtres, pagination)
✓ GET est idéal pour les opérations de lecture sans effet de bord (recherches Google, filtres de produits, etc.)
✓ Les requêtes GET sont cachées par les navigateurs et peuvent être mises en cache
Caractéristiques de la méthode POST :
✓ Ajoute les données du formulaire dans le corps de la requête HTTP (les données ne sont pas visibles dans l'URL)
✓ Ne présente aucune limitation de taille pratique (dépend uniquement de la configuration serveur)
✓ Recommandé pour toutes les soumissions contenant des données sensibles (authentification, paiements, informations personnelles)
✓ POST doit être utilisé pour les opérations qui modifient l'état du serveur (créer, mettre à jour, supprimer des ressources)
✓ Les données POST ne peuvent pas être mises en cache par le navigateur
✓ Ne peut pas être mis en favoris (comportement souhaité pour les actions modificatrices)
Syntaxe de l'attribut method
<form method="get|post">
Valeurs d'attribut method
| Valeur |
Description |
| get |
Valeur par défaut. Ajoute les données du formulaire à l'URL dans des paires nom/valeur sous le format : URL?nom=valeur&nom2=valeur2. Visible dans la barre d'adresse, limité en taille, idéal pour recherches et filtres.
|
| post |
Envoie les données du formulaire comme une transaction HTTP POST dans le corps de la requête. Invisible dans l'URL, sans limitation de taille, obligatoire pour données sensibles et upload de fichiers.
|
Exemple : soumission de formulaire avec la méthode GET
Formulaire utilisant GET, approprié pour une recherche ou un filtre non-sensible :
Exemple : 📋 Copier le code
<!-- Formulaire GET - Les données apparaîtront dans l'URL -->
<!-- Résultat : page-traitement.php?nom=Dupont&prenom=Jean -->
<form action="page-traitement.php" method="get">
<!-- Accessible en PHP via $_GET['nom'] -->
Nom : <input type="text" name="nom"><br>
<!-- Accessible en PHP via $_GET['prenom'] -->
Prénom : <input type="text" name="prenom"><br>
<input type="submit" value="Rechercher">
</form>
Exemple : soumission de formulaire avec la méthode POST
Formulaire utilisant POST, recommandé pour tout formulaire contenant des données sensibles ou volumineuses :
Exemple : 📋 Copier le code
<!-- Formulaire POST - Les données sont envoyées dans le corps de la requête -->
<!-- Les données ne sont PAS visibles dans l'URL -->
<form action="page-traitement.php" method="post">
<!-- Accessible en PHP via $_POST['nom'] -->
Nom : <input type="text" name="nom"><br>
<!-- Accessible en PHP via $_POST['prenom'] -->
Prénom : <input type="text" name="prenom"><br>
<input type="submit" value="Envoyer de manière sécurisée">
</form>
Support navigateur pour method
L'attribut method est universellement pris en charge dans tous les principaux navigateurs depuis leurs toutes premières versions, garantissant une compatibilité totale.
Différences entre HTML 4.01 et HTML5
AUCUNE différence. L'attribut method fonctionne de manière identique en HTML 4.01 et HTML5.
L'attribut name : identifier le formulaire
Définition et utilisation de l'attribut name
L'attribut name spécifie le nom d'identification unique du formulaire. Cet attribut est essentiel pour la manipulation et l'accès au formulaire via JavaScript et pour le traitement côté serveur.
L'attribut name est utilisé principalement pour référencer les éléments du formulaire en JavaScript (via document.forms['nomFormulaire'] ou document.nomFormulaire), et pour identifier le formulaire lors du traitement des données après soumission, notamment dans les applications complexes gérant plusieurs formulaires simultanément.
Syntaxe de l'attribut name
<form name="texte">
Valeurs d'attribut name
| Valeur |
Description |
| texte |
Spécifie le nom d'identification du formulaire. Doit être unique dans la page si vous souhaitez manipuler le formulaire en JavaScript. Utilisez des noms descriptifs et significatifs (exemples : "formulaireContact", "formInscription", "searchForm").
|
Exemple : formulaire avec attribut name pour manipulation JavaScript
Formulaire nommé permettant un accès facile via JavaScript :
Exemple : 📋 Copier le code
<!-- Formulaire avec nom pour accès JavaScript facile -->
<!-- Accessible via : document.forms['monFormulaire'] ou document.monFormulaire -->
<form action="page-traitement.php" method="get" name="monFormulaire">
<!-- Champs du formulaire -->
Nom : <input type="text" name="nom"><br>
Prénom : <input type="text" name="prenom"><br>
<input type="submit" value="Envoyer">
</form>
<!-- Exemple d'accès JavaScript -->
<script>
// Accéder au formulaire par son nom
const form = document.forms['monFormulaire'];
// ou : const form = document.monFormulaire;
// Accéder aux valeurs des champs
console.log(form.nom.value);
console.log(form.prenom.value);
</script>
Support navigateur pour name
L'attribut name est universellement pris en charge dans tous les principaux navigateurs.
Différences entre HTML 4.01 et HTML5
AUCUNE différence. L'attribut name fonctionne de manière identique.
Différences entre HTML et XHTML
Dans XHTML strict, l'attribut name est officiellement déconseillé (deprecated). Il est recommandé d'utiliser l'attribut id global à la place pour l'identification des formulaires, conformément aux standards XHTML plus rigoureux.
L'attribut novalidate : désactiver la validation HTML5
Définition et utilisation de novalidate
L'attribut novalidate est un attribut booléen HTML5 qui désactive la validation native du navigateur.
Lorsqu'il est présent, il spécifie que les données du formulaire (input) ne doivent pas être validées automatiquement par le navigateur lorsque le formulaire est soumis. Cet attribut est particulièrement utile lorsque vous souhaitez implémenter votre propre système de validation personnalisé en JavaScript, ou pour tester un formulaire sans être bloqué par les contraintes de validation.
Syntaxe de novalidate
<form novalidate>
Remarque sur les attributs booléens : L'attribut novalidate est un attribut booléen et peut être défini de plusieurs manières équivalentes conformément au standard HTML5 :
<form novalidate> <!-- Syntaxe HTML5 recommandée -->
<form novalidate="novalidate"> <!-- Syntaxe XHTML -->
<form novalidate=""> <!-- Syntaxe alternative -->
Exemple : formulaire sans validation automatique du navigateur
Ce formulaire ne sera pas validé automatiquement, permettant une validation JavaScript personnalisée :
Exemple : 📋 Copier le code
<!-- Formulaire sans validation native - utile pour validation JavaScript personnalisée -->
<form action="" novalidate>
<!-- Le champ email ne sera PAS validé par le navigateur même si invalide -->
<!-- Vous devrez implémenter votre propre validation en JavaScript -->
E-mail : <input type="email" name="user_email" required>
<input type="submit" value="Envoyer sans validation">
</form>
Support navigateur pour novalidate
L'attribut novalidate fonctionne dans tous les principaux navigateurs modernes, à l'exception notable d'Internet Explorer 9 et versions antérieures, et de Safari dans ses anciennes versions. Le support est maintenant excellent dans les navigateurs récents (IE 10+, tous les navigateurs modernes).
Différences entre HTML 4.01 et HTML5
L'attribut novalidate est une nouveauté HTML5. Il n'existait pas dans HTML 4.01 car la validation côté client native n'existait pas avant HTML5.
L'attribut target : destination de l'affichage de la réponse
Définition et utilisation de l'attribut target
L'attribut target spécifie un nom ou un mot-clé qui indique où afficher la réponse qui est reçue après avoir soumis et traité le formulaire. Cet attribut contrôle le contexte de navigation pour l'affichage du résultat.
L'attribut target définit un nom de contexte de navigation, ou un mot-clé prédéfini, pour un cadre de navigation (par exemple : nouvel onglet, même fenêtre, frame parent, ou iframe nommée).
Syntaxe de target
<form target="_blank|_self|_parent|_top|framename">
Valeurs d'attribut target : référence complète
| Valeur |
Description |
| _blank |
La réponse s'affiche dans une nouvelle fenêtre ou un nouvel onglet du navigateur. Utile pour ouvrir des résultats sans quitter la page courante, ou pour afficher des confirmations dans un contexte séparé.
|
| _self |
La réponse s'affiche dans le même cadre de navigation (la même fenêtre/onglet). C'est la valeur par défaut si l'attribut target n'est pas spécifié. Comportement standard pour la plupart des formulaires.
|
| _parent |
La réponse est affichée dans le cadre de navigation parent. Si le formulaire est dans une iframe, la réponse s'affiche dans la fenêtre qui contient l'iframe. Si pas de parent, équivaut à _self.
|
| _top |
La réponse s'affiche dans le corps entier de la fenêtre, remplaçant toutes les frames. Utile pour "sortir" d'un système de frames et afficher la réponse en plein écran.
|
| frameName |
La réponse est affichée dans une iframe ou frame nommée spécifique ayant le nom "frameName". Permet un contrôle précis de l'affichage dans des architectures multi-frames complexes.
|
Exemple : affichage de la réponse dans un nouvel onglet
Ce formulaire ouvrira la réponse dans une nouvelle fenêtre ou un nouvel onglet :
Exemple : 📋 Copier le code
<!-- La réponse s'ouvrira dans un nouvel onglet/fenêtre -->
<!-- Utile pour ne pas perdre le formulaire en cours -->
<form action="" target="_blank">
<!-- Champ email avec validation HTML5 -->
E-mail : <input type="email" name="user_email" required>
Support navigateur pour target
L'attribut target est universellement pris en charge dans tous les principaux navigateurs.
Différences entre HTML 4.01 et HTML5
L'attribut target est de nouveau pris en charge dans HTML5 après avoir été déprécié en HTML 4.01 Strict.
L'attribut target était déconseillé (deprecated) en HTML 4.01 Strict mais autorisé en HTML 4.01 Transitional.
Remarque sur l'utilisation moderne : Étant donné que les frames et framesets ne sont plus supportés dans HTML5 et sont considérés obsolètes, les valeurs _parent et framename sont aujourd'hui principalement utilisées avec les iframes modernes pour des cas d'usage spécifiques (widgets embarqués, intégrations tierces, etc.).
Exemples avancés de formulaires HTML : cas d'usage pratiques
Formulaire avec cases à cocher (checkboxes)
Les cases à cocher permettent une sélection multiple d'options. Voici un formulaire démontrant leur utilisation :
Exemple : 📋 Copier le code
<!-- Formulaire avec cases à cocher pour sélection multiple -->
<form action="" method="get">
<!-- Case à cocher pour moto - non cochée par défaut -->
<input type="checkbox" name="vehicule[]" value="Moto" id="moto">
<label for="moto">J'ai une moto</label><br>
<!-- Case à cocher pour voiture - cochée par défaut avec checked -->
<!-- Case à cocher pour vélo -->
Formulaire avec boutons radio (choix unique)
Les boutons radio permettent une sélection unique parmi plusieurs options. Exemple de formulaire avec choix de genre :
Exemple : 📋 Copier le code
<!-- Formulaire avec boutons radio pour choix exclusif -->
<form action="" method="get">
<!-- Bouton radio homme - même attribut "name" pour groupe -->
<input type="radio" name="sexe" value="Homme" id="homme">
<label for="homme">Je suis un homme</label><br>
<!-- Bouton radio femme - même "name" garantit choix unique -->
<!-- Bouton radio autre -->
Exemple : zone de texte multiligne (textarea) dans un formulaire
Formulaire intégrant une zone de saisie de texte multiligne pour commentaires ou messages longs :
Exemple : 📋 Copier le code
<!-- Formulaire avec zone de texte multiligne pour contenu long -->
<form name="formulaire_texte" action="Balise-FORM.html" method="get" target="_self">
<!-- Label pour accessibilité -->
<label for="message">Votre message :</label><br>
<!-- Textarea avec 4 lignes visibles et 40 colonnes de large -->
<!-- Bouton de soumission -->
<!-- Bouton de réinitialisation pour effacer tous les champs -->
Ressources complémentaires : pages en relation avec les formulaires HTML
Pour approfondir vos connaissances sur les formulaires HTML et leur traitement, consultez ces ressources complémentaires :
Les formulaires en HTML - Guide complet sur la création de formulaires web accessibles et fonctionnels
Manipulation et traitement de formulaires en PHP - Apprendre à traiter les données $_GET et $_POST côté serveur
jQuery sélecteurs des éléments de formulaire - Manipulation avancée des formulaires avec jQuery
Vous êtes ici : Balise <form>
Retour à la liste complète des balises HTML
