Navigateur	Rendu
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)

Navigateur	Rendu classique	Rendu travaillé
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
Firefox 57 (Mac OSX)	+ +	+ +	+ +	+ +
Firefox 57 (Windows 10)	+ +	+ +	+ +	+ +
Chrome 63 (Mac OSX)	+ +	+ +	+ +	+ +
Chrome 63 (Windows 10)	+ +	+ +	+ +	+ +
Opera 49 (Mac OSX)	+ +	+ +	+ +	+ +
IE11 (Windows 10)	+ +	+ +	+ +	+ +
Edge 16 (Windows 10)	+ +	+ +	+ +	+ +

Nom de l'attribut	Valeur par défaut	Description
`autofocus`	(false)	Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.
`disabled`	(false)	Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut `disabled` mis, l'élément est activé.
`form`		L'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut `id` d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.
`name`		Le nom de l'élément ; il sera soumis en même temps que les données du formulaire.
`value`		La valeur initiale de l'élément.

Attributs pour l'élément {{HTMLElement("textarea")}}
Nom de l'attribut	Valeur par défaut	Description
{{htmlattrxref("cols","textarea")}}	`20`	Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.
{{htmlattrxref("rows","textarea")}}		Nombre de lignes de texte visibles dans la boîte de contrôle.
{{htmlattrxref("wrap","textarea")}}	`soft`	Indique comment le contrôle va à la ligne. Les valeurs possibles sont : `hard` ou `soft`

Safari 6
Firefox 18
Safari 6	+ +
Firefox 18	+ +

Prérequis :	Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.
Objectif :	Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.
Prérequis :	+ Notions concernant les ordinateurs, une bonne compréhension du + HTML, des + CSS et de + JavaScript. +
Objectif :	+ Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est + important et comment la mettre en œuvre. +

Prenons un autre exemple. Créez une nouvelle copie du fichier fruit-start.html.

Supprimez maintenant le contenu de l'élément <body> et remplacez-le par le suivant :

Note : <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).

Exemple complet

Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :

Messages adaptés pour les erreurs

Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.

Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.

Versions françaises des navigateurs sur une page en anglais
Navigateur	Affichage
Firefox 17 (Windows 7)
Chrome 22 (Windows 7)
Opera 12.10 (Mac OSX)

HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :

Validation de formulaires avec JavaScript

Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.

API de contraintes de validation HTML5

De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.

Méthodes de l'API de validation des contraintes

Propriétés	Description
`validationMessage`	Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (`willValidate` est alors `false`), ou bien la valeur de l'élément satisfait ses contraintes.
`validity`	Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.
`validity.customError`	Renvoie `true` si l'élément à une erreur personnalisée, `false` a contrario.
`validity.patternMismatch`	Renvoie `true` si la valeur de l'élément ne correspond pas au motif fourni, `false` dans le cas contraire. Si la méthode renvoie `true`, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.
`validity.rangeOverflow`	Renvoie `true` si la valeur de l'élément est supérieure au maximum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
`validity.rangeUnderflow`	Renvoie `true` si la valeur de l'élément est plus petite que le minimum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
`validity.stepMismatch`	Renvoie `true` si la valeur de l'élément ne correspond pas aux règles définies par l'attribut `step`,`false` a contrario. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
`validity.tooLong`	Renvoie `true` si la taille de l'élément est supérieure à la longueur maximum définie, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
`validity.typeMismatch`	Renvoie `true` si la syntaxe de la valeur de l'élément n'est pas correcte ; `false` dans le cas contraire. Si le retour est `true`, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.
`validity.valid`	Renvoie `true` si la valeur de l'élément n'a pas de problème de validité, sinon `false`. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est `true` ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `false`.
`validity.valueMissing`	Renvoie `true` si l'élément n'a pas de valeur alors que le champ est requis, sinon`false`. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `true`.
`willValidate`	Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire.

Méthodes	Description
`checkValidity()`	Renvoie `true` si la valeur de l'élément n'a pas de problème de validation, `false` autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.
`setCustomValidity(message)`	Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.

Pour les anciens navigateurs, il existe une prothèse d'émulation (polyfill) comme Hyperform, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.

Exemple utilisant la validation des contraintes

Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :

Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.

L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.

CSS

Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.

JavaScript

{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}

L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS.

Valider des formulaires sans API intégrée

Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de widgets personnalisés, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.

Pour valider un formulaire, vous devez vous poser un certain nombre de questions:

Exemple sans utilisation de la validation des contraintes

Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:

Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

CSS

De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.

JavaScript

Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.

{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}

Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :

Validation à distance

Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.

Pour réaliser une telle validation, plusieurs précautions doivent être prises :

Conclusion

La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}

Dans ce module

État initial

HTML

CSS

Resultat pour l'état initial

État actif

HTML

CSS

Résultat pour état actif

État ouvert

HTML

CSS

Resultat pour état ouvert

HTML Content

CSS Content

Contenu JavaScript

Résultat avec JavaScript

Sans JS

HTML Content

CSS Content

Result for No JS

Changement d'état

Contenu HTML

Contenu du CSS

Contenu JavaScript

Résultat

Changement d'état

Contenu HTML

Contenu CSS

Contenu JavaScript

Résultat

Changement d'état

Contenu HTML

Contenu CSS

Contenu JavaScript

Résultat

Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.

Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.

Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.

Conception, structure et sémantique

Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.

Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :

Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).

En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :

Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.

Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :

Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.

Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches ↑ ou ↓ alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).

Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :

Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.

Definition de la structure HTML et de la sémantique

Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :

Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel » si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.

Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.

Sans JavaScript	Avec JavaScript
{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}	{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}
Testez le code source
+ {{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}} +	+ {{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}} +
+ Testez le code source +

Note : Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.

Rendre le travail plus facile

Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).

Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).

Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :

Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :

Construction des fonctions de rappel d'événements

Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.

C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.

A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.

Gérer la valeur du widget

Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.

La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.

Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :

Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :

Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}
Revoir le code source
+ {{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}} +
+ Revoir le code source +

Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.

Le rendre « accessible »

Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !

Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}
Revoir le code source
+ {{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}} +
+ Revoir le code source +

Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.

L'attribut role

L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).

Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle grid, et l'élément {{HTMLElement("ul")}} correspond au rôle list. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle listbox de notre widget remplacera le rôle list de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle presentation. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.

Pour prendre en charge le rôle listbos, nous n'avons qu'à mettre à jour notre HTML comme ceci :

Note : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.

+```html + + +``` + +> **Note :** Inclure à la fois l'attribut `role` et l'attribut `class` n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les [selecteurs d'attribut CSS](/fr/docs/CSS/Attribute_selectors "/en-US/docs/CSS/Attribute_selectors"). -

L'attribut `aria-selected`

+### L'attribut `aria-selected` -

Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.

+Utiliser l'attribut `role` ne suffit pas. [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : `aria-selected`. -

L'attribut aria-selected s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction updateValue() :

+L'attribut `aria-selected` s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction `updateValue()` : -

function updateValue(select, index) {
+```js
+function updateValue(select, index) {
   var nativeWidget = select.previousElementSibling;
   var value = select.querySelector('.value');
   var optionList = select.querySelectorAll('.option');
@@ -772,55 +824,60 @@ window.addEventListener('load', function () {
   nativeWidget.selectedIndex = index;
   value.innerHTML = optionList[index].innerHTML;
   highlightOption(select, optionList[index]);
-};

+}; +``` -

Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme NVDA ou VoiceOver) :

+Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme [NVDA](http://www.nvda-project.org/) ou [VoiceOver](http://www.apple.com/accessibility/voiceover/)) : - - - - - - - - - - - - - + + + + + + + + + + + + +

Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}
Revoir le code source
Exemple en direct
+ {{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}} +
+ Revoir le code source +

Conclusion

+## Conclusion -

Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).

+Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque). -

Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :

+Voici quelques bibliothèques à prendre en considération avant de coder les vôtres : -

+- [jQuery UI](http://jqueryui.com/) +- [msDropDown](https://github.com/marghoobsuleman/ms-Dropdown) +- [Nice Forms](http://www.emblematiq.com/lab/niceforms/) +- [et beaucoup d'autres…](https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a "https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a") -

Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !

+Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien ! -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}

+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}} -

Dans ce module

+## Dans ce module -

+- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md index 672ae945dd..8bb3667e4e 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md @@ -4,92 +4,95 @@ slug: Learn/Forms/How_to_structure_a_web_form/Example translation_of: Learn/Forms/How_to_structure_a_web_form/Example original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple --- -

Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

- -

Un formulaire de paiement

- -

Contenu HTML

- -

<form>
-        <h1>Formulaire de paiement</h1>
-        <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p>
-        <section>
-            <h2>Informations de contact</h2>
-            <fieldset>
-              <legend>Qualité</legend>
-              <ul>
-                  <li>
-                    <label for="title_1">
-                      <input type="radio" id="title_1" name="title" value="M." >
+Ceci est un exemple de formulaire de paiement basique extrait de l'article [Comment structurer un formulaire HTML](/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML "/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML").
+
+## Un formulaire de paiement
+
+### Contenu HTML
+
+```html
+
+        Formulaire de paiement
+        Les champs obligatoires sont suivis par *.
+        
+            Informations de contact
+            
+              Qualité
+              
+                  
+                    
+                      
                       Monsieur
-                    </label>
-                  </li>
-                  <li>
-                    <label for="title_2">
-                      <input type="radio" id="title_2" name="title" value="Mme.">
+                    
+                  
+                  
+                    
+                      
                       Madame
-                    </label>
-                  </li>
-              </ul>
-            </fieldset>
-            <p>
-              <label for="name">
-                <span>Nom :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="text" id="name" name="username">
-            </p>
-            <p>
-              <label for="mail">
-                <span>e-mail :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="email" id="mail" name="usermail">
-            </p>
-            <p>
-              <label for="password">
-                <span>Mot de passe :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="password" id="pwd" name="password">
-            </p>
-        </section>
-        <section>
-            <h2>Informations de paiement</h2>
-            <p>
-              <label for="card">
-                <span>Type de carte :</span>
-              </label>
-              <select id="card" name="usercard">
-                <option value="visa">Visa</option>
-                <option value="mc">Mastercard</option>
-                <option value="amex">American Express</option>
-              </select>
-            </p>
-            <p>
-              <label for="number">
-                <span>Numéro :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-                <input type="text" id="number" name="cardnumber">
-            </p>
-            <p>
-              <label for="date">
-                <span>Validité :</span>
-                <strong><abbr title="required">*</abbr></strong>
-                <em>format mm/aa</em>
-              </label>
-              <input type="text" id="date" name="expiration">
-            </p>
-        </section>
-        <section>
-            <p> <button type="submit">Valider le paiement</button> </p>
-        </section>
-    </form>

- -

Contenu CSS

- -

      h1 {
+                    
+                  
+              
+            
+            
+              
+                Nom :
+                *
+              
+              
+            
+            
+              
+                e-mail :
+                *
+              
+              
+            
+            
+              
+                Mot de passe :
+                *
+              
+              
+            
+        
+        
+            Informations de paiement
+            
+              
+                Type de carte :
+              
+              
+            
+            
+              
+                Numéro :
+                *
+              
+                
+            
+            
+              
+                Validité :
+                *
+                format mm/aa
+              
+              
+            
+        
+        
+              
+        
+    
+```
+
+### Contenu CSS
+
+```css
+      h1 {
           margin-top: 0;
       }
 
@@ -158,10 +161,9 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/
         position: absolute;
         right: 5px;
         top: 20px;
-      }

- -

Résultat

+ } +``` -

{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}

+### Résultat -

+{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }} diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md index 7f098d890e..2e3c1fd3fe 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -13,302 +13,313 @@ tags: translation_of: Learn/Forms/How_to_structure_a_web_form original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML --- -

+{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}} -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}

- -

Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

+Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire. - - - - - - - - - - + + + + + + + + + +

Prérequis :	Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :	Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.
Prérequis :	+ Notions concernant les ordinateurs et les + connaissances de base du HTML. +
Objectif :	+ Comprendre comment structurer les formulaires HTML et leur adjoindre la + sémantique pour qu'ils soient utilisables et accessibles. +

La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en HTML. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et accessible.

+La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en [HTML](/fr/docs/HTML "/en-US/docs/HTML"). vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et [accessible](/fr/docs/MDN/Doc_status/Accessibility). -

L'élément <form>

+## L'élément \

L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.

+L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser. -

Nous l'avons déjà rencontré dans l'article précédent.

+Nous l'avons déjà rencontré dans l'article précédent. -

Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé. -

+> **Note :** Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé. -

Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.

+Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript. -

Note : HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.

+> **Note :** HTML5 introduit l'attribut `form` dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable. -

Les éléments <fieldset> et <legend>

- -

L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.

- -

De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme Jaws ou NVDA énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.

- -

Voici un petit exemple :

- -

<form>
-  <fieldset>
-    <legend>Taille du jus de fruits</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Petite</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Moyenne</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Grande</label>
-    </p>
-  </fieldset>
-</form>

- -

Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).

+## Les éléments \

et \ -

En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.

+L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture \

. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur. -

Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.

