Ensuite, on ajoute un gestionnaire d'évènement à l'élément <input> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction updateImageDisplay() que nous décrirons juste après.

Les éléments {{HTMLElement("input")}} de type "hidden" permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.

Exemple simple

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

Note : Attention, les évènements DOM input et change ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec hiddenInput.focus()).

Valeur

L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).

Attention ! Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type hidden ne doit donc pas être utilisé comme mécanisme de sécurité.

Attention : Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type hidden ne doit donc pas être utilisé comme mécanisme de sécurité.

Attributs supplémentaires

@@ -157,7 +157,7 @@ textarea {

Note : Vous pouvez consulter l'exemple sur GitHub (cf. le code source et la démonstration live).

Note : Vous pouvez consulter l'exemple sur GitHub (cf. le code source et la démonstration live).

Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :

diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html index aa4a5acd16..4d3fac19f5 100644 --- a/files/fr/web/html/element/input/image/index.html +++ b/files/fr/web/html/element/input/image/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/image

{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}

- -

Valeur

Les éléments <input type="image"> n'acceptent pas de valeur pour l'attribut value. Le chemin vers l'image à afficher est indiqué grâce à l'attribut src.

@@ -190,7 +188,7 @@ translation_of: Web/HTML/Element/input/image

Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <img>) :

