Fix #4269 - Removes empty/special characters (#4270)

* Remove ufeff

* Remove u2064

* Remove u2062

* Replace u202f followed by : with  :

* Replace u202f next to « or » with   and « or »

* Replace u202f followed by ; with  ;

* Replace u202f followed by ! with  

* Replace u202f followed by ? with  ?

* Replace remaining u202f with classical space

* Replace u200b surrounded by space  with classical space

* Replace u200b surrounded by space  with classical space - again (repeated)

* Remove remaining u200b

* Remove u200a

* Replace u2009 with  

* Remove u00ad

* Replace u00a0 followed by : ! or ? with   and punctuation

* Replace u00a0 surrounded « or » with   and punctuation

* Replace u00a0 followed by whitespaces

* Replace u00a0 preceded by whitespaces

* Replace u00a0 followed by a newline with a newline

* Replace u00a0 followed by a newline with a newline - Take2

* Replace u00a0 followed by a ;   and punctuation

* Remove u00a0 followed by ,

* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)

* Manual replacement of ([\u00a0])([ ]+)

* Replace remaining ([\u00a0]+) by a space

* cleaning empty elements

* remove ufe0f

* Remove u00a0 and u202f after merging against updated main

* remove double whitespace using (\w)(  )(\w)

14 files changed, 515 insertions, 515 deletions

diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md
index 2d74518150..26472bcc80 100644
--- a/files/fr/learn/forms/basic_native_form_controls/index.md
+++ b/files/fr/learn/forms/basic_native_form_controls/index.md
@@ -20,7 +20,7 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs et les
         <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML"
@@ -29,7 +29,7 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre quels sont les types de widgets de forme native disponibles
         dans les navigateurs pour collecter des données et comment les mettre en
@@ -39,20 +39,20 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p
   </tbody>
 </table>
 
-Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos.
+Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos.
 
-> **Note :** La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input).
+> **Note :** La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs&nbsp;; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input).
 
 ## Attributs communs
 
 Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :
 
-| Nom de l'attribut | Valeur par défaut | Description                                                                                                                                                                                                                                                                                                                                                                 |
+| 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é.                                                              |
+| `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")}}&nbsp;; 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.                                                                                                                                                                                                                                                                                           |
+| `name`            |                   | Le nom de l'élément&nbsp;; il sera soumis en même temps que les données du formulaire.                                                                                                                                                                                                                                                                                           |
 | `value`           |                   | La valeur initiale de l'élément.                                                                                                                                                                                                                                                                                                                                            |
 
 ## Champs de saisie de texte
@@ -61,7 +61,7 @@ Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formu
 
 > **Note :** Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la [mise en forme riche](/fr/docs/Rich-Text_Editing_in_Mozilla "/en-US/docs/Rich-Text_Editing_in_Mozilla") (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.
 
-Tous les champs textuels ont des comportement en commun :
+Tous les champs textuels ont des comportement en commun&nbsp;:
 
 - Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).
 - Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.
@@ -70,19 +70,19 @@ Tous les champs textuels ont des comportement en commun :
 
 > **Note :** L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.
 
-###  Champs texte sur une seule ligne
+###  Champs texte sur une seule ligne
 
 On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à `text` (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, `text` est la valeur par défaut). `text` est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez `type="date"` et que le navigateur ne prend pas en charge les sélecteurs de date natifs).
 
 > **Note :** Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
 
-Voici un exemple élémentaire de champ texte sur une ligne :
+Voici un exemple élémentaire de champ texte sur une ligne&nbsp;:
 
 ```html
 <input type="text" id="comment" name="comment" value="Je suis un champ texte">
 ```
 
-Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.
+Les champs texte sur une ligne n'ont qu'une seule contrainte&nbsp;: si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.
 
 ![Screenshots of single line text fields on several platforms.](https://developer.mozilla.org/files/4273/all-single-line-text-field.png)
 
@@ -90,15 +90,15 @@ HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs
 
 #### Champ d'adresse électronique
 
-Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="email" id="email" name="email" multiple>
 ```
 
-Avec ce `type` , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :
+Avec ce `type` , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur&nbsp;:
 
-![Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »](fr-email.png)
+![Entrée d'un e-mail non valide déclenchant un message d'avertissement «&nbsp;Veuillez saisir une adresse électronique valide »](fr-email.png)
 
 Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).
 
@@ -108,7 +108,7 @@ Sur certains périphériques (les mobiles en particulier), un clavier virtuel di
 
 #### Champ pour mot de passe
 
-Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="password" id="pwd" name="pwd">
@@ -116,25 +116,25 @@ Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htm
 
 Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.
 
-Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition.
+Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur&nbsp;; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition.
 
 Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir [Mots de passe peu sûrs](/fr/docs/Sécurité/MotsdepasseInsecurisés).
 
 #### Champ de recherche
 
-Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="search" id="search" name="search">
 ```
 
-La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.
+La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une «&nbsp;×&nbsp;» à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée&nbsp;: les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.
 
 ![Screenshots of search fields on several platforms.](all-search-field.png)
 
 #### Champ pour numéro de téléphone
 
-Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="tel" id="tel" name="tel">
@@ -144,13 +144,13 @@ Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattr
 
 #### Champ d'URL
 
-Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}} :
+Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}}&nbsp;:
 
 ```html
     <input type="url" id="url" name="url">
 ```
 
-Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.
+Il ajoute une contrainte de validation spéciale du champ&nbsp;; le navigateur renvoie une erreur si une URL invalide est saisie.
 
 > **Note :** ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.
 
@@ -158,7 +158,7 @@ Il ajoute une contrainte de validation spéciale du champ ; le navigateur renv
 
 ### Champs texte multilignes
 
-Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.
+Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.
 
 ```html
     <textarea cols="30" rows="10"></textarea>
@@ -170,20 +170,20 @@ La principale différence entre un champ `textarea` et un champ monoligne est qu
 
 > **Note :** Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse [multi-line-text-field.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html) (voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html)). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à `none` dans les CSS.
 