+De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme [Jaws](http://www.freedomscientific.com/products/fs/jaws-product-page.asp) ou [NVDA](http://www.nvda-project.org/) énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget. -

En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.

+Voici un petit exemple : -

L'élément <label>

+```html + +

+ Taille du jus de fruits +

+ + Petite +

+ + Moyenne +

+ + Grande +

+ +``` -

Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :

+> **Note :** Vous trouverez cet exemple dans [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)). -

<label for="name">Nom :</label> <input type="text" id="name" name="user_name">

+En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième. -

Avec un élément <label> correctement associé à <input> par l'intermédiaire respectivement des attributs for et id (l'attribut for de <label> référence l'attibut id du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».

+Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation. -

Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.

+En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'[écouter comment un lecteur d'écran](https://www.nvaccess.org/download/) l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire. -

Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :

+## L'élément \ -

<label for="name">
-  Nom : <input type="text" id="name" name="user_name">
-</label>

+Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent : -

Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut for parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.

+```html +Nom : +``` -

Les étiquettes peuvent être cliquées, aussi !

+Avec un élément `` correctement associé à `` par l'intermédiaire respectivement des attributs `for` et `id` (l'attribut `for` de \ référence l'attibut `id` du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ». -

Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.

+Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout. -

Par exemple :

+Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi : -

<form>
-  <p>
-    <label for="taste_1">J'aime les cerises</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">J'aime les bananes</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>

+```html + + Nom : + +``` -

Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).

+Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut `for` parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets. -

Étiquettes multiples

+### Les étiquettes peuvent être cliquées, aussi ! -

En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.

+Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible. -

Considérons cet exemple :

+Par exemple : -

<p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
+```html
+
+  
+    J'aime les cerises
+    
+  
+  
+    J'aime les bananes
+    
+  
+
+```
 
-<!-- Donc ceci : -->
-<div>
-  <label for="username">Nom :</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
+> **Note :** Vous trouverez cet exemple dans [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)).
 
-<!-- sera mieux programmé ainsi : -->
-<div>
-  <label for="username">
-    <span>Nom :</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
+### Étiquettes multiples
 
-<!-- mais ceci est probablement encore meilleur : -->
-<div>
-  <label for="username">Nom :<abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>

+En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}. -

Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.

+Considérons cet exemple : -

Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments <label> embrouillent le lecteur d'écran.
Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.
Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».

+```html +

Les champs obligatoires sont suivis de *.

Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.

+ +

+ Nom : + + *

Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !

+ +

+ + Nom : + + * +

Structures HTML courantes dans les formulaires

- -

Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.

- -

Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).

- -

En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.

- -

Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.

- -

Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.

- -

Apprentissage actif : construire une structure de formulaire

- -

Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (Les widgets natifs pour formulaire). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.

- -

Pour commencer, faites une copie locale de notre fichier modèle vierge et des CSS pour notre formulaire de paiement dans un nouveau répertoire.
Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : -
```
<link href="payment-form.css" rel="stylesheet">
```
-
Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : -
```
<form>
-
-</form>
```
-
Entre les balises <form>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : -
```
<h1>Formulaire de paiement</h1>
-<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
```
-

Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : -

<section>
-    <h2>Informations de contact</h2>
-    <fieldset>
-      <legend>Qualité</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="M." >
-              Monsieur
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Mme.">
-              Madame
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Nom : </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>e-mail :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Mot de passe :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>

Nous arrivons maintenant à la deuxième <section> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <p>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément <input> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <input> de type date pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : -

-<section>
-    <h2>Informations de paiement</h2>
-    <p>
-      <label for="card">
-        <span>Type de carte :</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Numéro de carte :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Validité :</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>format mm/aa</em>
-      </label>
-      <input type="text" id="date" name="expiration">
-    </p>
-</section>

La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type submit, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : -
```
<p> <button type="submit">Valider le paiement</button> </p>
```
-

- -

Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la source payment-form.html et une exécution directe):

- -

{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}

- -

Résumé

- -

Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur.

- -

Voir aussi

- -

A List Apart: Sensible Forms: A Form Usability Checklist

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- -

+ +

+ Nom :* + +

+``` + +Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe. + +- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments \ embrouillent le lecteur d'écran. +- Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée. +- Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ». + +> **Note :** Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également. + +> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID ! + +## Structures HTML courantes dans les formulaires + +Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire. + +Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio). + +En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe. + +Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables. + +Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}. + +### Apprentissage actif : construire une structure de formulaire + +Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi. + +1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement ](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css)dans un nouveau répertoire. +2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : + + ```html + + ``` + +3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : + + ```html + + ``` + +4. Entre les balises `

`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : + + ```html +

Formulaire de paiement

Les champs obligatoires sont suivis par un *.

+ ``` + +5. Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : + + ```html +

Informations de contact

+ Qualité +

+ + + Monsieur + +
+ + + Madame + +

+ + Nom : + * + + +

+ + e-mail : + * + + +

+ + Mot de passe : + * + + +

+ ``` + +6. Nous arrivons maintenant à la deuxième `

` de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe `

`. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément `` de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément `` de type `date` pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : + + ```html +

Informations de paiement

+ + Type de carte : + + +

+ + Numéro de carte : + * + + +

+ + Validité : + * + format mm/aa + + +

+ ``` + +7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : + + ```html +

+ ``` + +Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la [source](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html) payment-form.html et une exécution [directe](https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html)): + +{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}} + +## Résumé + +Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur. + +## Voir aussi + +- [A List Apart: _Sensible Forms: A Form Usability Checklist_](http://www.alistapart.com/articles/sensibleforms/) + +{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}} + +## Dans ce module + +- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- Comment structurer un formulaire HTML +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md index 7f12753fa5..e9380806b1 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -4,111 +4,124 @@ slug: Learn/Forms/HTML_forms_in_legacy_browsers translation_of: Learn/Forms/HTML_forms_in_legacy_browsers original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers --- -

{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}

+{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}} -

Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».

+Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la [version ESR,](http://www.mozilla.org/en-US/firefox/organizations/) sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ». -

Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.

+Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur. -

S'informer sur les difficultés

+## S'informer sur les difficultés -

En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :

+En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles : -

Documentation du fournisseur du navigateur

+### Documentation du fournisseur du navigateur -

Mozilla : vous êtes au bon endroit, explorez juste MDN
Microsoft : Documentation sur la prise en charge de la norme par Internet Explorer
WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : -
- le Blog WebKit et Planet WebKit rassemblent les meilleurs articles par les déveoppeurs WebKit.
- le site État de la plateforme Chrome est aussi importante.
- ainsi que le site web Apple .
-

+- Mozilla : vous êtes au bon endroit, explorez juste MDN +- Microsoft : [Documentation sur la prise en charge de la norme par Internet Explorer](http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx) +- WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : -

Documentation indépendante

+ - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit. + - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante. + - ainsi que le[ site web Apple .](https://developer.apple.com/technologies/safari/) -

Can I Use a des informations sur la prise en charge des techniques avancées.
Quirks Mode est une surprenante ressource sur la compatibilité des divers navigateurs. La partie sur les mobiles est la meilleure actuellement disponible.
Position Is Everything est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).
Mobile HTML5 dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).

+### Documentation indépendante -

Rendre les choses simples

+- [Can I Use](http://caniuse.com) a des informations sur la prise en charge des techniques avancées. +- [Quirks Mode](http://www.quirksmode.org) est une surprenante ressource sur la compatibilité des divers navigateurs. [La partie sur les mobiles](http://www.quirksmode.org/mobile/) est la meilleure actuellement disponible. +- [Position Is Everything](http://positioniseverything.net/) est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant). +- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry). -

+## Rendre les choses simples -

Comme les formulaires HTML impliquent des interactions complexes, une règle empirique : restez aussi simple que possible. Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'ergonomie des formulaires sur UX For The Masses (en anglais).

La simplification élégante est la meilleure amie du développeur Web

Une simplification élégante et des améliorations progressives sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.

+Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique : [restez aussi simple que possible](https://fr.wikipedia.org/wiki/Principe_KISS). Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'[ergonomie des formulaires sur UX For The Masses](http://www.uxforthemasses.com/forms-usability/) (en anglais). -

Voyons quelques exemples relatifs aux formulaires en HTML.

+### La simplification élégante est la meilleure amie du développeur Web -

Types d'entrées en HTML

+[Une simplification élégante et des améliorations progressives](http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/) sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante. -

Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur text en recours.

+Voyons quelques exemples relatifs aux formulaires en HTML. -

<label for="myColor">
+#### Types d'entrées en HTML
+
+Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur `text` en recours.
+
+```html
+
  Choisir une couleur
-  <input type="color" id="myColor" name="color">
-</label>

+ + +``` - - - - - - - - - - - - + + + + + + + + + + + +

Chrome 24	Firefox 18

Chrome 24	Firefox 18
+ +	+ +

Sélecteurs d'attributs CSS

+#### Sélecteurs d'attributs CSS -

Les sélecteurs d'attributs CSS sont très utiles avec les formulaires HTML, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :

+Les [sélecteurs d'attributs CSS](/fr/docs/Web/CSS/Sélecteurs_d_attribut "/en-US/docs/CSS/Attribute_selectors") sont très utiles avec les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires), mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente : -

<input type="number" class="number">

+```html + +``` -

input[type=number] {
+```css
+input[type=number] {
   /* Ceci peut échouer avec certains navigateurs */
 }
 
 input.number {
   /* Ceci fonctionne partout */
-}

+} +``` -

Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :

+Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs : -

input[type=number],
+```css
+input[type=number],
 input.number {
   /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas
      l'un des sélecteurs, il sautent la totalité de la règle */
-}

+} +``` -

Boutons et formulaires

+#### Boutons et formulaires -

Il y a deux manières de définir un bouton dans un formulaire HTML :

+Il y a deux manières de définir un bouton dans un formulaire HTML : -

un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs button, submit, reset ou image
un élément {{HTMLElement("button")}}

+- un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs `button`, `submit`, `reset` ou `image` +- un élément {{HTMLElement("button")}} -

L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :

+L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément : -

<input type="button" class="button" value="Cliquez‑moi">

+```html + +``` -

input {
+```css
+input {
   /* Cette règle annule le rendu par défaut défini avec un élément input */
   border: 1px solid #CCC;
 }
@@ -122,52 +135,50 @@ input.button {
   /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
      le faire quel que soit le navigateur */
   border: auto;
-}