<input id="image" type="image" width="100" height="30" alt="Login"
+<input id="image" type="image" width="100" height="30" alt="Login"
        src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
 
 {{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}
@@ -264,7 +262,7 @@ translation_of: Web/HTML/Element/input/image
 
 Voici le fragment de code HTML utilisé :
 
-<form>
+<form>
   <p>Connectez-vous</p>
   <div>
     <label for="userId">Identifiant</label>
@@ -281,7 +279,7 @@ translation_of: Web/HTML/Element/input/image
 
 Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :
 
-div {
+div {
   margin-bottom: 10px;
 }
 
@@ -300,7 +298,7 @@ label {
 
 HTML
 
-<form>
+<form>
   <p>Connectez-vous</p>
   <div>
     <label for="userId">Identifiant</label>
@@ -317,7 +315,7 @@ label {
 
 CSS
 
-div {
+div {
   margin-bottom: 10px;
 }
 
diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html
index a2433db59b..54df76bc7d 100644
--- a/files/fr/web/html/element/input/index.html
+++ b/files/fr/web/html/element/input/index.html
@@ -16,9 +16,7 @@ translation_of: Web/HTML/Element/input
 
 {{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
 
-Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
-
-Les différents types de champs <input>
+Les différents types de champs <input>
 
 La façon dont un élément <input> fonctionne dépend grandement de la valeur de son attribut type. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut type n'est pas présent, il aura la valeur implicite text.
 
@@ -37,7 +35,8 @@ translation_of: Web/HTML/Element/input
  {{HTMLElement("input/month", "month")}} : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
  {{HTMLElement("input/number", "number")}} : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.
  {{HTMLElement("input/password", "password")}} : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs maxlength et minlength définissent la taille maximale et minimale de la valeur à saisir dans le champ.
-  Note : Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.
+  
+    Note : Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.
  
  {{HTMLElement("input/radio", "radio")}} : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.
  {{HTMLElement("input/range", "range")}} : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.
@@ -145,7 +144,7 @@ translation_of: Web/HTML/Element/input
 Seul un élément du document peut avoir l'attribut autofocus. Il n'est pas possible d'utiliser l'attribut autofocus sur les champs de type hidden car ces derniers, masqués, ne peuvent pas avoir le focus.
 
 
-Attention ! Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque autofocus est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.
+Attention : Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque autofocus est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.
 
 
 {{htmlattrdef("disabled")}}
@@ -188,7 +187,7 @@ let hatSize = form.elements["hat-size"];
 Avec ce code, la variable guestName correspondra à l'élément {{domxref("HTMLInputElement")}} du champ guest et hatSize à l'objet pour le champ hat-size.
 
 
-Attention ! Il est préférable de ne pas utiliser de valeurs pour name qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.
+Attention : Il est préférable de ne pas utiliser de valeurs pour name qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.
 
 
 Le nom _charset_ possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <input> de type hidden, la valeur du champ (l'attribut value) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.
@@ -205,12 +204,8 @@ let hatSize = form.elements["hat-size"];
 
 disabled et readonly sont bien différents : readonly permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs disabled ne fonctionnent pas comme des contrôles.
 
-
-Notes :
-
-L'attribut required n'est pas autorisé sur les éléments <input> avec l'attribut readonly.
-
-Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de readonly ou de disabled.
+
+Note : L'attribut required n'est pas autorisé sur les éléments <input> avec l'attribut readonly. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de readonly ou de disabled.
 
 
 {{htmlattrdef("required")}}
diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html
index 301cc38dc0..6f21f8d10d 100644
--- a/files/fr/web/html/element/input/month/index.html
+++ b/files/fr/web/html/element/input/month/index.html
@@ -9,21 +9,19 @@ translation_of: Web/HTML/Element/input/month
 ---
 {{HTMLRef}}
 
-Les éléments {{htmlelement("input")}} dont l'attribut type vaut "month" permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format "YYYY-MM", où YYYY représente l'année sur quatre chiffre et MM le mois sur deux chiffres.
+Les éléments {{htmlelement("input")}} dont l'attribut type vaut "month" permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format "YYYY-MM", où YYYY représente l'année sur quatre chiffre et MM le mois sur deux chiffres.
 
 {{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
 
-Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
-
 L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <input type="text">.
 
 Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.
 
-
+
 
 Voici un aperçu du contrôle sous Edge :
 
-
+
 
 Valeur
 
@@ -31,12 +29,12 @@ translation_of: Web/HTML/Element/input/month
 
 Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :
 
-
+Exemple 1
+
 <label for="bday-month">Quel est le mois de votre naissance ?</label>
 <input id="bday-month" type="month" name="bday-month" value="2017-06">
 
-{{EmbedLiveSample('value-example-1', 600, 60)}}
-
+{{EmbedLiveSample('Exemple_1', 600, 60)}}
 
 On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut value suivra toujours le format YYYY-MM.
 
@@ -44,17 +42,16 @@ translation_of: Web/HTML/Element/input/month
 
 Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :
 
-
-
-<label for="bday-month">Quel est le mois de votre naissance ?</label>
+Exemple 2
+
+<label for="bday-month">Quel est le mois de votre naissance ?</label>
 <input id="bday-month" type="month" name="bday-month" value="2017-06">
 
 
-var monthControl = document.querySelector('input[type="month"]');
+var monthControl = document.querySelector('input[type="month"]');
 monthControl.value = '1978-06';
 
-{{EmbedLiveSample("value-example-2", 600, 60)}}
-
+{{EmbedLiveSample("Exemple_2", 600, 60)}}
 
 Attributs supplémentaires
 
@@ -150,7 +147,7 @@ monthControl.value = '1978-06';
 
 
 
-Note : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.
+Note : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.
 
 
 Contrôler la taille du champ
@@ -183,7 +180,7 @@ monthControl.value = '1978-06';
 
 Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :
 
-
+
 
 Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.
 
@@ -213,14 +210,14 @@ input:valid+span:after {
 }
 
 
-Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
+Attention : Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
 
 Gérer la prise en charge des navigateurs
 
 Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :
 
-
+
 
 Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.
 
@@ -255,8 +252,7 @@ input:valid+span:after {
 
 De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.
 
-
-div {
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -280,7 +276,6 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
 }
-
 
 La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que jQuery date picker ou le plugin jQuery timepicker.
 
@@ -329,8 +324,7 @@ input:valid+span:after {
 
 Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).
 
-
-div {
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -354,7 +348,6 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
 }
-
 
 Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille month puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront text car le champ month a automatiquement transformé en text. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).
 
diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html
index 3c2b06a291..8e9cbf1e5b 100644
--- a/files/fr/web/html/element/input/number/index.html
+++ b/files/fr/web/html/element/input/number/index.html
@@ -10,14 +10,12 @@ translation_of: Web/HTML/Element/input/number
 ---
 {{HTMLRef}}
 
-Les éléments {{HTMLElement("input")}} dont l'attribut type vaut number permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.
+Les éléments {{HTMLElement("input")}} dont l'attribut type vaut number permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.
 
 {{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}
 
-Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
-
 
-Note : Si un navigateur ne prend pas en charge le type number, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. text).
+Note : Si un navigateur ne prend pas en charge le type number, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. text).
 
 
 Valeur
@@ -81,7 +79,6 @@ translation_of: Web/HTML/Element/input/number
 
 {{htmlattrdef("step")}}
 
-
 L'attribut step est un nombre qui définit la granularité de la valeur ou le mot-clé any. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil {{anch("min")}} sont valides.
 
 Lorsque la chaîne de caractères any est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre {{anch("min")}} et {{anch("max")}}) est valide.
@@ -89,7 +86,6 @@ translation_of: Web/HTML/Element/input/number
 
 Note : Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.
 
-
 
 Pour les champs number, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a min qui vaut -10 et value qui vaut 1.5, si on a step qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.
 
@@ -98,17 +94,15 @@ translation_of: Web/HTML/Element/input/number
 Les éléments <input type="number"> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.
 
 
-Attention ! On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).
+Attention : On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).
 
 
 
-Note : Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.
+Note : Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.
 
 
 De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :
 
-
-
 Un contrôle simple
 
 Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :
@@ -121,7 +115,7 @@ translation_of: Web/HTML/Element/input/number
 Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.
 
 
-Note : N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté comme un nombre à virgule flottante (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).
+Note : N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté comme un nombre à virgule flottante (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).
 
 
 Indicateurs de saisie - placeholders
@@ -249,7 +243,7 @@ input:valid+span:after {
 Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <span> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <input type="date">).
 
 
-Important : la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).
+Attention : la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).
 
 
 Utilisation d'un motif de validation
diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html
index 29df138c29..7585571836 100644
--- a/files/fr/web/html/element/input/password/index.html
+++ b/files/fr/web/html/element/input/password/index.html
@@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/password
 
 {{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}
 
-Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
-
 La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.
 
 
@@ -30,7 +28,7 @@ translation_of: Web/HTML/Element/input/password
 Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.
 
 
-Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (Line Feed) (code U+000A) et de retour chariot (Carriage Return) (code U+000D) dans la valeur d'un champ "password". Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.
+Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (Line Feed) (code U+000A) et de retour chariot (Carriage Return) (code U+000D) dans la valeur d'un champ "password". Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.
 
 
 Attributs supplémentaires
@@ -115,7 +113,7 @@ translation_of: Web/HTML/Element/input/password
 
 {{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}
 
-Paramétrer l’autocomplétion
+Paramétrer l'autocomplétion
 
 Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :
 
@@ -130,12 +128,10 @@ translation_of: Web/HTML/Element/input/password
  Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.
 
 
-
 <label for="userPassword">Mot de passe :</label>
 <input id="userPassword" type="password" autocomplete="current-password">
-
 
-{{EmbedLiveSample("Paramétrer_l’autocomplétion", 600, 40)}}
+{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}
 
 Rendre le champ obligatoire
 
@@ -194,12 +190,10 @@ translation_of: Web/HTML/Element/input/password
 
 Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.
 
-
 <label for="hexId">Identifiant Hexa :</label>
 <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
        title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux."
        autocomplete="nouveau-mot-de-passe">
-
 
 {{EmbedLiveSample("Validation", 600, 40)}}
 
diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html
index b5a3cf3c8c..8b8fd78f46 100644
--- a/files/fr/web/html/element/input/radio/index.html
+++ b/files/fr/web/html/element/input/radio/index.html
@@ -14,12 +14,10 @@ translation_of: Web/HTML/Element/input/radio
 
 {{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}
 
-Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
-
 On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.
 
 
-Note : Les cases à cocher (checkboxes) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.
+Note : Les cases à cocher (checkboxes) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.
 
 
 Valeur
@@ -69,7 +67,7 @@ translation_of: Web/HTML/Element/input/radio
 Si l'attribut value n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera on pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu "contact=on" ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs value !
 
 
-Note : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.
+Note : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.
 
 
 Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut checked sur l'un des boutons afin d'avoir une option sélectionnée par défaut.
@@ -143,7 +141,7 @@ form.addEventListener("submit", function(event) {
 
 {{htmlattrdef("checked")}}
 
-Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.
+Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.
 
 À la différence des autres navigateurs, Firefox conservera l'état coché dynamique d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.
 
@@ -184,7 +182,7 @@ form.addEventListener("submit", function(event) {
 Ici, c'est le premier bouton radio qui sera sélectionné par défaut.
 
 
-Note : Si l'attribut checked est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.
+Note : Si l'attribut checked est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.
 
 
 Fournir une plus grande zone de sélection
diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html
index eae6bb4f32..04f159c62d 100644
--- a/files/fr/web/html/element/input/range/index.html
+++ b/files/fr/web/html/element/input/range/index.html
@@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/range
 
 {{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}
 
-Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
-
 Si le navigateur de l'utilisateur ne prend pas en charge le type range, il utilisera le type text à la place.
 
 Valeur
@@ -101,18 +99,18 @@ translation_of: Web/HTML/Element/input/range
 
 Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut step avec la valeur 0.01 :
 
-
+Exemple 1
 <input type="range" min="5" max="10" step="0.01">
 
-{{EmbedLiveSample("Granularity_sample1", 600, 40)}}
-
+{{EmbedLiveSample("Exemple_1", 600, 40)}}
+
+Exemple 2
 
 Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur any pour l'attribut step :
 
-
 <input type="range" min="0" max="3.14" step="any">
 
-{{EmbedLiveSample("Granularity_sample2", 600, 40)}}
+{{EmbedLiveSample("Exemple_2", 600, 40)}}
 
 Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.
 
@@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/range
      <input type="range">
    
-   
+   
   
  
 
@@ -175,7 +173,7 @@ translation_of: Web/HTML/Element/input/range
 </datalist>
 
    
-   
+   
   
  
 
@@ -210,7 +208,7 @@ translation_of: Web/HTML/Element/input/range
 </datalist>
 
    
-   
+   
   
  
 
@@ -221,47 +219,41 @@ translation_of: Web/HTML/Element/input/range
 
 Modifier l'orientation du curseur
 
-
-Par défaut, le contrôle est affiché horizontalement dans le navigateur (le curseur se déplace de gauche à droite). Il est toutefois possible de tourner le contrôle avec CSS.
-
-
-Note : Actuellement, cela n'est pas implémenté par les navigateurs (voir {{bug(981916)}} pour Firefox et le bug 341071 pour Chrome).
-
-
 Par exemple :
 
-
+Horizontal
+
 <input type="range" id="volume" min="0" max="11" value="7" step="1">
-
 
-{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}
+{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}
 
 Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :
 
-
-CSS
+Vertical
+
+CSS
 
 #volume {
   height: 150px;
   width: 50px;
 }
 
-HTML
+HTML
 
 <input type="range" id="volume" min="0" max="11" value="7" step="1">
 
-Result
+Résultat
 
-{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}
+{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}
 
 Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.
-
-
+
 
 La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.
 
-
-HTML
+Autre exemple
+
+HTML
 
 Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :
 
@@ -269,7 +261,7 @@ translation_of: Web/HTML/Element/input/range
   <input type="range" min="0" max="11" value="7" step="1">
 </div>
 
-CSS
+CSS
 
 Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément div qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..
 
@@ -292,10 +284,9 @@ Ensuite, on applique une transformation sur l'élément <input>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.
 
-Résultat
+Résultat
 
-{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}
-