-{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :
+{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres)&nbsp;:
 
 | 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` |
+| {{htmlattrxref("wrap","textarea")}} | `soft`            | Indique comment le contrôle va à la ligne. Les valeurs possibles sont&nbsp;: `hard` ou `soft` |
 
 Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.
 
-Deux points clés à noter ici :
+Deux points clés à noter ici&nbsp;:
 
-- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value` ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.
-- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.
+- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value`&nbsp;; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.
+- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels&nbsp;; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.
 
 ## Contenu déroulant
 
@@ -205,16 +205,16 @@ Si nécessaire, la valeur par défaut de la boîte de sélection peut être déf
 
 ```html
     <select>
-      <optgroup label="Fruits">
-        <option>Banane</option>
-        <option selected>Cerise</option>
-        <option>Citron</option>
-      </optgroup>
-      <optgroup label="Légumes">
-        <option>Carotte</option>
-        <option>Aubergine</option>
-        <option>Pomme de terre</option>
-      </optgroup>
+      <optgroup label="Fruits">
+        <option>Banane</option>
+        <option selected>Cerise</option>
+        <option>Citron</option>
+      </optgroup>
+      <optgroup label="Légumes">
+        <option>Carotte</option>
+        <option>Aubergine</option>
+        <option>Pomme de terre</option>
+      </optgroup>
     </select>
 ```
 
@@ -251,17 +251,17 @@ La liste de données est alors liée à un champ texte (généralement un élém
 Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.
 
 ```html
-    <label for="onFruit">Quel est votre fruit préféré ?</label>
+    <label for="onFruit">Quel est votre fruit préféré&nbsp;?</label>
     <input type="text" id="onFruit" list="maSuggestion" />
     <datalist id="maSuggestion">
-      <option>Pomme</option>
-      <option>Banane</option>
-      <option>Mûre</option>
-      <option>Airelles</option>
-      <option>Citron</option>
-      <option>Litchi</option>
-      <option>Pêche</option>
-      <option>Poire</option>
+      <option>Pomme</option>
+      <option>Banane</option>
+      <option>Mûre</option>
+      <option>Airelles</option>
+      <option>Citron</option>
+      <option>Litchi</option>
+      <option>Pêche</option>
+      <option>Poire</option>
     </datalist>
 ```
 
@@ -276,7 +276,7 @@ L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulair
 Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :
 
 ```html
-<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
+<label for="myFruit">Quel est votre fruit préféré&nbsp;? (avec repli)</label>
 <input type="text" id="myFruit" name="fruit" list="fruitList">
 
 <datalist id="fruitList">
@@ -321,13 +321,13 @@ Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} i
 
 ## Éléments à cocher
 
-Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.
+Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher&nbsp;: la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.
 
 Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut `name`.
 
 > **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([voir directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
 
-Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.
+Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.
 
 Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut `value` si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur `on`.
 
@@ -355,7 +355,7 @@ Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même v
 
 ```html
 <fieldset>
-  <legend>Quel est votre mets préféré ?</legend>
+  <legend>Quel est votre mets préféré&nbsp;?</legend>
   <ul>
     <li>
       <label for="soup">Soupe</label>
@@ -377,7 +377,7 @@ Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même v
 
 ## Boutons
 
-Dans les formulaires HTML, il existe trois types de boutons :
+Dans les formulaires HTML, il existe trois types de boutons&nbsp;:
 
 - Submit
   - : Envoie les données du formulaire au serveur.
@@ -386,7 +386,7 @@ Dans les formulaires HTML, il existe trois types de boutons :
 - Anonymous
   - : Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.
 
-Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :
+Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché&nbsp;:
 
 ### submit
 
@@ -418,7 +418,7 @@ Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {
     <input type="button" value="Ceci est un bouton lambda">
 ```
 
-Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :
+Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter&nbsp;:
 
 - Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.
 - Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).
@@ -435,7 +435,7 @@ Ces widgets sont des contrôles permettant l'utilisateur de saisir des données
 
 On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `number`. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.
 
-Il est aussi possible de :
+Il est aussi possible de&nbsp;:
 
 - contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
 - définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.
@@ -465,12 +465,12 @@ Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont l
 Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.
 
 ```html
-<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
+<label for="beans">Combien de haricots pouvez‑vous manger&nbsp;?</label>
 <input type="range" name="beans" id="beans" min="0" max="500" step="10">
 <span class="beancount"></span>
 ```
 
-et en  JavaScript :
+et en JavaScript&nbsp;:
 
 ```js
 var beans = document.querySelector('#beans');
@@ -483,7 +483,7 @@ beans.oninput = function() {
 }
 ```
 
-Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent)  de `span` à la valeur courante `value` de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée.
+Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent)  de `span` à la valeur courante `value` de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée.
 
 L'attribut `range` pour `input` n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.
 
@@ -503,7 +503,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner une date
 
 #### `month`
 
-Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.
+Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.
 
 ```html
 <input type="month" name="month" id="month">
@@ -511,7 +511,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois
 
 #### `time`
 
-Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.
+Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.
 
 ```html
 <input type="time" name="time" id="time">
@@ -519,7 +519,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner un hora
 
 #### `week`
 
-Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.
+Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.
 
 ```html
 <input type="week" name="week" id="week">
@@ -528,7 +528,7 @@ Cette valeur d'attribut crée un widget pour afficher et sélectionner une sema
 Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
 
 ```html
-    <label for="maDate">Quand êtes vous disponible cet été ?</label>
+    <label for="maDate">Quand êtes vous disponible cet été&nbsp;?</label>
     <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
 ```
 
@@ -536,7 +536,7 @@ Tous les contrôles de sélection de date et heure peuvent être contraints à l
 
 ### Sélecteur de couleur
 
-Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.
+Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer&nbsp;: valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.
 
 Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `color`.
 
@@ -554,7 +554,7 @@ Il existe d'autres types de widgets qui ne peuvent pas être classés facilement
 
 ### Sélection de fichier
 
-Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « [Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.
+Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  «&nbsp;[Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires")&nbsp;». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.
 
 Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `file`. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.
 
@@ -570,7 +570,7 @@ Dans cet exemple, le widget de sélection de fichiers permet de sélectionner de
 
 Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `hidden`.
 
-Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value` :
+Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value`&nbsp;:
 
 ```html
     <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
@@ -586,16 +586,16 @@ Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attr
     <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
 ```
 
-Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :
+Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur&nbsp;:
 
-- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.x* »
-- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.y* ».
+- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne «&nbsp;*.x*&nbsp;»
+- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne «&nbsp;*.y*&nbsp;».
 
-Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :
+Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant&nbsp;:
 
         http://foo.com?pos.x=123&pos.y=456
 
-C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ».
+C'est une façon très commode de construire une «&nbsp;hot map&nbsp;» (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article «&nbsp;[Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires")&nbsp;».
 
 ### Compteurs et barres de progression
 
@@ -611,13 +611,13 @@ Une barre de progression représente une valeur qui évolue dans le temps jusqu'
 
 Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.
 
-Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.
+Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément&nbsp;;  les technologies d'assistance vocalisent ce contenu.
 
 #### Meter
 
-Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :
+Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs&nbsp;:
 
-- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties :
+- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties&nbsp;:
 
   - la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)
   - la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)
@@ -629,7 +629,7 @@ Un étalon est une valeur fixe dans une plage délimitée par une valeur minimal
   - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.
   - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.
 
-Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :
+Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre&nbsp;:
 
 - Si la valeur actuelle est dans la partie préférée, la barre est verte.
 - Si la valeur actuelle est dans la partie moyenne, la barre est jaune.
@@ -641,17 +641,17 @@ Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet
 <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
 ```
 
-Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.
+Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément&nbsp;; les technologies d'assistance vocalisent cet affichage.
 
 La prise en charge de `progress` et `meter` est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.
 
 ## Conclusion
 
-Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.
+Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.
 
 ## Voir également
 
-Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :
+Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter&nbsp;:
 
 - [L'état actuelle des formulaires HTML5](http://wufoo.com/html5/) par Wufoo (en anglais)
 - [Tests HTML5 - inputs](http://www.quirksmode.org/html5/inputs.html) sur Quirksmode (en anglais) (et [pour les navigateurs mobiles](http://www.quirksmode.org/html5/inputs_mobile.html))
diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md
index 351da31325..1a49462038 100644
--- a/files/fr/learn/forms/form_validation/index.md
+++ b/files/fr/learn/forms/form_validation/index.md
@@ -11,7 +11,7 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs, une bonne compréhension du
         <a href="/fr/docs/Learn/HTML">HTML</a>, des
@@ -20,7 +20,7 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est
         important et comment la mettre en Å“uvre.
@@ -33,20 +33,20 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don
 
 Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :
 
-- « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)
-- « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).
-- « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).
-- « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).
+- «&nbsp;Ce champ est obligatoire&nbsp;» (vous ne pouvez pas le laisser vide)
+- «&nbsp;Veuillez entrer votre numéro de téléphone au format xxx-xxxx&nbsp;» (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).
+- «&nbsp;Veuillez entrer une adresse e-mail valide&nbsp;» (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).
+- «&nbsp;Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre&nbsp;» (sérieusement ?).
 
-C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.
+C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.
 
-La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.
+La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve&nbsp;: cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.
 
 Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :
 
 - **obtenir de bonnes données dans un bon format** — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.
 - **protéger nos utilisateurs** — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.
-- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)).
+- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)).
 
 ### Les divers types de validation de formulaire
 
@@ -67,26 +67,26 @@ Dans le monde réel, les développeurs ont tendance à utiliser une combinaison
 
 ## Utiliser la validation intégrée au formulaire
 
-Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
-Quand un élément est valide :
+Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) sur les éléments de formulaire&nbsp;; ils vous permettent de spécifier des règles pour une entrée de formulaire comme&nbsp;: une valeur doit‑elle être remplie&nbsp;? y a-t-il une longueur minimale et/ou maximale des données&nbsp;? doit‑elle être un nombre, une adresse e-mail ou autre chose&nbsp;? doit‑elle correspondre à un modèle&nbsp;? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
+Quand un élément est valide&nbsp;:
 
-- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
+- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} &nbsp;; cela vous permet d'appliquer une composition de style distinctive.
 - si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).
 
-Quand un élément est invalide :
+Quand un élément est invalide&nbsp;:
 
-- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
+- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} &nbsp;; cela vous permet d'appliquer une composition de style distinctive.
 - si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.
 
-### Contraintes de validation sur les éléments input — simple début
+### Contraintes de validation sur les éléments input — simple début
 
 Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.
 
-Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple « live » ci-dessous :
+Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple «&nbsp;live&nbsp;» ci-dessous :
 
 ```html hidden
 <form>
-  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+  <label for="choose">Préférez‑vous la banane ou la cerise&nbsp;?</label>
   <input id="choose" name="i_like">
   <button>Soumettre</button>
 </form>
@@ -108,19 +108,19 @@ Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire
 
 ### Attribut required
 
-La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).
+La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).
 
-Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous :
+Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous&nbsp;:
 
 ```html
 <form>
-  <label for="choose">Préférez-vous la banane ou la cerise ?</label>
+  <label for="choose">Préférez-vous la banane ou la cerise&nbsp;?</label>
   <input id="choose" name="i_like" required>
   <button>Soumettre</button>
 </form>
 ```
 
-Notez aussi le CSS incorporé dans le fichier exemple :
+Notez aussi le CSS incorporé dans le fichier exemple&nbsp;:
 
 ```css
 input:invalid {
@@ -152,24 +152,24 @@ Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base d
 - `[a-z]` — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez `[A-Za-z]` pour minuscules et majuscules et `[A-Z]` pour les majuscules uniquement).
 - `a.c` — correspond à a, suivi par n'importe quel caractère,suivi par c.
 - `a{5}` — correspond à a, 5 fois.
-- `a{5,7}` — correspond à  a, 5 à 7 fois, mais ni plus, ni moins.
+- `a{5,7}` — correspond à a, 5 à 7 fois, mais ni plus, ni moins.
 
-Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :
+Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme&nbsp;:
 
 - `[ -]` — correspond à une espace ou un tiret.
 - `[0-9]` — correspond à tout nombre compris entre 0 et 9.
 
-Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :
+Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres&nbsp;:
 
 - `[Ll].*k` — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.
-- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.
+- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons&nbsp;; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma&nbsp;: Manchester, Ashton-under-lyne et Bishop's Stortford.
 - `[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}` — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.
 
-Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi :
+Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi&nbsp;:
 
 ```html
 <form>
-  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+  <label for="choose">Préférez‑vous la banane ou la cerise&nbsp;?</label>
   <input id="choose" name="i_like" required pattern="banane|cerise">
   <button>Soumettre</button>
 </form>
@@ -187,7 +187,7 @@ input:valid {
 
 {{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}
 
-Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».
+Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne «&nbsp;banane&nbsp;» ou la chaîne «&nbsp;cerise&nbsp;».
 
 Maintenant, essayez de changer la valeur à l'intérieur de l'attribut `pattern` suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !
 
@@ -208,11 +208,11 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s
 ```html
 <form>
   <div>
-    <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+    <label for="choose">Préférez‑vous la banane ou la cerise&nbsp;?</label>
     <input id="choose" name="i_like" required minlength="6" maxlength="6">
   </div>
   <div>
-    <label for="number">Combien en voulez‑vous ?</label>
+    <label for="number">Combien en voulez‑vous&nbsp;?</label>
     <input type="number" id="number" name="amount" value="1" min="1" max="10">
   </div>
   <div>