+} +``` -

L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :

+L'élément {{HTMLElement("button")}} présente deux problèmes potentiels : -

-
un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.
-
certains navigateurs très anciens n'utilisent pas submit comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.

+- un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique. +- certains navigateurs très anciens n'utilisent pas `submit` comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}. -

<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
-<button type="submit" name="IWantTo" value="A">
-  <em>Do A</em>
-</button>

+```html + + +``` -

Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.

+Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet. -

Laissez tomber les CSS

+### Laissez tomber les CSS -

Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la Table de compatibilité des propriétés pour les widgets de formulaire, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la construction de widgets avec JavaScript. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.

+Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets), c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la [construction de widgets avec JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés). Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice. -

Détection de fonctionnalité et prothèses d'émulation (polyfills)

+## Détection de fonctionnalité et prothèses d'émulation (_polyfills_) -

Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.

+Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique. -

JavaScript non obstructif

+### JavaScript non obstructif -

Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :

+Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations : -

une séparation stricte entre structure et comportement.
si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.

+- une séparation stricte entre structure et comportement. +- si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables. -

Les principes d'un JavaScript non obstructif (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.

+[Les principes d'un JavaScript non obstructif](http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript) (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées. -

La bibliothèque Modernizr

+### La bibliothèque Modernizr -

Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « polyfill » est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.

+Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « [polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave. -

La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque Modernizr et son projet dérivé : YepNope. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.

+La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque [Modernizr](http://modernizr.com) et son projet dérivé : [YepNope](http://yepnopejs.com). Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels. -

Voici un exemple :

+Voici un exemple : -

Modernizr.load({
+```js
+Modernizr.load({
   // Cette ligne teste si le navigateur prend en charge l'API
   // de validation de formulaires HTML5
   test : Modernizr.formvalidation,
@@ -184,38 +195,35 @@ input.button {
   complete : function () {
     app.init();
   }
-});

+}); +``` -

L'équipe de Modernizr fait une maintenance opportune de grande liste de « polyfills ». Prenez celui dont vous avez besoin.

+L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin. -

Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de la documentation de Modernizr.

+> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [ la documentation de Modernizr](http://modernizr.com/docs/). -

Faites attention aux performances

+### Faites attention aux performances -

Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.

+Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final. -

Conclusion

+## Conclusion -

Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.

+Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article. -

Si vous avez lu tous les articles de ce guide à propos des formulaires en HTML, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à améliorer ce guide.

+Si vous avez lu tous les articles de ce [guide à propos des formulaires en HTML](/fr/docs/Web/Guide/HTML/Forms_in_HTML), vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à [améliorer ce guide](/fr/docs/MDN/Débuter_sur_MDN). -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}

+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}} -

Dans ce module

+## Dans ce module -

+- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md index 76832228f3..9f5717dd41 100644 --- a/files/fr/learn/forms/index.md +++ b/files/fr/learn/forms/index.md @@ -11,70 +11,56 @@ tags: translation_of: Learn/Forms original_slug: Web/Guide/HTML/Formulaires --- -

+{{learnSidebar}} -

Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.

+Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure. -

Prérequis

+## Prérequis -

Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre Introduction au HTML. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les widgets natifs pour formulaire.

+Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs). -

Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des CSS et du JavaScript.

+Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des [CSS](/fr/Apprendre/CSS/Introduction_à_CSS) et du [JavaScript](/fr/docs/Apprendre/JavaScript). -

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.

+> **Note :** Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -

Éléments de base

+## Éléments de base -

Mon premier formulaire HTML: Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.
Comment structurer un formulaire HTML: Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

+- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) + - : Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur. +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML "/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML") + - : Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire. -

Quels sont les widgets pour formulaire disponibles ?

+## Quels sont les widgets pour formulaire disponibles ? -

Les widgets natifs pour formulaire: Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.

+- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) + - : Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données. -

Validation et soumission des données de formulaires

+## Validation et soumission des données de formulaires -

Envoi des données de formulaire: Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
Validation des données de formulaire: Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.

+- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) + - : Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire. +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) + - : Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir. -

Guides avancés

+## Guides avancés -

Comment construire des widgets de formulaires personnalisés: Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
Envoi de formulaires à l'aide du JavaScript: Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
Formulaires HTML dans les navigateurs anciens: Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.

+- [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) + - : Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier. +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) + - : Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) + - : Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée. -

Guides de mise en forme des formulaires

+## Guides de mise en forme des formulaires -

Mise en forme des formulaires HTML: Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.
Mise en forme avancée des formulaires HTML: Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.
Tableau de compatibilité des propriétés entre widgets de formulaire: Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.

+- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) + - : Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires. +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) + - : Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter. +- [Tableau de compatibilité des propriétés entre widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets) + - : Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire. -

Voir aussi

+## Voir aussi -

+- [Référentiel pour éléments de formulaire HTML](/fr/docs/Web/HTML/Element#Forms) +- [Référentiel pour les types \ en HTML](/fr/docs/Web/HTML/Element/input) diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md index 5dea78fc0c..e4193009bc 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -13,39 +13,36 @@ tags: translation_of: Learn/Forms/Property_compatibility_table_for_form_controls original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets --- -

{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

+{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}} -

Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.

+Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses. -

Comment lire les tables

+## Comment lire les tables -

Valeurs

+### Valeurs -

Pour chaque propriété, il y a quatre valeurs possibles :

+Pour chaque propriété, il y a quatre valeurs possibles : -

OUI: La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
PARTIEL: Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.
NON: La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.
N.A.: La propriété n'a aucune signification pour ce type de widget.

+- OUI + - : La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites. +- PARTIEL + - : Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires. +- NON + - : La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable. +- N.A. + - : La propriété n'a aucune signification pour ce type de widget. -

Rendu

+### Rendu -

Pour chaque propriété il y a deux rendus possibles :

+Pour chaque propriété il y a deux rendus possibles : -

N (Normal): Indique que la propriété est appliquée telle quelle.
A (Altéré): Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :

+- N (Normal) + - : Indique que la propriété est appliquée telle quelle. +- A (Altéré) + - : Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous : -

* {
+```css
+* {
 /* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
   -webkit-appearance: none;
 
@@ -55,1938 +52,2125 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
 /* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
    y compris Opera, Internet Explorer et Firefox */
   background: none;
-}