@@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s
 ```
 
 - Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.
-- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
+- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
 
 ```html hidden
 input:invalid {
@@ -238,7 +238,7 @@ div {
 }
 ```
 
-Voici cet exemple s'exécutant en « live » :
+Voici cet exemple s'exécutant en «&nbsp;live&nbsp;»&nbsp;:
 
 {{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}
 
@@ -246,7 +246,7 @@ Voici cet exemple s'exécutant en « live » :
 
 ### Exemple complet
 
-Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :
+Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation&nbsp;:
 
 ```html
 <form>
@@ -258,7 +258,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég
     </fieldset>
   </p>
   <p>
-    <label for="n1">Quel est votre âge ?</label>
+    <label for="n1">Quel est votre âge&nbsp;?</label>
     <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
          pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
          que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
@@ -267,7 +267,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég
            pattern="\d+">
   </p>
   <p>
-    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
+    <label for="t1">Quel est votre fruit favori&nbsp;?<abbr title="Ce champ est obligatoire">*</abbr></label>
     <input type="text" id="t1" name="fruit" list="l1" required
            pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
     <datalist id="l1">
@@ -280,7 +280,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég
     </datalist>
   </p>
   <p>
-    <label for="t2">Quelle est votre adresse électronique ?</label>
+    <label for="t2">Quelle est votre adresse électronique&nbsp;?</label>
     <input type="email" id="t2" name="email">
   </p>
   <p>
@@ -347,7 +347,7 @@ Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisa
 
 Ces messages automatiques présentent deux inconvénients:
 
-- Il n'y a pas de façon standard de changer leur apparence avec CSS.
+- Il n'y a pas de façon standard de changer leur apparence avec CSS.
 - Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.
 
 | Navigateur             | Affichage                                                                                        |
@@ -368,23 +368,23 @@ HMTL5 fournit une [API de contraintes de validation](https://www.w3.org/TR/html5
 </form>
 ```
 
-En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"):
+En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"):
 
 ```js
 var email = document.getElementById("mail");
 
 email.addEventListener("keyup", function (event) {
-  if(email.validity.typeMismatch) {
-    email.setCustomValidity("J'attend un e-mail, mon cher !");
-  } else {
-    email.setCustomValidity("");
-  }
+  if(email.validity.typeMismatch) {
+    email.setCustomValidity("J'attend un e-mail, mon cher&nbsp;!");
+  } else {
+    email.setCustomValidity("");
+  }
 });
 ```
 
 {{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}
 
-## Validation de formulaires avec JavaScript
+## 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.
 
@@ -396,31 +396,31 @@ Propriétés 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. |
+| `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.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.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`&nbsp;; 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.                                                                                                                                                                                     |
+| `willValidate`             | Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire.                                                                                                                                                                                     |
 
-#### Méthodes de l'API de validation des contraintes
+#### Méthodes de l'API de validation des contraintes
 
 | 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. |
+| `setCustomValidity(message)` | Ajoute un message d'erreur personnalisé à l'élément&nbsp;; 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](https://hyperform.js.org/), 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.
+Pour les anciens navigateurs, il existe [une prothèse d'émulation (_polyfill_) comme Hyperform](https://hyperform.js.org/), 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 :
+Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :
 
 ```html
 <form novalidate>
@@ -435,9 +435,9 @@ Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés.
 </form>
 ```
 
-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.
+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`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) 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.
+L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) 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
 
@@ -504,7 +504,7 @@ input:focus:invalid {
 
 ##### JavaScript
 
-Le code JavaScript suivant gère la validation personnalisée des erreurs.
+Le code JavaScript suivant gère la validation personnalisée des erreurs.
 
 ```js
 // Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
@@ -531,7 +531,7 @@ form.addEventListener("submit", function (event) {
   if (!email.validity.valid) {
 
     // S'il est invalide, on affiche un message d'erreur personnalisé
-    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
+    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher&nbsp;!";
     error.className = "error active";
     // Et on empêche l'envoi des données du formulaire
     event.preventDefault();
@@ -547,15 +547,15 @@ L'API de validation des contraintes fournit un outil puissant pour gérer la val
 
 ### 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](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), 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.
+Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de [widgets personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), 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:
+Pour valider un formulaire, vous devez vous poser un certain nombre de questions:
 
-- Quel type de validation dois-je réaliser ?
-  - : Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
-- Que dois-je faire si le formulaire n'est pas valide ?
-  - : C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
-- Comment puis-je aider l'utilisateur à corriger ses données invalides?
+- Quel type de validation dois-je réaliser&nbsp;?
+  - : Vous devez déterminer comment valider vos données&nbsp;: opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
+- Que dois-je faire si le formulaire n'est pas valide&nbsp;?
+  - : C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
+- Comment puis-je aider l'utilisateur à corriger ses données invalides?
 
   - : Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :
 
@@ -583,11 +583,11 @@ Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonct
 </form>
 ```
 
-Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.
+Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/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.
+De même, nous n'avons pas eu à changer radicalement les CSS&nbsp;; 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.
 
 ```css
 /* On améliore l'aspect de l'exemple avec ces quelques règles */
@@ -650,7 +650,7 @@ input:focus.invalid {
 
 ##### JavaScript
 
-Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.
+Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.
 
 ```js
 // Il existe moins de méthode pour sélectionner un nœud DOM
@@ -735,7 +735,7 @@ Voici le résultat:
 
 {{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 :
+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 :
 
 - Bibliothèques indépendantes :
 
@@ -747,7 +747,7 @@ Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un
 
 #### 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.
+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 :
 
@@ -756,7 +756,7 @@ 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 :
+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 :
 
 - Afficher des messages d'erreur explicites.
 - Être tolérant sur le format des données à envoyer.
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
index 00ad8747ef..1433aea69c 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
@@ -58,7 +58,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 }
 
 /* ------------ */
-/* Style  Chic  */
+/* Style Chic  */
 /* ------------ */
 
 .select {
@@ -198,7 +198,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 }
 
 /* ------------ */
-/* Style  Chic  */
+/* Style Chic  */
 /* ------------ */
 
 .select {
@@ -338,7 +338,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 }
 
 /* ------------ */
-/* Style  Chic  */
+/* Style Chic  */
 /* ------------ */
 
 .select {
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md
index 8d309a3801..070b53aa84 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md
@@ -75,7 +75,7 @@ Ceci est le troisième exemple expliquant comment [construire des widgets de for
 }
 
 /* ------------ */
-/* Style  chic  */
+/* Style chic  */
 /* ------------ */
 
 .select {
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
index 80f5e7f772..2955e7560a 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
@@ -40,19 +40,19 @@ Le widget est dans son état normal :
 
 > **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](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
 
-Le widget est sans son état actif :
+Le widget est sans son état actif&nbsp;:
 
 - l'utilisateur clique sur lui
 - l'utilisateur presse la touche Tabulation et obtient le focus
 - le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.
 
-Le widget est dans un état ouvert :
+Le widget est dans un état ouvert&nbsp;:
 
 - le widget est dans un état autre que ouvert et l'utilisateur clique dessus.
 
 Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :
 
-La valeur change quand :
+La valeur change quand&nbsp;:
 
 - l'utilisateur clique sur une option quand le widget est dans l'état ouvert
 - l'utilisateur presse la touche
@@ -65,14 +65,14 @@ La valeur change quand :
 
   quand le widget est dans l'état actif
 
-Enfin, définissons comment les options du widget doivent se comporter :
+Enfin, définissons comment les options du widget doivent se comporter&nbsp;:
 
 - Quand le widget est ouvert, l'option sélectionnée est mise en valeur
 - Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal
 
 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 <kbd>↑</kbd> ou <kbd>↓</kbd> 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).
+Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> 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 «&nbsp;rien ne se produira&nbsp;» 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](https://fr.wikipedia.org/wiki/Test_utilisateur). Ce processus est appelé UX Design (**U**ser e**X**perience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :
 
@@ -213,7 +213,7 @@ Maintenant que nous avons mis en place les fonctionnalités de base, le divertis
 }
 
 .select .value {
-  /* Comme la valeur peut être plus large que le widget, nous devons nous
+  /* Comme la valeur peut être plus large que le widget, nous devons nous
      assurer qu'elle ne changera pas la largeur du widget. */
   display  : inline-block;
   width    : 100%;
@@ -353,7 +353,7 @@ Avant de commencer, il est important de se rappeler quelque chose de très impor
 - Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.
 - Le script est bogué. Il faut toujours prendre en considération cette éventualité.
 - Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.
-- Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome).
+- Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome).
 - L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.
 
 
@@ -362,7 +362,7 @@ Avant de commencer, il est important de se rappeler quelque chose de très impor
 
 En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.
 
-Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.
+Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.
 
 Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.
 
@@ -396,7 +396,7 @@ Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} réguli
 
 
 
-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é.
+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é.
 
 ```css
 .widget select,
@@ -414,7 +414,7 @@ Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre d
 
 
 
-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é.
+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é.
 
 
 
@@ -472,7 +472,7 @@ Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classée
 3.  [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach") (ce n'est pas du DOM mais du JavaScript moderne)
 4.  {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
 
-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`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets  `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/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 :
+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`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets  `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/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 :
 
 ```js
 NodeList.prototype.forEach = function (callback) {
@@ -801,7 +801,7 @@ Pour prendre en charge le rôle `listbos`, nous n'avons qu'à mettre à jour not
 
 > **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](/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`.
 
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 a0a7954b36..6b79debae1 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
@@ -20,7 +20,7 @@ Les bases vues, nous examinons maintenant plus en détail les éléments utilisÃ
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs et les
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -29,7 +29,7 @@ Les bases vues, nous examinons maintenant plus en détail les éléments utilisÃ
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         Comprendre comment structurer les formulaires HTML et leur adjoindre la
         sémantique pour qu'ils soient utilisables et accessibles.
@@ -82,7 +82,7 @@ Voici un petit exemple :
 
 > **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)).
 
-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.
+En lisant le formulaire ci-dessus, un lecteur d'écran dira «&nbsp;Taille du jus de fruit&nbsp;: petit&nbsp;» pour le premier widget, «&nbsp;Taille du jus de fruit&nbsp;: moyenne&nbsp;» pour le second, et «&nbsp;Taille du jus de fruit&nbsp;: grande&nbsp;» pour le troisième.
 
 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.
 
@@ -90,31 +90,31 @@ En raison de son influence sur les techniques d'assistance, l'élément {{HTMLEl
 
 ## L'élément \<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 :
+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&nbsp;:
 
 ```html
-<label for="name">Nom :</label> <input type="text" id="name" name="user_name">
+<label for="name">Nom&nbsp;:</label> <input type="text" id="name" name="user_name">
 ```
 
-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é ».
+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 «&nbsp;Nom, texte indiqué&nbsp;».
 
-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.
+Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme «&nbsp;Texte édité vierge&nbsp;», ce qui n'est pas utile du tout.
 
-Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :
+Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi&nbsp;:
 
 ```html
 <label for="name">
-  Nom : <input type="text" id="name" name="user_name">
+  Nom&nbsp;: <input type="text" id="name" name="user_name">
 </label>
 ```
 
 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.
 
-### Les étiquettes peuvent être cliquées, aussi !
+### Les étiquettes peuvent être cliquées, aussi&nbsp;!
 
-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.
+Autre avantage de bien configurer les étiquettes&nbsp;: vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte&nbsp;: 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.
 
-Par exemple :
+Par exemple&nbsp;:
 
 ```html
 <form>
@@ -135,43 +135,43 @@ Par exemple :
 
 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")}}.
 
-Considérons cet exemple :
+Considérons cet exemple&nbsp;:
 
 ```html
 <p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
 
-<!-- Donc ceci : -->
+<!-- Donc ceci&nbsp;: -->
 <div>
-  <label for="username">Nom :</label>
+  <label for="username">Nom&nbsp;:</label>
   <input type="text" name="username">
   <label for="username"><abbr title="required">*</abbr></label>
 </div>
 
-<!-- sera mieux programmé ainsi : -->
+<!-- sera mieux programmé ainsi&nbsp;: -->
 <div>
   <label for="username">
-    <span>Nom :</span>
+    <span>Nom&nbsp;:</span>
     <input id="username" type="text" name="username">
     <abbr title="required">*</abbr>
   </label>
 </div>
 
-<!-- mais ceci est probablement encore meilleur : -->
+<!-- mais ceci est probablement encore meilleur&nbsp;: -->
 <div>
-  <label for="username">Nom :<abbr title="required">*</abbr></label>
+  <label for="username">Nom&nbsp;:<abbr title="required">*</abbr></label>
   <input id="username" type="text" name="username">
 </div>
 ```
 
-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.
+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 «&nbsp;astérisque&nbsp;» ou «&nbsp;obligatoire&nbsp;», 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 \<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 ».
+- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement «&nbsp;texte édité vierge&nbsp;», 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 «&nbsp;nom astérisque nom éditer texte&nbsp;», 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 «&nbsp;nom astériquer éditer texte&nbsp;».
 
 > **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 !
+> **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&nbsp;!
 
 ## Structures HTML courantes dans les formulaires
 
@@ -185,18 +185,18 @@ Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à
 
 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
+### Apprentissage actif&nbsp;: 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.
+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 :
+2.  Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML&nbsp;:
 
     ```html
     <link href="payment-form.css" rel="stylesheet">
     ```
 
-3.  Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} :
+3.  Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}}&nbsp;:
 
     ```html
     <form>
@@ -204,7 +204,7 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
     </form>
     ```
 
-4.  Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires :
+4.  Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires&nbsp;:
 
     ```html
     <h1>Formulaire de paiement</h1>
@@ -235,21 +235,21 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
         </fieldset>
         <p>
           <label for="name">
-            <span>Nom : </span>
+            <span>Nom&nbsp;: </span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="text" id="name" name="username">
         </p>
         <p>
           <label for="mail">
-            <span>e-mail :</span>
+            <span>e-mail&nbsp;:</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>
+            <span>Mot de passe&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="password" id="pwd" name="password">
@@ -257,14 +257,14 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
     </section>
     ```
 
-6.  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 :
+6.  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&nbsp;:
 
     ```html
     <section>
         <h2>Informations de paiement</h2>
         <p>
           <label for="card">
-            <span>Type de carte :</span>
+            <span>Type de carte&nbsp;:</span>
           </label>
           <select id="card" name="usercard">
             <option value="visa">Visa</option>
@@ -274,14 +274,14 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
         </p>
         <p>
           <label for="number">
-            <span>Numéro de carte :</span>
+            <span>Numéro de carte&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
           </label>
           <input type="text" id="number" name="cardnumber">
         </p>
         <p>
           <label for="date">
-            <span>Validité :</span>
+            <span>Validité&nbsp;:</span>
             <strong><abbr title="required">*</abbr></strong>
             <em>format mm/aa</em>
           </label>
@@ -290,7 +290,7 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe
     </section>
     ```
 