+} +``` -

Tables de compatibilité

+## Tables de compatibilité -

Comportements globaux

+### Comportements globaux -

Certains comportements sont communs à de nombreux navigateurs au niveau global :

+Certains comportements sont communs à de nombreux navigateurs au niveau global : -

{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}: L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.
{{cssxref("line-height")}}: Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.
{{cssxref("text-decoration")}}: Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.
{{cssxref("text-overflow")}}: Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.
{{cssxref("text-shadow")}}: Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.

+- {{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}} + - : L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez. +- {{cssxref("line-height")}} + - : Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter. +- {{cssxref("text-decoration")}} + - : Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire. +- {{cssxref("text-overflow")}} + - : Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire. +- {{cssxref("text-shadow")}} + - : Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge. -

Champs texte

+### Champs texte - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Oui	- - Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser `-webkit-appearance:none` pour pouvoir appliquer cette propriété aux champs de recherche. - Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que `background:none` ne soit utilisé. - -
{{cssxref("border")}}	Partiel	Oui	- - Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser `-webkit-appearance:none` pour pouvoir appliquer cette propriété aux champs de recherche. - Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que `background:none` ne soit utilisé. - -
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Oui	- - Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser `-webkit-appearance:none` pour pouvoir appliquer cette propriété aux champs de recherche. - Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que `background:none` ne soit utilisé. - -
Texte et polices
{{cssxref("color")}}	Oui	Oui	- - Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}. - -
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}	Oui	Oui
{{cssxref("text-align")}}	Oui	Oui
{{cssxref("text-decoration")}}	Partiel	Partiel	Voir la note à propos de Opera
{{cssxref("text-indent")}}	Partiel	Partiel	- - IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne. - -
{{cssxref("text-overflow")}}	Partiel	Partiel
{{cssxref("text-shadow")}}	Partiel	Partiel
{{cssxref("text-transform")}}	Oui	Oui
Bordure et arrière-plan
{{cssxref("background")}}	Partiel	Oui	- - Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser `-webkit-appearance:none` pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que `background:none` ne soit utilisé. - -
{{cssxref("border-radius")}}	Partiel	Oui	- - Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser `-webkit-appearance:none` pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que `background:none` ne soit utilisé. - Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie. - -
{{cssxref("box-shadow")}}	Non	Partiel	- - IE9 ne prend pas en charge cette propriété. - -
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Oui	+ + + Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent + apparence et comportement natifs pour les champs de recherche. Par + conséquent, il est nécessaire d'utiliser + `-webkit-appearance:none` pour pouvoir appliquer cette + propriété aux champs de recherche. + + + Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à + moins que `background:none` ne soit utilisé. + + +
{{cssxref("border")}}	Partiel	Oui	+ + + Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent + apparence et comportement natifs pour les champs de recherche. Par + conséquent, il est nécessaire d'utiliser + `-webkit-appearance:none` pour pouvoir appliquer cette + propriété aux champs de recherche. + + + Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à + moins que `background:none` ne soit utilisé. + + +
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Oui	+ + + Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent + apparence et comportement natifs pour les champs de recherche. Par + conséquent, il est nécessaire d'utiliser + `-webkit-appearance:none` pour pouvoir appliquer cette + propriété aux champs de recherche. + + + Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à + moins que `background:none` ne soit utilisé. + + +
Texte et polices
{{cssxref("color")}}	Oui	Oui	+ + + Si la propriété {{cssxref("border-color")}} n'est pas + mentionnée, certains navigateurs fondés sur WebKit appliqueront la + propriété {{cssxref("color")}} aussi bien à la bordure qu'à + la police avec l'élément {{HTMLElement("textarea")}}. + + +
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}	Oui	Oui
{{cssxref("text-align")}}	Oui	Oui
{{cssxref("text-decoration")}}	Partiel	Partiel	Voir la note à propos de Opera
{{cssxref("text-indent")}}	Partiel	Partiel	+ + + IE9 prend en charge cette propriété uniquement sur les éléments + {{HTMLElement("textarea")}}, alors que Opera ne la prend en + charge que sur les champs texte sur une ligne. + + +
{{cssxref("text-overflow")}}	Partiel	Partiel
{{cssxref("text-shadow")}}	Partiel	Partiel
{{cssxref("text-transform")}}	Oui	Oui
Bordure et arrière-plan
{{cssxref("background")}}	Partiel	Oui	+ + + Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent + apparence et comportement natifs pour les champs de recherche. Par + conséquent, il est nécessaire d'utiliser`+ -webkit-appearance:none` + pour pouvoir appliquer cette propriété aux champs de recherche. Sous + Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que + `background:none` ne soit utilisé. + + +
{{cssxref("border-radius")}}	Partiel	Oui	+ + + Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent + apparence et comportement natifs pour les champs de recherche. Par + conséquent, il est nécessaire d'utiliser`+ -webkit-appearance:none` + pour pouvoir appliquer cette propriété aux champs de recherche. Sous + Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que + `background:none` ne soit utilisé. + + + Sur Opera la propriété {{cssxref("border-radius")}} n'est + appliquée que si une bordure est explicitement définie. + + +
{{cssxref("box-shadow")}}	Non	Partiel	+ + IE9 ne prend pas en charge cette propriété. + +

Boutons

+### Boutons - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Oui	- - Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS. - -
{{cssxref("border")}}	Partiel	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Oui	- - Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS. - -
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}	Oui	Oui
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Partiel	Oui
{{cssxref("text-indent")}}	Oui	Oui
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Partiel	Partiel
{{cssxref("text-transform")}}	Oui	Oui
Bordure et arrière-plan
{{cssxref("background")}}	Oui	Oui
{{cssxref("border-radius")}}	Yes	Yes	- - Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie. - -
{{cssxref("box-shadow")}}	Non	Partiel	- - IE9 ne prend pas en charge cette propriété. - -
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Oui	+ + + Cette propriété n'est pas appliquée sur les navigateurs fondés sur + WebKit sur Mac OSX ou iOS. + + +
{{cssxref("border")}}	Partiel	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Oui	+ + + Cette propriété n'est pas appliquée sur les navigateurs fondés sur + WebKit sur Mac OSX ou iOS. + + +
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}	Oui	Oui
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Partiel	Oui
{{cssxref("text-indent")}}	Oui	Oui
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Partiel	Partiel
{{cssxref("text-transform")}}	Oui	Oui
Bordure et arrière-plan
{{cssxref("background")}}	Oui	Oui
{{cssxref("border-radius")}}	Yes	Yes	+ + + Sur Opera la propriété {{cssxref("border-radius")}} n'est + appliquée que si une bordure est explicitement définie. + + +
{{cssxref("box-shadow")}}	Non	Partiel	+ + IE9 ne prend pas en charge cette propriété. + +

Widget `number`

+### Widget `number` -

Sur les navigateurs qui implémentent le widget number, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.

+Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Partiel	- - Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ. - -
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Partiel	- - Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ. - -
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}	Oui	Oui
{{cssxref("text-align")}}	Oui	Oui
{{cssxref("text-decoration")}}	Partiel	Partiel
{{cssxref("text-indent")}}	Oui	Oui
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Partiel	Partiel
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière‑plan
{{cssxref("background")}}	Non	Non	- Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. -
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Partiel	+ + + Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu + du champ. + + +
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Partiel	+ + + Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu + du champ. + + +
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}	Oui	Oui
{{cssxref("text-align")}}	Oui	Oui
{{cssxref("text-decoration")}}	Partiel	Partiel
{{cssxref("text-indent")}}	Oui	Oui
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Partiel	Partiel
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière‑plan
{{cssxref("background")}}	Non	Non	+ + Pris en charge mais il y a trop d'incohérence entre les navigateurs + pour que ce soit fiable. + +
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non

Cases à cocher et boutons radio

+### Cases à cocher et boutons radio - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non	- - Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget. - -
{{cssxref("height")}}	Non	Non	- - Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget. - -
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	Non	Non
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non	+ + + Certains navigateurs ajoutent des marges supplémentaires et d'autres + étirent le widget. + + +
{{cssxref("height")}}	Non	Non	+ + + Certains navigateurs ajoutent des marges supplémentaires et d'autres + étirent le widget. + + +
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	Non	Non
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non

Boîtes à sélection (ligne unique)

+### Boîtes à sélection (ligne unique) -

Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.

+Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Partiel	Partiel	- - Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}. - -
{{cssxref("height")}}	Non	Oui
{{cssxref("border")}}	Partiel	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Partiel	- - La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX. - La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}. - -
Texte et polices
{{cssxref("color")}}	Partiel	Partiel	- - Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}. - -
{{cssxref("font")}}	Partiel	Partiel	- - Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}. - -
{{cssxref("letter-spacing")}}	Partiel	Partiel	- - IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}. - -
{{cssxref("text-align")}}	No	No	- - IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget. - -
{{cssxref("text-decoration")}}	Partiel	Partiel	- - Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément {{HTMLElement("select")}}. - -
{{cssxref("text-indent")}}	Partiel	Partiel	- - La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}. - IE9 ne prend pas en charge cette propriété. - -
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Partiel	Partiel	- - La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}. - IE9 ne prend pas en charge cette propriété. - -
{{cssxref("text-transform")}}	Partiel	Partiel	- - La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}. - -
Bordure et arrière-plan
{{cssxref("background")}}	Partiel	Partiel	- - La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}. - -
{{cssxref("border-radius")}}	Partiel	Partiel
{{cssxref("box-shadow")}}	Non	Partiel
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Partiel	Partiel	+ + + Cette propriété est correcte sur l'élément + {{HTMLElement("select")}}, mais cela peut ne pas être le cas + sur les éléments {{HTMLElement("option")}} ou + {{HTMLElement("optgroup")}}. + + +
{{cssxref("height")}}	Non	Oui
{{cssxref("border")}}	Partiel	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Partiel	+ + + La propriété est appliquée, mais de manière incohérente entre + navigateurs sous Mac OSX. + + + La propriété est bien appliquée sur l'élément + {{HTMLElement("select")}}, mais est traitée de manière + incohérente sur les éléments {{HTMLElement("option")}} et + {{HTMLElement("optgroup")}}. + + +
Texte et polices
{{cssxref("color")}}	Partiel	Partiel	+ + + Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en + charge cette propriété sur les widgets natifs et, avec Opera, ils ne + la prennent pas du tout en charge sur les éléments + {{HTMLElement("option")}} et + {{HTMLElement("optgroup")}}. + + +
{{cssxref("font")}}	Partiel	Partiel	+ + + Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en + charge cette propriété sur les widgets natifs et, avec Opera, ils ne + la prennent pas du tout en charge sur les éléments + {{HTMLElement("option")}} et + {{HTMLElement("optgroup")}}. + + +
{{cssxref("letter-spacing")}}	Partiel	Partiel	+ + + IE9 ne prend pas en charge cette propriété sur les éléments + {{HTMLElement("select")}}, {{HTMLElement("option")}}, + et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur + WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les + éléments {{HTMLElement("option")}} et + {{HTMLElement("optgroup")}}. + + +
{{cssxref("text-align")}}	No	No	+ + + IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX + ne prennent pas en charge cette propriété pour ce widget. + + +
{{cssxref("text-decoration")}}	Partiel	Partiel	+ + + Seul Firefox fournit une prise en charge totale de cette propriété. + Opera ne la prend pas du tout en charge et d'autres navigateur ne le + font que pour l'élément {{HTMLElement("select")}}. + + +
{{cssxref("text-indent")}}	Partiel	Partiel	+ + + La plupart des navigateurs ne prennent en charge cette propriété que + pour l'élément {{HTMLElement("select")}}. + + IE9 ne prend pas en charge cette propriété. + +
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Partiel	Partiel	+ + + La plupart des navigateurs ne prennent en charge cette propriété que + pour l'élément {{HTMLElement("select")}}. + + IE9 ne prend pas en charge cette propriété. + +
{{cssxref("text-transform")}}	Partiel	Partiel	+ + + La plupart des navigateurs ne prennent en charge cette propriété que + pour l'élément {{HTMLElement("select")}}. + + +
Bordure et arrière-plan
{{cssxref("background")}}	Partiel	Partiel	+ + + La plupart des navigateurs ne prennent en charge cette propriété que + pour l'élément {{HTMLElement("select")}}. + + +
{{cssxref("border-radius")}}	Partiel	Partiel
{{cssxref("box-shadow")}}	Non	Partiel

Boîtes à sélection (multilignes)

+### Boîtes à sélection (multilignes) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Oui	Oui
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Partiel	- - Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}. - -
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}	Partiel	Partiel	- - IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}. - -
{{cssxref("text-align")}}	No	No	- - IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget. - -
{{cssxref("text-decoration")}}	No	No	- - Uniquement pris en charge par Firefox et IE9+. - -
{{cssxref("text-indent")}}	Non	Non
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Partiel	Partiel	- - La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}. - -
Bordure et arrière-plan
{{cssxref("background")}}	Oui	Oui
{{cssxref("border-radius")}}	Yes	Yes	- - Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie. - -
{{cssxref("box-shadow")}}	Non	Partiel	- - IE9 ne prend pas en charge cette propriété. - -
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Oui	Oui
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Partiel	+ + + Opera ne prend pas en charge {{cssxref("padding-top")}} et + {{cssxref("padding-bottom")}} sur l'élément + {{HTMLElement("select")}}. + + +
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	Oui	Oui	Voir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}	Partiel	Partiel	+ + + IE9 ne prend pas en charge cette propriété sur les éléments + {{HTMLElement("select")}}, {{HTMLElement("option")}}, + et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur + WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les + éléments {{HTMLElement("option")}} et + {{HTMLElement("optgroup")}}. + + +
{{cssxref("text-align")}}	No	No	+ + + IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX + ne prennent pas en charge cette propriété sur ce widget. + + +
{{cssxref("text-decoration")}}	No	No	+ + Uniquement pris en charge par Firefox et IE9+. + +
{{cssxref("text-indent")}}	Non	Non
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Partiel	Partiel	+ + + La plupart des navigateurs ne prennent en charge cette propriété que + pour l'élément {{HTMLElement("select")}}. + + +
Bordure et arrière-plan
{{cssxref("background")}}	Oui	Oui
{{cssxref("border-radius")}}	Yes	Yes	+ + + Sur Opera la propriété {{cssxref("border-radius")}} n'est + appliquée que si une bordure est explicitement définie. + + +
{{cssxref("box-shadow")}}	Non	Partiel	+ + IE9 ne prend pas en charge cette propriété. + +

Datalist

+### Datalist - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non
{{cssxref("height")}}	Non	Non
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Non	Non
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	Non	Non
{{cssxref("font")}}	Non	Non
{{cssxref("letter-spacing")}}	Non	Non
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Non	Non
{{cssxref("text-indent")}}	Non	Non
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Non	Non
Bordure et arrière-plan
{{cssxref("background")}}	Non	Non
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non
{{cssxref("height")}}	Non	Non
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Non	Non
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	Non	Non
{{cssxref("font")}}	Non	Non
{{cssxref("letter-spacing")}}	Non	Non
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Non	Non
{{cssxref("text-indent")}}	Non	Non
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Non	Non
Bordure et arrière-plan
{{cssxref("background")}}	Non	Non
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non

Sélecteur de fichiers

+### Sélecteur de fichiers - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non
{{cssxref("height")}}	Non	Non
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	No	No	- - Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. - -
{{cssxref("letter-spacing")}}	Partiel	Partiel	- - Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection. - -
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Non	Non
{{cssxref("text-indent")}}	Partiel	Partiel	- - Agit plus ou moins comme une marge supplementaire en dehors du widget. - -
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Non	Non
Bordure et arrière-plan
{{cssxref("background")}}	No	No	- - Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. - -
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Partiel	- - IE9 ne prend pas en charge cette propriété. - -
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non
{{cssxref("height")}}	Non	Non
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	Oui	Oui
{{cssxref("font")}}	No	No	+ + + Pris en charge mais il y a trop d'incohérence entre les navigateurs + pour que ce soit fiable. + + +
{{cssxref("letter-spacing")}}	Partiel	Partiel	+ + + Beaucoup de navigateurs appliquent cette propriété sur le bouton de + sélection. + + +
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Non	Non
{{cssxref("text-indent")}}	Partiel	Partiel	+ + + Agit plus ou moins comme une marge supplementaire en dehors du + widget. + + +
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Non	Non
Bordure et arrière-plan
{{cssxref("background")}}	No	No	+ + + Pris en charge mais il y a trop d'incohérence entre les navigateurs + pour que ce soit fiable. + + +
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Partiel	+ + IE9 ne prend pas en charge cette propriété. + +

Sélecteurs de date

+### Sélecteurs de date -

Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

+Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non
{{cssxref("height")}}	Non	Non
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	Non	Non
{{cssxref("font")}}	Non	Non
{{cssxref("letter-spacing")}}	Non	Non
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Non	Non
{{cssxref("text-indent")}}	Non	Non
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Non	Non
Bordure et arrière-plan
{{cssxref("background")}}	Non	Non
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Non	Non
{{cssxref("height")}}	Non	Non
{{cssxref("border")}}	Non	Non
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Non	Non
Texte et polices
{{cssxref("color")}}	Non	Non
{{cssxref("font")}}	Non	Non
{{cssxref("letter-spacing")}}	Non	Non
{{cssxref("text-align")}}	Non	Non
{{cssxref("text-decoration")}}	Non	Non
{{cssxref("text-indent")}}	Non	Non
{{cssxref("text-overflow")}}	Non	Non
{{cssxref("text-shadow")}}	Non	Non
{{cssxref("text-transform")}}	Non	Non
Bordure et arrière-plan
{{cssxref("background")}}	Non	Non
{{cssxref("border-radius")}}	Non	Non
{{cssxref("box-shadow")}}	Non	Non

Sélecteurs de couleurs

+### Sélecteurs de couleurs -

Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.

+Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	No	Oui	- - Opera gère cette propriété comme pour un widget `select` avec les mêmes restrictions. - -
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	No	Oui	- - Opera gère cette propriété comme pour un widget `select` avec les mêmes restrictions. - -
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	No	No	- - Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. - -
{{cssxref("border-radius")}}	No	No
{{cssxref("box-shadow")}}	No	No
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	No	Oui	+ + + Opera gère cette propriété comme pour un widget + `select` avec les mêmes restrictions. + + +
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	No	Oui	+ + + Opera gère cette propriété comme pour un widget + `select` avec les mêmes restrictions. + + +
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	No	No	+ + + Pris en charge mais il y a trop d'incohérence entre les navigateurs + pour que ce soit fiable. + + +
{{cssxref("border-radius")}}	No	No
{{cssxref("box-shadow")}}	No	No

Widgets `meter` et `progress`

+### Widgets `meter` et `progress` -

Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.

+Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Oui	Oui
{{cssxref("border")}}	Partiel	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Oui	Partiel	- - Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré. - -
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	No	No	- - Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. - -
{{cssxref("border-radius")}}	No	No
{{cssxref("box-shadow")}}	No	No
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Oui	Oui
{{cssxref("border")}}	Partiel	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Oui	Partiel	+ + + Chrome cache les éléments {{HTMLElement("progress")}} et + {{HTMLElement("meter")}} quand la propriété + {{cssxref("padding")}} est appliquée sur un élément altéré. + + +
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	No	No	+ + + Pris en charge mais il y a trop d'incohérence entre les navigateurs + pour que ce soit fiable. + + +
{{cssxref("border-radius")}}	No	No
{{cssxref("box-shadow")}}	No	No

Widget `range`

+### Widget `range` -

Il n'y a pas de méthode standard pour changer le style de la poignée de range et Opera n'a aucun moyen de modifier le rendu par défaut du widget range.

+Il n'y a pas de méthode standard pour changer le style de la poignée de` range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Partiel	- - Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de `range`. - -
{{cssxref("border")}}	Non	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Oui	- - La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible. - -
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	No	No	- - Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable. - -
{{cssxref("border-radius")}}	No	No
{{cssxref("box-shadow")}}	No	No
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Partiel	Partiel	+ + + Chrome et Opera ajoutent quelque espace supplémentaire autour du + widget, alors que Opera sous Windows 7 réduit la poignée de + `range`. + + +
{{cssxref("border")}}	Non	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Partiel	Oui	+ + + La propriété {{cssxref("padding")}} est appliquée, mais elle + n'a aucun effet visible. + + +
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	No	No	+ + + Pris en charge mais il y a trop d'incohérence entre les navigateurs + pour que ce soit fiable. + + +
{{cssxref("border-radius")}}	No	No
{{cssxref("box-shadow")}}	No	No

Boutons image

+### Boutons image - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Oui	Oui
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Oui	Oui
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	Oui	Oui
{{cssxref("border-radius")}}	Partiel	Partiel	- - IE9 ne prend pas en charge cette propriété. - -
{{cssxref("box-shadow")}}	Partiel	Partiel	- - IE9 ne prend pas en charge cette propriété. - -
Propriété	N	A	Note
Modèle de boîte CSS
{{cssxref("width")}}	Oui	Oui
{{cssxref("height")}}	Oui	Oui
{{cssxref("border")}}	Oui	Oui
{{cssxref("margin")}}	Oui	Oui
{{cssxref("padding")}}	Oui	Oui
Texte et polices
{{cssxref("color")}}	N.A.	N.A.
{{cssxref("font")}}	N.A.	N.A.
{{cssxref("letter-spacing")}}	N.A.	N.A.
{{cssxref("text-align")}}	N.A.	N.A.
{{cssxref("text-decoration")}}	N.A.	N.A.
{{cssxref("text-indent")}}	N.A.	N.A.
{{cssxref("text-overflow")}}	N.A.	N.A.
{{cssxref("text-shadow")}}	N.A.	N.A.
{{cssxref("text-transform")}}	N.A.	N.A.
Bordure et arrière-plan
{{cssxref("background")}}	Oui	Oui
{{cssxref("border-radius")}}	Partiel	Partiel	+ + IE9 ne prend pas en charge cette propriété. + +
{{cssxref("box-shadow")}}	Partiel	Partiel	+ + IE9 ne prend pas en charge cette propriété. + +

{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

+{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}} -

Dans ce module

+## Dans ce module -

Mon premier formulaire HTML
Comment structurer un formulaire HTML
Les widgets natifs pour formulaire
Envoi des données de formulaire
Validation des données de formulaire
Comment construire des widgets personnalisés pour formulaire
Envoi de formulaires à l'aide du JavaScript
Formulaires HTML dans les navigateurs anciens
Mise en forme des formulaires HTML
Mise en forme avancée des formulaires HTML
Table de compatibilité des propriétés pour les widgets de formulaire

+- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) +- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) +- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) +- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) +- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) +- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) +- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) +- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) +- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms) +- Table de compatibilité des propriétés pour les widgets de formulaire diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md index c2736e9d5b..c530eaae7f 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -15,199 +15,213 @@ tags: translation_of: Learn/Forms/Sending_and_retrieving_form_data original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires --- -

+{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}} -

Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.

+Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire. - + - +

Prérequis :	Notions concernant les ordinateurs, compréhension du HTML, et connaissances de base de HTTP et programmation côté serveur.	+ Notions concernant les ordinateurs, + compréhension du HTML, et connaissances de base de + HTTP et + programmation côté serveur. +
Objectif :	Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.	+ Comprendre ce qui arrive quand les données d'un formulaire sont + soumises, y compris les notions de la façon dont les données sont + traitées sur le serveur. +

Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.

+Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire. -

A propos de l'architecture client / serveur

+## A propos de l'architecture client / serveur -

Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme Apache, Nginx, IIS, Tomcat...), en utilisant le protocole HTTP. Le serveur répond à la requête en utilisant le même protocole.

+Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme [Apache](https://httpd.apache.org/), [Nginx](https://nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/)...), en utilisant le [protocole HTTP](/fr/docs/Web/HTTP). Le serveur répond à la requête en utilisant le même protocole. -

Un schéma élémentaire d'architecture client/serveur sur le Web

+![Un schéma élémentaire d'architecture client/serveur sur le Web ](client-server.png) -

Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.

+Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP. -

Note : Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.

+> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps). -

Côté client : définition de la méthode d'envoi des données

+## Côté client : définition de la méthode d'envoi des données -

L'élément <form> définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont action et method.

+L'élément [``](/fr/docs/Web/HTML/Element/Form) définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont [`action`](/fr/docs/Web/HTML/Element/Form#attr-action) et [`method`](/fr/docs/Web/HTML/Element/Form#attr-method). -

L'attribut action

+### L'attribut action -

Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.

+Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire. -

Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :

+Dans cet exemple, les données sont envoyées à une URL précise — http\://foo.com : -

<form action="http://foo.com">

+```html + +``` -

Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :

+Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur : -

<form action="/somewhere_else">

+```html + +``` -

Sans attribut, comme ci-dessous, les données de <form> sont envoyées à la même page que celle du formulaire :

+Sans attribut, comme ci-dessous, les données de [``](/fr/docs/Web/HTML/Element/Form) sont envoyées à la même page que celle du formulaire : -

<form>

+```html + +``` -

De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut action était requis. Il n'y en a donc plus besoin.

+De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut [`action`](/fr/docs/Web/HTML/Element/Form#attr-action) était requis. Il n'y en a donc plus besoin. -

<form action="#">

+```html + +``` -

Note : Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut action, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.

+> **Note :** Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut [`action`](/fr/docs/Web/HTML/Element/Form#attr-action), tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées. -

L'attribut method

+### L'attribut method -

Cet attribut définit comment les données sont envoyées. Le Protocole HTTP fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode GET et la méthode POST.

+Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP ](/fr/docs/Web/HTTP)fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. -

Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.

+Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête. -

La méthode GET

+#### La méthode GET -

La méthode GET est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.

+La méthode `GET` est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL. -

Considérons le formulaire suivant :

+Considérons le formulaire suivant : -

<form action="http://foo.com" method="get">
-  <div>
-    <label for="say">Quelle salutation voulez-vous adresser ?</label>
-    <input name="say" id="say" value="Salut">
-  </div>
-  <div>
-    <label for="to">À qui voulez‑vous l'adresser ?</label>
-    <input name="to" value="Maman">
-  </div>
-  <div>
-    <button>Envoyer mes salutations</button>
-  </div>
-</form>

+```html + +

+ Quelle salutation voulez-vous adresser ? + +

+ À qui voulez‑vous l'adresser ? + +

+ +

+ +``` -

Comme nous avons utilisé la méthode GET, vous verrez l'URL www.foo.com/?say=Hi&to=Mom apparaître dans la barre du navigateur quand vous soumettez le formulaire.

+Comme nous avons utilisé la méthode `GET`, vous verrez l'URL `www.foo.com/?say=Hi&to=Mom` apparaître dans la barre du navigateur quand vous soumettez le formulaire. -

+![](url-parameters.png) -

Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :

+Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur : -

say, dont la valeur est Salut
to, qui a la valeur Maman

+- `say`, dont la valeur est `Salut` +- `to`, qui a la valeur `Maman` -

La requête HTTP ressemble à quelque chose comme :

+La requête HTTP ressemble à quelque chose comme : -

GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com

+ GET /?say=Hi&to=Mom HTTP/1.1 + Host: foo.com -

Note : Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).

+> **Note :** Vous trouverez cet exemple sur GitHub — voyez [get-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). -

La méthode POST

+#### La méthode POST -

La méthode POST est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.

+La méthode `POST` est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP. -

Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec post comme valeur de l'attribut method.

+Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec `post` comme valeur de l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method). -

<form action="http://www.foo.com" method="POST">
-  <div>
-    <label for="say">Quelle salutation voulez-vous dire ?</label>
-    <input name="say" id="say" value="Salut">
-  </div>
-  <div>
-    <label for="to">A qui voulez-vous le dire ?</label>
-    <input name="to" id="to" value="Maman">
-  </div>
-  <div>
-    <button>Envoyer mes salutations</button>
-  </div>
-</form>

+```html + +``` -

Quand le formulaire est soumis avec la méthode POST, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :

+Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête : -

POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
+    POST / HTTP/1.1
+    Host: foo.com
+    Content-Type: application/x-www-form-urlencoded
+    Content-Length: 13
 
-say=Hi&to=Mom

+ say=Hi&to=Mom -

L'en-tête Content-Length indique la taille du corps, et l'en-tête Content-Type indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.

+L'en-tête `Content-Length `indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment. -

Note : Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).

+> **Note :** Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). -

Voir les requêtes HTTP

+### Voir les requêtes HTTP -

Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la Console Web de Firefox ou les Chrome Developer Tools). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :

+Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la [Console Web](/fr/docs/Tools/Web_Console) de Firefox ou les [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire : -

Pressez F12
Selectionnez « Réseau »
Selectionnez « Tout »
Selectionnez « foo.com » dans l'onglet « Nom »
Selectionnez « En‑tête »

+1. Pressez F12 +2. Selectionnez « Réseau » +3. Selectionnez « Tout » +4. Selectionnez « foo.com » dans l'onglet « Nom » +5. Selectionnez « En‑tête » -

Vous obtiendrez les données du formulaire, comme l'image suivante le montre.

+Vous obtiendrez les données du formulaire, comme l'image suivante le montre. -

+![](network-monitor.png) -

La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête GET l'utilisateur verra les données dans la barre de l'URL, mais avec une requête POST il ne verra rien. Cela peut être important pour deux raisons :

+La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête `GET` l'utilisateur verra les données dans la barre de l'URL, mais avec une requête `POST` il ne verra rien. Cela peut être important pour deux raisons : -

Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.
Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.

+1. Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr. +2. Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent. -

Côté serveur : récupérer les données

+## Côté serveur : récupérer les données -

Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.

+Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente. -

Exemple : PHP brut

+### Exemple : PHP brut -

Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode POST, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.

+Le [PHP](https://php.net/) met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode `POST`, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement. -

<?php
+```php
+
+  echo  $say, ' ', $to;
+```
 
-Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple php-example.html — il contient le même formulaire exemple que celui vu précédemment avec la méthode post avec php-example.php en action. À la soumission du formulaire, il envoie les données de ce dernier à php-example.php, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est Hi Mom « Bonjour maman ».
+Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple [php-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html) — il contient le même formulaire exemple que celui vu précédemment avec la méthode `post` avec `php-example.php` en action. À la soumission du formulaire, il envoie les données de ce dernier à [php-example.php](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php), contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est `Hi Mom` « Bonjour maman ».
 
-
+![L'exécution du code PHP déclenche l'affichage de Hi Mom](php-result.png)
 
-
-  Note : Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).
-  Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu MAMP > Préférences > PHP, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).
-
+> **Note :** Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux).
+>
+> Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu _MAMP_ > _Préférences_ > _PHP_, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).
 
-Exemple: Python
+### Exemple: Python
 
-Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise Flask framework pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez python-example.py).
+Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise [Flask framework](https://flask.pocoo.org/) pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)).
 
-from flask import Flask, render_template, request
+```python
+from flask import Flask, render_template, request
 app = Flask(__name__)
 
 @app.route('/', methods=['GET', 'POST'])
@@ -219,126 +233,109 @@ def hello():
     return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
 
 if __name__ == "__main__":
-    app.run()
+    app.run()
+```
 
-Les deux prototypes référencés dans le code ci‑dessus sont les suivants :
+Les deux prototypes référencés dans le code ci‑dessus sont les suivants :
 
-
-  form.html : Le même formulaire que celui vu plus haut dans la section La méthode POST mais avec l'attribut action défini à la valeur \{{url_for('hello')}}. (C'est un modèle Jinja2, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. url_for('hello') dit en gros « à rediriger sur /hello quand le formulaire est soumis ».)
-  greeting.html : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction hello() vue plus haut qui s'exécute quand l'URL /hello est chargée dans le navigateur.
-
+- [form.html ](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».)
+- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur.
 
-
-  Note : À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.
-
+> **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur.
 
-Autres langages et canevas de structures
+### Autres langages et canevas de structures
 
-Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :
+Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :
 