-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 :
+7.  La dernière section est plus simple&nbsp;; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire&nbsp;:
 
     ```html
     <p> <button type="submit">Valider le paiement</button> </p>
@@ -302,7 +302,7 @@ Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouvere
 
 ## 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.
+Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML&nbsp;; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur.
 
 ## Voir aussi
 
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 01405dcce2..f9fe8ecdf5 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
@@ -6,9 +6,9 @@ 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")}}
 
-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 ».
+Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le «&nbsp;navigateur historique&nbsp;». Oui, admettons‑le, si on dit «&nbsp;navigateur historique&nbsp;», 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 «&nbsp;navigateurs historiques&nbsp;». 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 «&nbsp;navigateurs historiques&nbsp;».
 
-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
 
@@ -16,9 +16,9 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan
 
 ### 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](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 :
+- Mozilla&nbsp;: vous êtes au bon endroit, explorez juste MDN
+- Microsoft&nbsp;: [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&nbsp;: comme il y a plusieurs versions de ce moteur, les choses se compliquent&nbsp;:
 
   - [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.
@@ -29,13 +29,13 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan
 - [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).
+- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le «&nbsp;top 5&nbsp;» (y compris Nokia, Amazon et Blackberry).
 
 ## Rendre les choses simples
 
 
 
-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).
+Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique&nbsp;: [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  «&nbsp;plus beaux » ou «&nbsp;avec des fonctionnalités avancées&nbsp;»&nbsp;! 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).
 
 ### La simplification élégante est la meilleure amie du développeur Web
 
@@ -49,8 +49,8 @@ Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon
 
 ```html
 <label for="myColor">
- Choisir une couleur
-  <input type="color" id="myColor" name="color">
+ Choisir une couleur
+  <input type="color" id="myColor" name="color">
 </label>
 ```
 
@@ -81,7 +81,7 @@ Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon
 
 #### Sélecteurs d'attributs CSS
 
-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 :
+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&nbsp;:
 
 ```html
 <input type="number" class="number">
@@ -97,7 +97,7 @@ input.number {
 }
 ```
 
-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&nbsp;:
 
 ```css
 input[type=number],
@@ -109,12 +109,12 @@ input.number {
 
 #### 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&nbsp;:
 
 - 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&nbsp;:
 
 ```html
 <input type="button" class="button" value="Cliquez‑moi">
@@ -132,19 +132,19 @@ input.button {
 }
 
 input.button {
-  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
+  /* Avec ceci non plus&nbsp;! 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&nbsp;:
 
 - 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")}}.
+- 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")}}.
 
 ```html
-<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
+<!-- Cliquer sur ce boutton envoie «&nbsp;<em>Do A</em>&nbsp;» au lieu de «&nbsp;A&nbsp;» dans certains cas -->
 <button type="submit" name="IWantTo" value="A">
   <em>Do A</em>
 </button>
@@ -162,7 +162,7 @@ Bien que JavaScript soit un langage de programmation remarquable pour les naviga
 
 ### 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 «&nbsp;non obstructif&nbsp;». C'est un modèle de développement défini par deux obligations&nbsp;:
 
 - 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.
@@ -171,11 +171,11 @@ Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il
 
 ### La bibliothèque Modernizr
 
-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.
+Dans de nombreux cas, une bonne prothèse d'émulation («&nbsp;polyfill&nbsp;») peut aider en fournissant une API manquante. Un «&nbsp;[polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui «&nbsp;remplit un trou&nbsp;» 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](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.
+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é&nbsp;: [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&nbsp;:
 
 ```js
 Modernizr.load({
@@ -198,17 +198,17 @@ Modernizr.load({
 });
 ```
 
-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.
+L'équipe de Modernizr fait une maintenance opportune de grande liste de «&nbsp;[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](http://modernizr.com/docs/).
+> **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
 
-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&nbsp;; 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&nbsp;: pensez toujours à l'utilisateur final.
 
 ## 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&nbsp;; 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](/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).
 
diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md
index 9f5717dd41..1a5b8a4534 100644
--- a/files/fr/learn/forms/index.md
+++ b/files/fr/learn/forms/index.md
@@ -17,7 +17,7 @@ Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser
 
 ## Prérequis
 
-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).
+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](/fr/Apprendre/CSS/Introduction_à_CSS) et du [JavaScript](/fr/docs/Apprendre/JavaScript).
 