-
- Symfony pour PHP
- Django pour Python
- Express pour Node.js
- Ruby On Rails pour Ruby
- Grails pour Java
- etc.
-
+- [Symfony](https://symfony.com/) pour PHP
+- [Django](https://www.djangoproject.com/) pour Python
+- [Express](/fr/docs/Learn/Server-side/Express_Nodejs) pour Node.js
+- [Ruby On Rails](https://rubyonrails.org/) pour Ruby
+- [Grails](https://grails.org/) pour Java
+- etc.
 
-Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours facile. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.
+Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours _facile_. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.
 
-
-  Note : Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.
-
+> **Note :** Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.
 
-Cas particulier : envoyer des fichiers
+## Cas particulier : envoyer des fichiers
 
-L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.
+L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.
 
-L'attribut enctype
+### L'attribut enctype
 
-Cet attribut vous permet de préciser la valeur de l'en-tête HTTP Content-Type incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est application/x-www-form-urlencoded. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».
+Cet attribut vous permet de préciser la valeur de l'en-tête HTTP `Content-Type` incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est `application/x-www-form-urlencoded`. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».
 
-Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :
+Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :
 
-
-  régler l'attribut method à POST, car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.
-  régler la valeur de enctype à multipart/form-data, car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).
-  incorporer un ou plusieurs widgets de <input type="file"> pour permettre aux utilisateurs de choisir les fichiers à téléverser.
-
+- régler l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method) à `POST`, car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.
+- régler la valeur de [`enctype`](/fr/docs/Web/HTML/Element/Form#attr-enctype) `à multipart/form-data`, car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).
+- incorporer un ou plusieurs widgets de [``](/fr/docs/Web/HTML/Element/Input/file) pour permettre aux utilisateurs de choisir les fichiers à téléverser.
 
-Par exemple :
+Par exemple :
 
-<form method="post" action="https://www.foo.com" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choisir un fichier</label>
-    <input type="file" id="file" name="myFile">
-  </div>
-  <div>
-    <button>Envoyer le fichier</button>
-  </div>
-</form>
+```html
+
+  
+    Choisir un fichier
+    
+  
+  
+    
+  
+
+```
 
-
-  Note : Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.
-
+> **Note :** Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.
 
-Problèmes courants de sécurité
+## Problèmes courants de sécurité
 
-Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.
+Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.
 
-L'article Sécurité des sites Web de notre sujet d'apprentissage server-side aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.
+L'article [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) de notre sujet d'apprentissage [server-side](/fr/docs/Learn/Server-side) aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.
 
-Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs
+### Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs
 
-Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.
+Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.
 
-Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.
+Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.
 
-
-  Échappez les caractères potentiellement dangereux. Les caractères spécifiques dont vous devez vous méfier varient en fonction du contexte dans lequel les données sont utilisées et de la plateforme serveur que vous employez, mais tous les langages côté serveur disposent de fonctions à cet effet. Les choses à surveiller sont les séquences de caractères qui ressemblent à du code exécutable (comme JavaScript ou des Commandes SQL).
-  Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire.
-  Sandbox des fichiers téléchargés. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent.
-
+- **Échappez les caractères potentiellement dangereux**. Les caractères spécifiques dont vous devez vous méfier varient en fonction du contexte dans lequel les données sont utilisées et de la plateforme serveur que vous employez, mais tous les langages côté serveur disposent de fonctions à cet effet. Les choses à surveiller sont les séquences de caractères qui ressemblent à du code exécutable (comme [JavaScript](/fr/docs/Learn/JavaScript) ou des [Commandes SQL](https://en.wikipedia.org/wiki/SQL)).
+- **Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire**.
+- **Sandbox des fichiers téléchargés**. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent.
 
-Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !
+Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !
 
-Conclusion
+## Conclusion
 
-Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la validation des données côté client, mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.
+Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la [validation des données côté client](/fr/docs/Learn/Forms/Form_validation), mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.
 
-Voir aussi
+## Voir aussi
 
-Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :
+Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :
 
-
-  Programmation d'un site web côté‑serveur : premiers pas
-  Open Web Application Security Project (OWASP) (Projet pour la sécurité des applications dans un Web ouvert)
-  Blog de Chris Shiflett à propos de la sécurité avec PHP
-
+- [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps)
+- [Open Web Application Security Project (OWASP)](https://www.owasp.org/index.php/Main_Page) (Projet pour la sécurité des applications dans un Web ouvert)
+- [Blog de Chris Shiflett à propos de la sécurité avec PHP](https://shiflett.org/)
 
-{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}
+{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}
 
-Dans ce module
+## Dans ce module
 
-
-  Mon premier formulaire HTML
-  Comment structurer un formulaire HTML
-  Les widgets natifs pour formulaire
-  Les types de saisie HTML5
-  Autres contrôles de formulaires
-  Mise en forme des formulaires HTML
-  Mise en forme avancée des formulaires HTML
-  Pseudo-classes d'interface utilisateur
-  Envoi des données de formulaire
-  Validation des données de formulaire
-  Envoi de données de formulaire
-
+- [Mon premier formulaire HTML](/fr/docs/Learn/Forms/Your_first_form)
+- [Comment structurer un formulaire HTML](/fr/docs/Learn/Forms/How_to_structure_a_web_form)
+- [Les widgets natifs pour formulaire](/fr/docs/Learn/Forms/Basic_native_form_controls)
+- [Les types de saisie HTML5](/fr/docs/Learn/Forms/HTML5_input_types)
+- [Autres contrôles de formulaires](/fr/docs/Learn/Forms/Other_form_controls)
+- [Mise en forme des formulaires HTML](/fr/docs/Learn/Forms/Styling_web_forms)
+- [Mise en forme avancée des formulaires HTML](/fr/docs/Learn/Forms/Advanced_form_styling)
+- [Pseudo-classes d'interface utilisateur](/fr/docs/Learn/Forms/UI_pseudo-classes)
+- [Envoi des données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data)
+- [Validation des données de formulaire](/fr/docs/Learn/Forms/Form_validation)
+- [Envoi de données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data)
 
-Sujets avancés
+### Sujets avancés
 
-
-  Comment construire des widgets personnalisés pour formulaire
-  Envoi de formulaires à l'aide du JavaScript
-  Table de compatibilité des propriétés pour les widgets de formulaire
-
+- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Learn/Forms/Sending_forms_through_JavaScript)
+- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md
index 571ede2a5b..2a91434804 100644
--- a/files/fr/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md
@@ -4,61 +4,60 @@ slug: Learn/Forms/Sending_forms_through_JavaScript
 translation_of: Learn/Forms/Sending_forms_through_JavaScript
 original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 ---
-{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
+{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
 
-Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.
+Comme dans le [précédent article](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires), les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.
 
-Un formulaire n'est pas toujours un <form>
+## Un formulaire n'est pas toujours un \
 
-Avec les applications Web ouvertes, il est de plus en plus courant d'utiliser des formulaires HTML autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.
+Avec les [applications Web ouvertes](/fr/docs/Open_Web_apps_and_Web_standards), il est de plus en plus courant d'utiliser des [formulaires HTML](/fr/docs/Learn/Forms) autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.
 
-Obtenir le contrôle sur la totalité de l'interface
+### Obtenir le contrôle sur la totalité de l'interface
 
-La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.
+La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.
 
-De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.
+De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.
 
-L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).
+L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).
 
-Comment est-ce différent ?
+### Comment est-ce différent ?
 
-AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.
+[AJAX](/fr/docs/AJAX) utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.
 
-
-Note : Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, JSONP combiné à la fonction eval(). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou JSON, mais ce sont vraiment des navigateurs anciens ! Évitez ces techniques.
-
+> **Note :** Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, [JSONP](http://en.wikipedia.org/wiki/JSONP) combiné à la fonction [`eval()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou [JSON](/fr/docs/Glossaire/JSON), mais ce sont vraiment des navigateurs anciens ! **Évitez ces techniques.**
 
- 
 
-Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, JSON a remplacé XML et est de plus en plus courant aujourd'hui.
 
-Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (application/x-www-form-urlencoded) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données multipart/form‑data.
+Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,[ JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui.
 
-Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.
+Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (`application/x-www-form-urlencoded`) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données `multipart/form‑data`.
 
-Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.
+Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.
 
-Comment envoyer de telles données ?
+Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.
 
-Envoi des données de formulaire
+Comment envoyer de telles données ?
 
-Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.
+## Envoi des données de formulaire
 
-Construire manuellement un XMLHttpRequest
+Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.
 
-{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.
+### Construire manuellement un XMLHttpRequest
 
-
-Note : Pour en savoir plus sur XMLHttpRequest, ces articles pourraient vous intéresser : un article d'introduction à AJAX et un didacticiel plus fouillé à ce propos utilisant XMLHttpRequest.
-
+{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.
 
-Reconstruisons l'exemple précédent :
+> **Note :** Pour en savoir plus sur `XMLHttpRequest`, ces articles pourraient vous intéresser : un article d'introduction à [AJAX](/fr/docs/Web/Guide/AJAX/Premiers_pas) et un didacticiel plus fouillé à ce propos utilisant [`XMLHttpRequest`](/fr/docs/HTML_in_XMLHttpRequest).
 
-<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
+Reconstruisons l'exemple précédent :
 
-Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :
+```html
+
+```
 
-function sendData(data) {
+Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :
+
+```js
+function sendData(data) {
   var XHR = new XMLHttpRequest();
   var urlEncodedData = "";
   var urlEncodedDataPairs = [];
@@ -72,7 +71,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
   // Combinez les paires en une seule chaîne de caractères et remplacez tous
   // les espaces codés en % par le caractère'+' ; cela correspond au comportement
   // des soumissions de formulaires de navigateur.
-  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
+  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
 
   // Définissez ce qui se passe en cas de succès de soumission de données
   XHR.addEventListener('load', function(event) {
@@ -92,31 +91,33 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 
   // Finalement, envoyez les données.
   XHR.send(urlEncodedData);
-}
+}
+```
 
-Voici le résultat en direct :
+Voici le résultat en direct :
 
-{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}
+{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}
 
-
-Note : Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès CORS et HTTP.
-
+> **Note :** Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès [CORS et HTTP](/fr/docs/HTTP/Access_control_CORS).
 
-Utilisation de XMLHttpRequest et de l'objet FormData
+### Utilisation de XMLHttpRequest et de l'objet FormData
 
-Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une spécification XMLHttpRequest récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.
+Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une [spécification XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/) récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.
 
-L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.
+L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.
 
-L'utilisation de cet objet est détaillée dans Utiliser les objets FormData, mais voici deux exemples :
+L'utilisation de cet objet est détaillée dans [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData), mais voici deux exemples :
 
-Utiliser un objet FormData autonome
+#### Utiliser un objet FormData autonome
 
-<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
+```html
+
+```
 
-Vous devriez être familier de cet exemple HTML.
+Vous devriez être familier de cet exemple HTML.
 
-function sendData(data) {
+```js
+function sendData(data) {
   var XHR = new XMLHttpRequest();
   var FD  = new FormData();
 
@@ -140,27 +141,31 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 
   // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
   XHR.send(FD);
-}
+}
+```
 
-Voici le résultat directement :
+Voici le résultat directement :
 
-{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}
+{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}
 
-Utiliser un objet FormData lié à un élément form
+#### Utiliser un objet FormData lié à un élément form
 
-Vous pouvez également lier un objet FormData à un élément {{HTMLElement("form")}} et  créer ainsi un FormData représentant les données contenues dans le formulaire.
+Vous pouvez également lier un objet `FormData` à un élément {{HTMLElement("form")}} et  créer ainsi un `FormData` représentant les données contenues dans le formulaire.
 
-Le HTML est classique :
+Le HTML est classique :
 
-<form id="myForm">
-  <label for="myName">Dites-moi votre nom :</label>
-  <input id="myName" name="name" value="John">
-  <input type="submit" value="Envoyer !">
-</form>
+```html
+
+  Dites-moi votre nom :
+  
+  
+
+```
 
-Mais JavaScript sera de la forme :
+Mais JavaScript sera de la forme :
 
-window.addEventListener("load", function () {
+```js
+window.addEventListener("load", function () {
   function sendData() {
     var XHR = new XMLHttpRequest();
 
@@ -193,27 +198,29 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 
     sendData();
   });
-});
+});
+```
 
-Voici le résultat en direct :
+Voici le résultat en direct :
 
-{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}
+{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}
 
-Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.
+Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.
 
-Construire un DOM dans un iframe caché
+### Construire un DOM dans un `iframe` caché
 
-La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.
+La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.
 
-
-Attention : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.
-
+> **Attention :** **Évitez d'employer cette technique.** Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une [attaque par injection de script](https://fr.wikipedia.org/wiki/Cross-site_scripting). Si vous utilisez HTTPS, il reste possible de perturber la [politique de la même origine](/fr/docs/JavaScript/Same_origin_policy_for_JavaScript), ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.
 
-Voici un exemple :
+Voici un exemple :
 
-<button onclick="sendData({test:'ok'})">Cliquez ici !</button>
+```html
+
+```
 
-// Créer l'iFrame servant à envoyer les données
+```js
+// Créer l'iFrame servant à envoyer les données
 var iframe = document.createElement("iframe");
 iframe.name = "myTarget";
 
@@ -252,39 +259,43 @@ function sendData(data) {
 
   // Une fois le formulaire envoyé, le supprimer.
   document.body.removeChild(form);
-}
+}
+```
 
-Voici le résultat en direct :
+Voici le résultat en direct :
 
-{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}
+{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}
 
- 
 
-Gestion des données binaires
 
-Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <input type="file">, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.
+## Gestion des données binaires
 
-Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et WebRTC, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez Utiliser les fichiers des applications Web.
+Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets ``, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.
 
-Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.
+Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et [WebRTC](/fr/docs/WebRTC/navigator.getUserMedia), par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez [Utiliser les fichiers des applications Web](/fr/docs/Using_files_from_web_applications).
 
-Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :
+Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.
 
-<form id="myForm">
-  <p>
-    <label for="i1">Données textuelles :</label>
-    <input id="i1" name="myText" value="Quelques données textuelles">
-  </p>
-  <p>
-    <label for="i2">Fichier de données :</label>
-    <input id="i2" name="myFile" type="file">
-  </p>
-  <button>Envoyer !</button>
-</form>
+Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :
 
-Comme vous pouvez le voir, le HTML est un <form>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :
+```html
+
+  
+    Données textuelles :
+    
+  
+  
+    Fichier de données :
+    
+  
+  
+
+```
 
-// Comme nous voulons avoir accès à un nœud DOM,
+Comme vous pouvez le voir, le HTML est un ``standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :
+
+```js
+// Comme nous voulons avoir accès à un nœud DOM,
 // nous initialisons le script au chargement de la page.
 window.addEventListener('load', function () {
 
@@ -322,7 +333,7 @@ window.addEventListener('load', function () {
   function sendData() {
     // S'il y a un fichier sélectionné, attendre sa lecture
     // Sinon, retarder l'exécution de la fonction
-    if(!file.binary && file.dom.files.length > 0) {
+    if(!file.binary && file.dom.files.length > 0) {
       setTimeout(sendData, 10);
       return;
     }
@@ -402,40 +413,37 @@ window.addEventListener('load', function () {
     event.preventDefault();
     sendData();
   });
-});
+});
+```
+
+Voici le résultat en direct :
+
+{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}
 
-Voici le résultat en direct :
+## Conclusion
 
-{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}
+Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » ([prothèse d'émulation](https://fr.wikipedia.org/wiki/Polyfill)) pour cela sur les navigateurs anciens :
 
-Conclusion
+- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de  `FormData` avec des {{domxref("Using_web_workers","worker")}}.
+- [HTML5-formdata](https://github.com/francois2metz/html5-formdata) tente d'opérer un « polyfill » de l'objet `FormData`, mais il requiert un [File API](http://www.w3.org/TR/FileAPI/)
+- [Ce « polyfill »](https://github.com/jimmywarting/FormData) fournit la plupart des nouvelles méthodes dont `FormData` dispose (entrées, clés, valeurs et prise en charge de `for...of`)
 
-Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (prothèse d'émulation) pour cela sur les navigateurs anciens :
 
-
- Ces primitives sont des « polyfills » de  FormData avec des {{domxref("Using_web_workers","worker")}}.
- HTML5-formdata tente d'opérer un « polyfill » de l'objet FormData, mais il requiert un File API
- Ce « polyfill » fournit la plupart des nouvelles méthodes dont FormData dispose (entrées, clés, valeurs et prise en charge de for...of)
-
 
- 
+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
 
-{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
 
- 
 
-Dans ce module
+## Dans ce module
 
-
- Mon premier formulaire HTML
- Comment structurer un formulaire HTML
- Les widgets natifs pour formulaire
- Envoi des données de formulaire
- Validation des données de formulaire
- Comment construire des widgets personnalisés pour formulaire
- Envoi de formulaires à l'aide du JavaScript
- Formulaires HTML dans les navigateurs anciens
- Mise en forme des formulaires HTML
- Mise en forme avancée des formulaires HTML
- Table de compatibilité des propriétés pour les widgets de formulaire
-
+- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML)
+- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML)
+- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs)
+- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires)
+- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
+- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés)
+- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript)
+- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers)
+- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML)
+- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms)
+- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets)
diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md
index 95ddead893..1882911bf7 100644
--- a/files/fr/learn/forms/styling_web_forms/index.md
+++ b/files/fr/learn/forms/styling_web_forms/index.md
@@ -12,222 +12,230 @@ tags:
 translation_of: Learn/Forms/Styling_web_forms
 original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
 ---
-{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
+{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
 
-
-Dans cet article, nous allons apprendre comment utiliser les CSS avec les formulaires HTML pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent construire leurs propres widgets HTML pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.
-
+> Dans cet article, nous allons apprendre comment utiliser [les CSS](/fr/docs/CSS "/fr/docs/CSS") avec les formulaires [HTML](/fr/docs/HTML "/fr/docs/HTML") pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent [construire leurs propres widgets HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés "/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés") pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.
 
-Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?
+## Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?
 
-Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la spécification HTML 2. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.
+Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la [spécification HTML 2](http://www.ietf.org/rfc/rfc1866.txt). À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.
 
-Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.
+Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.
 
-Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.
+Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.
 
-Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des formulaires HTML.
+Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires "/fr/docs/HTML/Formulaires").
 
-Tous les widgets ne sont pas égaux devant les CSS
+### Tous les widgets ne sont pas égaux devant les CSS
 
-Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.
+Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.
 
-Le bon
+#### Le bon
 
-L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :
+L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :
 
-
- {{HTMLElement("form")}}
- {{HTMLElement("fieldset")}}
- {{HTMLElement("label")}}
- {{HTMLElement("output")}}
-
+1.  {{HTMLElement("form")}}
+2.  {{HTMLElement("fieldset")}}
+3.  {{HTMLElement("label")}}
+4.  {{HTMLElement("output")}}
 
-Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.
+Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.
 
-La brute
+#### La brute
 
-L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.
+L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.
 
-Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.
+Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.
 
-Nous allons voir comment gérer ces cas particuliers dans l'article Apparence avancée des formulaires HTML.
+Nous allons voir comment gérer ces cas particuliers dans l'article [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/HTML/Formulaires/Apparence_avancée_des_formulaires_HTML").
 
-Le truand
+#### Le truand
 
-L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.
+L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.
 
-Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article Comment créer des widgets de formulaire personnalisés.
+Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article [Comment créer des widgets de formulaire personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés "/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés").
 
-Compositions stylistiques de base
+## Compositions stylistiques de base
 
-Pour changer l'apparence des éléments facilement modifiables avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.
+Pour changer l'apparence [des éléments facilement modifiables](/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon "/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon") avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.
 
-Champs de recherche
+### Champs de recherche
 
-Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire -webkit-appearance. Nous allons aborder le sujet plus en détails dans dans l'article : Apparence avancée des formulaires HTML.
+Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire `-webkit-appearance`. Nous allons aborder le sujet plus en détails dans dans l'article : [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/Apparence_avancée_des_formulaires_HTML").
 
-Exemple
+#### Exemple
 
-<form>
-  <input type="search">
-</form>
-
+```html
+
+  
+
+```
 
-input[type=search] {
+```css
+input[type=search] {
   border: 1px dotted #999;
   border-radius: 0;
 
   -webkit-appearance: none;
-}
+}
+```
 
-
+![This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance](search-chrome-macos.png)
 
-Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété -webkit-appearance tandis que le second a recours à la propriété -webkit-appearance:none. La différence est notable.
+Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété `-webkit-appearance` tandis que le second a recours à la propriété `-webkit-appearance:none`. La différence est notable.
 
-Texte et polices de caractères
+### Texte et polices de caractères
 
-Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :
+Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :
 
-button, input, select, textarea {
+```css
+button, input, select, textarea {
   font-family : inherit;
   font-size   : 100%;
-}
+}
+```
 
-La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.
+La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.
 
-
+![This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization](font-firefox-macos.png)
 
-Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.
+Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.
 
-Modèle de boîte
+### Modèle de boîte
 
-Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.
+Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.
 
-Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin). Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :
+**Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).** Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :
 
-input, textarea, select, button {
+```css
+input, textarea, select, button {
   width : 150px;
   margin: 0;
 
   -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
      -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
           box-sizing: border-box;
-}
+}
+```
 
-
+![This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.](size-chrome-win7.png)
 
-Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS border-box. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.
+Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS `border-box`. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.
 
-Positionnement
+### Positionnement
 
-Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :
+Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :
 
-legend
+#### legend
 
-L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément fieldset.
+L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément `fieldset`.
 
-Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  label de chaque élément de formulaire du fieldset), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :
+Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  `label` de chaque élément de formulaire du `fieldset`), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :
 
-HTML
+##### HTML
 
-<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
+```html
+
+  Hi!
+  Hello
+
+```
 
-CSS
+##### CSS
 
-legend {
+```css
+legend {
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}
+```
 
-textarea
+#### textarea
 
-Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d'inline-block à block, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :
+Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d`'inline-block` à `block`, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :
 
-textarea {
+```css
+textarea {
   vertical-align: top;
-}
+}
+```
+
+## Exemple
 
-Exemple
+Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :
 
-Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :
+![C'est ce que nous voulons réaliser avec le HTML et les CSS.](fr-carte.png)
 
-
+### HTML
 
-HTML
+Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier[ article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre.
 
-Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier article de ce guide ; il ne comporte que quelques identifiants supplémentaires et un titre.
+```html
+
+  à: Mozilla
 
-<form>
-  <h1>à: Mozilla</h1>
+  
+    de :
+    
+  
 
-  <div id="from">
-    <label for="name">de :</label>
-    <input type="text" id="name" name="user_name">
-  </div>
+  
+    répondre à :
+    
+  
 
-  <div id="reply">
-    <label for="mail">répondre à :</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
+  
+    Votre message :
+    
+  
 
-  <div id="message">
-    <label for="msg">Votre message :</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
+  
+    
+  
+
+```
 
-  <div class="button">
-    <button type="submit">Poster le message</button>
-  </div>
-</form>
+### Organiser les ressources
 
-Organiser les ressources
+C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :
 
-C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :
+1.  L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
+2.  Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
+3.  Une police d'écriture manuelle : [ « Journal » de fontsquirrel.com ](http://www.fontsquirrel.com/fonts/Journal)— téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
 
-
- L'image de fond de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
- Une police de machine à écrire : « Secret Typewriter » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
- Une police d'écriture manuelle :  « Journal » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
-
 
- 
 
-Les polices demandent un supplément de traitement avant de débuter :
+Les polices demandent un supplément de traitement avant de débuter :
 
-
- Allez sur le Webfont Generator de fontsquirrel.
- En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
- Décompressez le fichier zip fourni.
- Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
-
+1.  Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de fontsquirrel.
+2.  En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
+3.  Décompressez le fichier zip fourni.
+4.  Dans le contenu décompressé vous trouverez deux fichiers `.woff` et deux fichiers `.woff2`. Copiez ces quatre fichiers dans un répertoire nommé `fonts`, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées.
 
-Le CSS
+### Le CSS
 
- 
 
-Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.
 
-D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.
+Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.
 
-@font-face{
+D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.
+
+```css
+@font-face{
   font-family : "handwriting";
-  src: url('fonts/journal-webfont.woff2') format('woff2'),
+  src: url('fonts/journal-webfont.woff2') format('woff2'),
        url('fonts/journal-webfont.woff') format('woff');
   font-weight: normal;
-  font-style: normal;
+  font-style: normal;
 }
 
 @font-face{
   font-family : "typewriter";
-  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
        url('fonts/veteran_typewriter-webfont.woff') format('woff');
   font-weight: normal;
-  font-style: normal;
+  font-style: normal;
 }
 
 body {
@@ -247,11 +255,13 @@ form {
   margin : 0 auto;
 
   background: #FFF url(background.jpg);
-}
+}
+```
 
-Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.
+Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.
 
-h1 {
+```css
+h1 {
   position : absolute;
   left : 415px;
   top  : 185px;
@@ -275,17 +285,21 @@ form {
   position: absolute;
   left : 20px;
   top  : 70px;
-}
+}
+```
 
-C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.
+C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.
 
-label {
+```css
+label {
   font : .8em "typewriter", sans-serif;
-}
+}
+```
 
-Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.
+Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.
 
-input, textarea {
+```css
+input, textarea {
   font    : .9em/1.5em "handwriting", sans-serif;
 
   border  : none;
@@ -294,28 +308,34 @@ form {
   width   : 240px;
 
   background: none;
-}
+}
+```
 
-Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.
+Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.
 
-input:focus, textarea:focus {
+```css
+input:focus, textarea:focus {
   background   : rgba(0,0,0,.1);
   border-radius: 5px;
   outline      : none;
-}
+}
+```
 
-Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.
+Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.
 
-Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :
+Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :
 
-input {
+```css
+input {
     height: 2.5em; /* pour IE */
     vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */
-}
+}
+```
 
-Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur auto et d'autres la valeur par défaut pour scroll lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise auto.
+Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur `auto` et d'autres la valeur par défaut pour `scroll` lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise `auto`.
 
-textarea {
+```css
+textarea {
   display : block;
 
   padding : 10px;
@@ -325,11 +345,13 @@ form {
 
   resize  : none;
   overflow: auto;
-}
+}
+```
 
-L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !
+L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les [pseudo-elements](/fr/docs/CSS/Pseudo-elements "/en-US/docs/CSS/Pseudo-elements") !
 
-button {
+```css
+button {
   position     : absolute;
   left         : 440px;
   top          : 360px;
@@ -351,7 +373,7 @@ form {
 }
 
 button:after {
-  content: " >>>";
+  content: " >>>";
 }
 
 button:hover,
@@ -359,34 +381,31 @@ button:focus {
   outline   : none;
   background: #000;
   color   : #FFF;
-}
+}
+```
 
-Et voilà ! (en français dans le texte)
+Et voilà ! (en français dans le texte)
 
-
-Note : si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la fonctionner en direct (et revoyez son code source).
-
+> **Note :** si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la [fonctionner en direct](https://mdn.github.io/learning-area/html/forms/postcard-example/) (et revoyez son [code source](https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example)).
 
-Conclusion
+## Conclusion
 
-Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du projet normalize.css.
+Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du [projet normalize.css](http://necolas.github.com/normalize.css).
 
-Dans le prochain article, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».
+Dans le [prochain article](/fr/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms), nous verrons comment gérer les widgets des catégories « brutes » et « truands ».
 
-{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
 
-Dans ce module
+## Dans ce module
 
-
- Mon premier formulaire HTML
- Comment structurer un formulaire HTML
- Les widgets natifs pour formulaire
- Envoi des données de formulaire
- Validation des données de formulaire
- Comment construire des widgets personnalisés pour formulaire
- Envoi de formulaires à l'aide du JavaScript
- Formulaires HTML dans les navigateurs anciens
- Mise en forme des formulaires HTML
- Mise en forme avancée des formulaires HTML
- Table de compatibilité des propriétés pour les widgets de formulaire
-
+- [Mon premier formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML)
+- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML)
+- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs)
+- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires)
+- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
+- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés)
+- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript)
+- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers)
+- Mise en forme des formulaires HTML
+- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms)
+- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets)
diff --git a/files/fr/learn/forms/your_first_form/example/index.md b/files/fr/learn/forms/your_first_form/example/index.md
index d5268524e3..f261558cdc 100644
--- a/files/fr/learn/forms/your_first_form/example/index.md
+++ b/files/fr/learn/forms/your_first_form/example/index.md
@@ -4,41 +4,44 @@ slug: Learn/Forms/Your_first_form/Example
 translation_of: Learn/Forms/Your_first_form/Example
 original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple
 ---
-Ceci est l'exemple pour l'article Mon premier formulaire HTML.
+Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form").
 
-Un formulaire simple
+## Un formulaire simple
 
-Contenu HTML
+### Contenu HTML
 
-<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
-  <div>
-    <label for="nom">Nom :</label>
-    <input type="text" id="nom" name="user_name">
-  </div>
+```html
+
+  
+    Nom :
+    
+  
 
-  <div>
-    <label for="courriel">Courriel :</label>
-    <input type="email" id="courriel" name="user_email">
-  </div>
+  
+    Courriel :
+    
+  
 
-  <div>
-    <label for="message">Message :</label>
-    <textarea id="message" name="user_message"></textarea>
-  </div>
+  
+    Message :
+    
+  
 
-  <div class="button">
-    <button type="submit">Envoyer le message</button>
-  </div>
-</form>
+  
+    
+  
+
+```
 
-Contenu CSS
+### Contenu CSS
 
-form {
-  /* Pour le centrer dans la page */
+```css
+form {
+  /* Pour le centrer dans la page */
   margin: 0 auto;
   width: 400px;
 
-  /* Pour voir les limites du formulaire */
+  /* Pour voir les limites du formulaire */
   padding: 1em;
   border: 1px solid #CCC;
   border-radius: 1em;
@@ -49,57 +52,56 @@ div + div {
 }
 
 label {
-  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
+  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
   display: inline-block;
   width: 90px;
   text-align: right;
 }
 
 input, textarea {
-  /* Afin de s'assurer que tous les champs textuels utilisent la même police
-     Par défaut, textarea utilise une police à espacement constant */
+  /* Afin de s'assurer que tous les champs textuels utilisent la même police
+     Par défaut, textarea utilise une police à espacement constant */
   font: 1em sans-serif;
 
-  /* Pour donner la même dimension à tous les champs textuels */
+  /* Pour donner la même dimension à tous les champs textuels */
   width: 300px;
 
   -moz-box-sizing: border-box;
        box-sizing: border-box;
 
-  /* Pour harmoniser l'apparence des bordures des champs textuels */
+  /* Pour harmoniser l'apparence des bordures des champs textuels */
   border: 1px solid #999;
 }
 
 input:focus, textarea:focus {
-  /* Afin de réhausser les éléments actifs */
+  /* Afin de réhausser les éléments actifs */
   border-color: #000;
 }
 
 textarea {
-  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
+  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
   vertical-align: top;
 
-  /* Pour donner assez d'espace pour entrer du texte */
+  /* Pour donner assez d'espace pour entrer du texte */
   height: 5em;
 
-  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
-     Cela ne marche pas avec tous les navigateurs  */
+  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
+     Cela ne marche pas avec tous les navigateurs  */
   resize: vertical;
 }
 
 .button {
-  /* Pour positionner les boutons de la même manière que les champs textuels */
-  padding-left: 90px; /* même dimension que les étiquettes */
+  /* Pour positionner les boutons de la même manière que les champs textuels */
+  padding-left: 90px; /* même dimension que les étiquettes */
 }
 
 button {
-  /* Cette marge représente approximativement le même espace
-     que celui entre les étiquettes et les champs textuels */
+  /* Cette marge représente approximativement le même espace
+     que celui entre les étiquettes et les champs textuels */
   margin-left: .5em;
-}
-
-Résultat
+}
+```
 
-{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}
+### Résultat
 
- 
+{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}
diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md
index 4ee759f619..1c24397a0e 100644
--- a/files/fr/learn/forms/your_first_form/index.md
+++ b/files/fr/learn/forms/your_first_form/index.md
@@ -13,153 +13,160 @@ tags:
 translation_of: Learn/Forms/Your_first_form
 original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 ---
-{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}
+{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}
 
-Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.
+Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  Prérequis : Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif : Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.
Prérequis : 
+        Notions concernant les ordinateurs et les
+        connaissances de base du HTML.
+      
Objectif : 
+        Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment
+        les concevoir et quels sont les éléments de base HTML nécessaires dans
+        les cas simples.
+      
 
 
-Un formulaire HTML, qu'est-ce ?
+## Un formulaire HTML, qu'est-ce ?
 
-Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.
+Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.
 
-Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.
+Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.
 
-La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « Envoi des données de formulaire » plus loin dans ce module.
+La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) » plus loin dans ce module.
 
-Concevoir le formulaire
+## Concevoir le formulaire
 
-Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :
+Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :
 
-
- Smashing Magazine a de très bons articles à propos de l'expérience utilisateur dans les formulaires, mais le plus intéressant est certainement leur « Guide complet pour des formulaires web facilement utilisables ».
- UXMatters est une ressource bien pensée avec de très bons conseils allant des meilleures pratiques de base jusqu'à des sujets plus complexes tels que les formulaires sur plusieurs pages.
-
+- Smashing Magazine a de très bons [articles à propos de l'expérience utilisateur dans les formulaires](http://uxdesign.smashingmagazine.com/tag/forms/), mais le plus intéressant est certainement leur « [Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/) ».
+- UXMatters est une ressource bien pensée avec de très bons conseils allant des [meilleures pratiques de base](http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php) jusqu'à des sujets plus complexes tels que [les formulaires sur plusieurs pages](http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php).
 
-Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.
+Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.
 
-
+![Le croquis du formulaire que l'on veut créer](0006.png)
 
-Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.
+Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.
 
- Apprentissage actif : mise en œuvre de notre formulaire HTML
+##  Apprentissage actif : mise en œuvre de notre formulaire HTML
 
-Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.
+Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.
 
-Avant de poursuivre, faites une copie locale de notre simple modèle HTML — vous y incorporerez votre formulaire.
+Avant de poursuivre, faites une copie locale de notre [simple modèle HTML](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) — vous y incorporerez votre formulaire.
 
-L'élément {{HTMLElement("form")}}
+### L'élément {{HTMLElement("form")}}
 
-Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :
+Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :
 
-<form action="/my-handling-form-page" method="post">
+```html
+
 
-</form>
+
+```
 
-Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme de bonne pratique.
+Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs `action` et `method` est considéré comme de bonne pratique.
 
-
- L'attribut action définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
- L'attribut method définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
-
+- L'attribut `action` définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
+- L'attribut `method` définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
 
-
-Note : Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article « Envoi des données de formulaire ».
-
+> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [« Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) ».
 
-Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.
+Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.
 
-Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}
+### Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}
 
-Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.
+Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.
 
-En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.
+En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.
 
-<form action="/ma-page-de-traitement" method="post">
-    <div>
-        <label for="name">Nom :</label>
-        <input type="text" id="name" name="user_name">
-    </div>
-    <div>
-        <label for="mail">e-mail :</label>
-        <input type="email" id="mail" name="user_mail">
-    </div>
-    <div>
-        <label for="msg">Message :</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-</form>
+```html
+
+    
+        Nom :
+        
+    
+    
+        e-mail :
+        
+    
+    
+        Message :
+        
+    
+
+```
 
-Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut for sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : Comment structurer un formulaire HTML.
+Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut `for` sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'`id` de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : [Comment structurer un formulaire HTML](/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML).
 
-Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut type. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des widgets natifs pour formulaire.
+Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut `type`. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs).
 
-
- Dans notre exemple nous n'utilisons que la valeur text — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.
- Pour la deuxième entrée, nous utilisons la valeur email qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaire.
-
+- Dans notre exemple nous n'utilisons que la valeur `text` — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.
+- Pour la deuxième entrée, nous utilisons la valeur `email` qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire).
 
-Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut value de la manière suivante :
+Last but not least, remarquez la syntaxe de `` vs ``. C'est une des bizarreries du HTML. La balise `` est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut `value` de la manière suivante :
 
-<input type="text" value="par défaut cet élément sera renseigné avec ce texte">
+```html
+
+```
 
-A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :
+A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :
 
-<textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
+```html
+par défaut cet élément sera renseigné avec ce texte
+```
 
-L'élément {{HTMLElement("button")}}
+### L'élément {{HTMLElement("button")}}
 
-Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante </form> :
+Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante ` :`
 
-    <div class="button">
-        <button type="submit">Envoyer le message</button>
-    </div>
-
+```html
+    
+        
+    
+```
 
-Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : submit, reset ou button.
+Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : `submit`, `reset` ou `button`.
 
-
- Un clic sur un bouton submit (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut action de l'élément {{HTMLElement("form")}}.
- Un clic sur un bouton reset réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
- Un clic sur un bouton button ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.
-
+- Un clic sur un bouton `submit` (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut `action` de l'élément {{HTMLElement("form")}}.
+- Un clic sur un bouton `reset` réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
+- Un clic sur un bouton `button` ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.
 
-
-Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
-
+> **Note :** Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple ``. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
 
-Mise en page élémentaire du formulaire
+## Mise en page élémentaire du formulaire
 
-Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.
+Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.
 
-
+![](form-no-style.png)
 
-
-Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).
-
+> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ ](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)ou[ également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
 
-Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
+Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
 
-Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :
+Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :
 
-<style>
+```html
+
+```
 
-Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :
+Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :
 
-form {
+```css
+form {
   /* Uniquement centrer le formulaire sur la page */
   margin: 0 auto;
   width: 400px;
@@ -189,7 +196,7 @@ input, textarea {
   width: 300px;
   box-sizing: border-box;
 
-  /* Pour harmoniser le look & feel des bordures des champs texte */
+  /* Pour harmoniser le look & feel des bordures des champs texte */
   border: 1px solid #999;
 }
 
@@ -215,68 +222,67 @@ button {
   /* Cette marge supplémentaire représente grosso modo le même espace que celui
      entre les étiquettes et les champs texte */
   margin-left: .5em;
-}
+}
+```
 
-Désormais notre formulaire a une bien meilleure allure.
+Désormais notre formulaire a une bien meilleure allure.
 
-
+![](form-style.png)
 
-
-Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).
-
+> **Note :** Il est sur GitHub dans [first-form-styled.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)).
 
-Envoyer les données au serveur Web
+## Envoyer les données au serveur Web
 
-Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.
+Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.
 
-L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs action et method.
+L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs `action` et `method`.
 
-Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.
+Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.
 
-Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :
+Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :
 
-form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Nom :</label>
-    <input type="text" id="name" name="user_name" />
-  <div>
-  <div>
-    <label for="mail">E-mail :</label>
-    <input type="email" id="mail" name="user_email" />
-  </div>
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
+```html
+form action="/my-handling-form-page" method="post">
+  
+    Nom :
+    
+  
+  
+    E-mail :
+    
+  
+  
+    Message:
+    
+  
 
-  ...
+  ...
+```
 
-Dans notre exemple, le formulaire enverra trois informations nommées respectivement « user_name », « user_email » et « user_message ». Ces informations seront envoyées à l'URL « /my-handling-form-page » avec la méthode HTTP POST.
+Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email `» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST.
 
-Du côté du serveur, le script à l'URL « /my-handling-form-page » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article Envoi des données de formulaire.
+Du côté du serveur, le script à l'URL « `/my-handling-form-page`\* \*» recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires).
 
-Résumé
+## Résumé
 
-Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :
+Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :
 
-{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}
+{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}
 
-Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.
+Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.
 
-{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}
+{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}
 
-Dans ce module
+## Dans ce module
 
-
- Mon premier formulaire HTML
- Comment structurer un formulaire HTML
- Les widgets natifs pour formulaire
- Envoi des données de formulaire
- Validation des données de formulaire
- Comment construire des widgets personnalisés pour formulaire
- Envoi de formulaires à l'aide du JavaScript
- Formulaires HTML dans les navigateurs anciens
- Mise en forme des formulaires HTML
- Mise en forme avancée des formulaires HTML
- Table de compatibilité des propriétés pour les widgets de formulaire
-
+- Mon premier formulaire HTML
+- [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML)
+- [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs)
+- [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires)
+- [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
+- [Comment construire des widgets personnalisés pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés)
+- [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript)
+- [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers)
+- [Mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML)
+- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms)
+- [Table de compatibilité des propriétés pour les widgets de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets)
-- 
cgit v1.2.3-54-g00ecf

Navigateur	Rendu classique		Rendu travaillé
Navigateur	fermé	ouvert	fermé	ouvert
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
Navigateur	+ Rendu classique +		+ Rendu travaillé +
Navigateur	fermé	ouvert	fermé	ouvert
Firefox 57 (Mac OSX)	+ +	+ +	+ +	+ +
Firefox 57 (Windows 10)	+ +	+ +	+ +	+ +
Chrome 63 (Mac OSX)	+ +	+ +	+ +	+ +
Chrome 63 (Windows 10)	+ +	+ +	+ +	+ +
Opera 49 (Mac OSX)	+ +	+ +	+ +	+ +
IE11 (Windows 10)	+ +	+ +	+ +	+ +
Edge 16 (Windows 10)	+ +	+ +	+ +	+ +

Possibilités d'expression avec les CSS

Contrôle du style des éléments de formulaire

Exemples

Cases à cocher et boutons radio

Une simple case à cocher

Un exemple un peu plus compliqué

Gérer le cauchemar <select>

Vers des formulaires plus sympas : bibliothèques utiles et « polyfill » (prothèses d'émulation)

Conclusion

Voir aussi

Dans ce module

Attributs communs

Champs de saisie de texte

Champs texte sur une seule ligne

Champ d'adresse électronique

Champ pour mot de passe

Champ de recherche

Champ pour numéro de téléphone

Champ d'URL

Champs texte multilignes

Contenu déroulant

Boîte à sélection

Boîte à sélections multiples

Contenus auto-complétés

Prise en charge de Datalist et recours

Éléments à cocher

Case à cocher

Bouton radio

Boutons

submit

reset

anonymous

Widgets de formulaires avancés

Nombres

Exemple

Curseurs

Exemple

Sélection de date et heure

datetime-local

month

time

week

Sélecteur de couleur

Autres widgets

Sélection de fichier

Exemple

Contenu caché

Image-bouton

Compteurs et barres de progression

Progress

Meter

Conclusion

Voir également

Dans ce module

Qu'est‑ce qu'une validation de formulaire?

Les divers types de validation de formulaire

Utiliser la validation intégrée au formulaire

Contraintes de validation sur les éléments input — simple début

Attribut required

Validation selon une expression régulière

Limitation de la taille des entrées

Exemple complet

Messages adaptés pour les erreurs

Validation de formulaires avec JavaScript

API de contraintes de validation HTML5

Méthodes de l'API de validation des contraintes

Exemple utilisant la validation des contraintes

CSS

JavaScript

Valider des formulaires sans API intégrée

Exemple sans utilisation de la validation des contraintes

CSS

JavaScript

Validation à distance

Conclusion

Dans ce module

État initial

HTML

CSS

Resultat pour l'état initial

`datetime-local`

`month`

`time`

`week`

Contraintes de validation sur les éléments input — simple début

L'attribut `role`

L'attribut `aria-selected`

Les étiquettes peuvent être cliquées, aussi !

Apprentissage actif : construire une structure de formulaire