@@ -30,7 +30,7 @@ Le reste du module est toutefois un peu plus difficile — il est facile de plac
 - [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&nbsp;?
 
 - [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.
@@ -38,16 +38,16 @@ Le reste du module est toutefois un peu plus difficile — il est facile de plac
 ## Validation et soumission des données de formulaires
 
 - [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.
+  - : 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&nbsp;? 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.
+  - : 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
 
 - [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 ».)
+  - : 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 «&nbsp;Utilisation des objets FormData&nbsp;».)
 - [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.
 
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 4834f1872d..942766ea2e 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
@@ -21,7 +21,7 @@ Les tables de compatibilité suivantes tentent de résumer l'état de la prise e
 
 ### Valeurs
 
-Pour chaque propriété, il y a quatre valeurs possibles :
+Pour chaque propriété, il y a quatre valeurs possibles&nbsp;:
 
 - 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.
@@ -34,7 +34,7 @@ Pour chaque propriété, il y a quatre valeurs possibles :
 
 ### Rendu
 
-Pour chaque propriété il y a deux rendus possibles :
+Pour chaque propriété il y a deux rendus possibles&nbsp;:
 
 - N (Normal)
   - : Indique que la propriété est appliquée telle quelle.
@@ -91,7 +91,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -137,7 +137,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -189,13 +189,13 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
@@ -221,19 +221,19 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -314,7 +314,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -333,13 +333,13 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("border")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -363,7 +363,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -375,43 +375,43 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -422,7 +422,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global
       <th scope="row">{{cssxref("background")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
@@ -471,7 +471,7 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -490,13 +490,13 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -520,7 +520,7 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -532,43 +532,43 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Partiel</td>
       <td>Partiel</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -644,19 +644,19 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -667,55 +667,55 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -726,19 +726,19 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho
       <th scope="row">{{cssxref("background")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
 </table>
@@ -779,19 +779,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -858,7 +858,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
           <li>
             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
+            et {{HTMLElement("optgroup")}}&nbsp;; 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")}}.
@@ -888,7 +888,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
           <li>
             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")}}.
+            font que pour l'élément  {{HTMLElement("select")}}.
           </li>
         </ol>
       </td>
@@ -911,7 +911,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
@@ -990,25 +990,25 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1033,7 +1033,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -1085,19 +1085,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
@@ -1121,7 +1121,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("background")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
@@ -1168,31 +1168,31 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("width")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1203,55 +1203,55 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("color")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1262,19 +1262,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("background")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
 </table>
@@ -1298,31 +1298,31 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("width")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1333,7 +1333,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("color")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
@@ -1365,13 +1365,13 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
@@ -1390,19 +1390,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1426,7 +1426,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
@@ -1462,31 +1462,31 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e
       <th scope="row">{{cssxref("width")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1497,55 +1497,55 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e
       <th scope="row">{{cssxref("color")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1556,19 +1556,19 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e
       <th scope="row">{{cssxref("background")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("box-shadow")}}</th>
       <td>Non</td>
       <td>Non</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
 </table>
@@ -1594,7 +1594,7 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -1613,13 +1613,13 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1643,55 +1643,55 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1745,25 +1745,25 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Partiel</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1788,55 +1788,55 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -1890,7 +1890,7 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
@@ -1910,13 +1910,13 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("border")}}</th>
       <td>Non</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
@@ -1940,55 +1940,55 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -2040,31 +2040,31 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("width")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("height")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("margin")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("padding")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -2075,55 +2075,55 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("color")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("font")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("letter-spacing")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-align")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-decoration")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-indent")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-overflow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-shadow")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("text-transform")}}</th>
       <td style="text-align: center; vertical-align: top">N.A.</td>
       <td style="text-align: center; vertical-align: top">N.A.</td>
-      <td> </td>
+      <td></td>
     </tr>
   </tbody>
   <tbody>
@@ -2134,7 +2134,7 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range
       <th scope="row">{{cssxref("background")}}</th>
       <td>Oui</td>
       <td>Oui</td>
-      <td colspan="1"> </td>
+      <td colspan="1"> </td>
     </tr>
     <tr>
       <th scope="row">{{cssxref("border-radius")}}</th>
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 71ddd327e2..33fb1d1aea 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
@@ -22,7 +22,7 @@ Cet article examine ce qui arrive quand un utilisateur soumet un formulaire —
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs,
         <a href="/fr/docs/Learn/HTML/Introduction_to_HTML"
@@ -36,7 +36,7 @@ Cet article examine ce qui arrive quand un utilisateur soumet un formulaire —
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         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
@@ -50,13 +50,13 @@ Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumis
 
 ## 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](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.
+Le web se fonde sur une architecture client/serveur élémentaire&nbsp;; 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 ](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.
 
-> **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).
+> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur&nbsp;: premiers pas](/fr/docs/Learn/Server-side/First_steps).
 
 ## Côté client : définition de la méthode d'envoi des données
 
@@ -66,13 +66,13 @@ L'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) définit la méthode d'en
 
 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 :
 
 ```html
 <form action="http://foo.com">
 ```
 
-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&nbsp;:
 
 ```html
 <form action="/somewhere_else">
@@ -107,7 +107,7 @@ Considérons le formulaire suivant :
 ```html
 <form action="http://foo.com" method="get">
   <div>
-    <label for="say">Quelle salutation voulez-vous adresser ?</label>
+    <label for="say">Quelle salutation voulez-vous adresser&nbsp;?</label>
     <input name="say" id="say" value="Salut">
   </div>
   <div>
@@ -124,12 +124,12 @@ Comme nous avons utilisé la méthode `GET`, vous verrez l'URL `www.foo.com/?say
 
 ![](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&nbsp;:
 
 - `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&nbsp;:
 
     GET /?say=Hi&to=Mom HTTP/1.1
     Host: foo.com
@@ -138,7 +138,7 @@ La requête HTTP ressemble à quelque chose comme :
 
 #### 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 : «&nbsp;Hé serveur&nbsp;! vois ces données et renvoie-moi le résultat approprié&nbsp;». 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`](/fr/docs/Web/HTML/Element/Form#attr-method).
 
@@ -158,7 +158,7 @@ Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour
 </form>
 ```
 
-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&nbsp;:
 
     POST / HTTP/1.1
     Host: foo.com
@@ -173,28 +173,28 @@ L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-T
 
 ### 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](/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 :
+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&nbsp;:
 
 1.  Pressez F12
-2.  Selectionnez « Réseau »
-3.  Selectionnez « Tout »
-4.  Selectionnez « foo.com » dans l'onglet « Nom »
-5.  Selectionnez « En‑tête »
+2.  Selectionnez «&nbsp;Réseau&nbsp;»
+3.  Selectionnez «&nbsp;Tout&nbsp;»
+4.  Selectionnez «&nbsp;foo.com&nbsp;» dans l'onglet «&nbsp;Nom&nbsp;»
+5.  Selectionnez «&nbsp;En‑tête&nbsp;»
 
 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&nbsp;:
 
 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
 
-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&nbsp;; souvent, la priorité est donnée à la valeur de clé la plus récente.
 
-### Exemple : PHP brut
+### Exemple&nbsp;: PHP brut
 
 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.
 
@@ -212,13 +212,13 @@ Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci
 
 ![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](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux).
+> **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
 
-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)).
+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)).
 
 ```python
 from flask import Flask, render_template, request
@@ -236,12 +236,12 @@ if __name__ == "__main__":
     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&nbsp;:
 
-- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html)&nbsp;: 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.
+- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html)&nbsp;: 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 «&nbsp;à rediriger sur `/hello` quand le formulaire est soumis&nbsp;».)
+- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html)&nbsp;: 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](/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.
+> **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 «&nbsp;`pip3 install flask`&nbsp;». À ce moment‑là vous pourrez exécuter l'exemple avec «&nbsp;`python3 python-example.py`&nbsp;», puis en allant sur «&nbsp;`localhost:5000`&nbsp;» dans votre navigateur.
 
 ### Autres langages et canevas de structures
 
@@ -260,11 +260,11 @@ Enfin il faut noter que même en utilisant ces canevas, travailler avec des form
 
 ## 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
 
-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 : «&nbsp;Ce sont des données de formulaire encodées à l'aide de paramètres URL&nbsp;».
 
 Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :
 
@@ -290,7 +290,7 @@ Par exemple :
 
 ## 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](/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.
 
@@ -304,7 +304,7 @@ Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujour
 - **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é&nbsp;!
 
 ## Conclusion
 
@@ -314,7 +314,7 @@ Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son
 
 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](/fr/docs/Learn/Server-side/First_steps)
+- [Programmation d'un site web côté‑serveur&nbsp;: 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/)
 
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 f0e64a4440..f120464603 100644
--- a/files/fr/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md
@@ -104,7 +104,7 @@ Voici le résultat en direct :
 
 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 («&nbsp;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](/fr/docs/Web/API/FormData/Utilisation_objets_FormData), mais voici deux exemples :
 
@@ -150,7 +150,7 @@ Voici le résultat directement :
 
 #### 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 :
 
@@ -424,7 +424,7 @@ Voici le résultat en direct :
 
 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 :
 
-- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de  `FormData` avec des {{domxref("Using_web_workers","worker")}}.
+- [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`)
 
diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md
index 89c4f12824..89f13ac148 100644
--- a/files/fr/learn/forms/styling_web_forms/index.md
+++ b/files/fr/learn/forms/styling_web_forms/index.md
@@ -16,11 +16,11 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
 
 > 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&nbsp;?
 
-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.
+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.
 
@@ -32,7 +32,7 @@ Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec l
 
 #### 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&nbsp;:
 
 1.  {{HTMLElement("form")}}
 2.  {{HTMLElement("fieldset")}}
@@ -61,7 +61,7 @@ Pour changer l'apparence [des éléments facilement modifiables](/fr/docs/HTML/F
 
 ### 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](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/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&nbsp;: [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
 
@@ -86,7 +86,7 @@ Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs o
 
 ### 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&nbsp;:
 
 ```css
 button, input, select, textarea {
@@ -105,7 +105,7 @@ Il existe un débat animé sur le fait qu'un formulaire ait une meilleure appare
 
 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")}}&nbsp;:
 
 ```css
 input, textarea, select, button {
@@ -124,13 +124,13 @@ Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxre
 
 ### 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&nbsp;:
 
 #### 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`.
 
-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
 
@@ -176,17 +176,17 @@ Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [ar
   <h1>à: Mozilla</h1>
 
   <div id="from">
-    <label for="name">de :</label>
+    <label for="name">de&nbsp;:</label>
     <input type="text" id="name" name="user_name">
   </div>
 
   <div id="reply">
-    <label for="mail">répondre à :</label>
+    <label for="mail">répondre à&nbsp;:</label>
     <input type="email" id="mail" name="user_email">
   </div>
 
   <div id="message">
-    <label for="msg">Votre message :</label>
+    <label for="msg">Votre message&nbsp;:</label>
     <textarea id="msg" name="user_message"></textarea>
   </div>
 
@@ -201,17 +201,17 @@ Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [ar
 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 : [«&nbsp;Journal&nbsp;» de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
+2.  Une police de machine à écrire&nbsp;: [«&nbsp;Secret Typewriter&nbsp;» 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&nbsp;: [«&nbsp;Journal&nbsp;» de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — 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&nbsp;:
 
 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.
+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&nbsp;; voyez notre article sur les [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées.
 
 ### Le CSS
 
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 f261558cdc..d45995e674 100644
--- a/files/fr/learn/forms/your_first_form/example/index.md
+++ b/files/fr/learn/forms/your_first_form/example/index.md
@@ -12,24 +12,24 @@ Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Fo
 
 ```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>
-
-  <div>
-    <label for="courriel">Courriel :</label>
-    <input type="email" id="courriel" name="user_email">
-  </div>
-
-  <div>
-    <label for="message">Message :</label>
-    <textarea id="message" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Envoyer le message</button>
-  </div>
+  <div>
+    <label for="nom">Nom :</label>
+    <input type="text" id="nom" name="user_name">
+  </div>
+
+  <div>
+    <label for="courriel">Courriel :</label>
+    <input type="email" id="courriel" name="user_email">
+  </div>
+
+  <div>
+    <label for="message">Message :</label>
+    <textarea id="message" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Envoyer le message</button>
+  </div>
 </form>
 ```
 
@@ -37,68 +37,68 @@ Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Fo
 
 ```css
 form {
-  /* Pour le centrer dans la page */
-  margin: 0 auto;
-  width: 400px;
-
-  /* Pour voir les limites du formulaire */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
+  /* Pour le centrer dans la page */
+  margin: 0 auto;
+  width: 400px;
+
+  /* Pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
 }
 
 div + div {
-  margin-top: 1em;
+  margin-top: 1em;
 }
 
 label {
-  /* 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;
+  /* 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 */
-  font: 1em sans-serif;
+  /* 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 */
-  width: 300px;
+  /* Pour donner la même dimension à tous les champs textuels */
+  width: 300px;
 
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
 
-  /* Pour harmoniser l'apparence des bordures des champs textuels */
-  border: 1px solid #999;
+  /* 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 */
-  border-color: #000;
+  /* Afin de réhausser les éléments actifs */
+  border-color: #000;
 }
 
 textarea {
-  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
-  vertical-align: top;
+  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
+  vertical-align: top;
 
-  /* Pour donner assez d'espace pour entrer du texte */
-  height: 5em;
+  /* 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  */
-  resize: vertical;
+  /* 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 */
-  margin-left: .5em;
+  /* Cette marge représente approximativement le même espace
+     que celui entre les étiquettes et les champs textuels */
+  margin-left: .5em;
 }
 ```
 
diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md
index bf49454b8c..868a61e423 100644
--- a/files/fr/learn/forms/your_first_form/index.md
+++ b/files/fr/learn/forms/your_first_form/index.md
@@ -20,7 +20,7 @@ Le premier article de notre série vous offre une toute première expérience de
 <table class="standard-table">
   <tbody>
     <tr>
-      <th scope="row">Prérequis :</th>
+      <th scope="row">Prérequis&nbsp;:</th>
       <td>
         Notions concernant les ordinateurs et les
         <a href="/fr/Apprendre/HTML/Introduction_à_HTML"
@@ -29,7 +29,7 @@ Le premier article de notre série vous offre une toute première expérience de
       </td>
     </tr>
     <tr>
-      <th scope="row">Objectif :</th>
+      <th scope="row">Objectif&nbsp;:</th>
       <td>
         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
@@ -45,13 +45,13 @@ Les formulaires HTML sont un des vecteurs principaux d'interaction entre un util
 
 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](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) » 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 «&nbsp;[Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires)&nbsp;» plus loin dans ce module.
 
 ## 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 :
 
-- 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/) ».
+- 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 «&nbsp;[Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/)&nbsp;».
 - 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.
@@ -60,7 +60,7 @@ Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les
 
 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&nbsp;: 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")}}.
 
@@ -81,7 +81,7 @@ Cet élément définit un formulaire. C'est un élément conteneur au même titr
 - 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](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) ».
+> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [«&nbsp;Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires)&nbsp;».
 
 Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.
 
@@ -98,7 +98,7 @@ En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci
         <input type="text" id="name" name="user_name">
     </div>
     <div>
-        <label for="mail">e-mail :</label>
+        <label for="mail">e-mail&nbsp;:</label>
         <input type="email" id="mail" name="user_mail">
     </div>
     <div>
@@ -113,7 +113,7 @@ Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et ren
 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](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire).
+- 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 «&nbsp;intelligent&nbsp;» 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 :
 
@@ -137,7 +137,7 @@ Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bou
     </div>
 ```
 
-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&nbsp;: `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.
@@ -151,11 +151,11 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n
 
 ![](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](https://github.com/mdn/learning-area/blob/master/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)).
+> **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) (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.
 
-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&nbsp;:
 
 ```html
 <style>
@@ -163,7 +163,7 @@ Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans
 </style>
 ```
 
-Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :
+Entre les balises style, ajoutons le CSS suivant, juste comme indiqué&nbsp;:
 
 ```css
 form {
@@ -239,16 +239,16 @@ L'élément {{HTMLElement("form")}} définit où et comment les données sont en
 
 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&nbsp;:
 
 ```html
 <form action="/my-handling-form-page" method="post">
   <div>
-    <label for="name">Nom :</label>
+    <label for="name">Nom&nbsp;:</label>
     <input type="text" id="name" name="user_name" />
   <div>
   <div>
-    <label for="mail">E-mail :</label>
+    <label for="mail">E-mail&nbsp;:</label>
     <input type="email" id="mail" name="user_email" />
   </div>
   <div>
@@ -259,17 +259,17 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b
   ...
 ```
 
-Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », «&nbsp;`user_email`&nbsp;» 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 «&nbsp;`user_name`&nbsp;», «&nbsp;`user_email`&nbsp;» et «&nbsp;`user_message`&nbsp;». 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](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires).
 
 ## 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&nbsp;:
 
 {{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")}}