initial commit

1 files changed, 399 insertions, 0 deletions

diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html
new file mode 100644
index 0000000000..41560c72d2
--- /dev/null
+++ b/files/fr/web/html/element/input/image/index.html
@@ -0,0 +1,399 @@
+---
+title: <input type="image">
+slug: Web/HTML/Element/Input/image
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/image
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>image</strong></code> sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div>
+
+<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Les éléments <code>&lt;input type="image"&gt;</code> n'acceptent pas de valeur pour l'attribut <code>value</code>. Le chemin vers l'image à afficher est indiqué grâce à l'attribut <code>src</code>.</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>image</code> permettent d'utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("alt")}}</code></td>
+   <td>Texte de remplacement lorsque l'image ne peut pas être affichée</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formaction")}}</code></td>
+   <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formenctype")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formmethod")}}</code></td>
+   <td>La méthode HTTP à utiliser pour envoyer le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formnovalidate")}}</code></td>
+   <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formtarget")}}</code></td>
+   <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("height")}}</code></td>
+   <td>La hauteur, en pixels CSS, à laquelle dessiner l'image</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("src")}}</code></td>
+   <td>L'URL à partir de laquelle charger l'image</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("width")}}</code></td>
+   <td>La largeur, en pixels CSS, à laquelle dessiner l'image</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3>
+
+<p>L'attribut <code>alt</code> fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.</p>
+
+<p>Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte <em>Se connecter</em>. Le texte alternatif porté par <code>alt</code> devrait être proche de <code>"Se connecter"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que, d'un point de vue technique, l'attribut <code>alt</code> soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.</p>
+</div>
+
+<p>D'un point de vue fonctionnel, l'attribut <code>alt</code> pour <code>&lt;input type="image"&gt;</code> fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.</p>
+
+<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3>
+
+<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code>&lt;input&gt;</code>.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3>
+
+<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p>
+
+<dl>
+ <dt><code>application/x-www-form-urlencoded</code></dt>
+ <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd>
+ <dt><code>multipart/form-data</code></dt>
+ <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>).</dd>
+ <dt><code>text/plain</code></dt>
+ <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd>
+</dl>
+
+<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3>
+
+<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd>
+ <dt><code>post</code></dt>
+ <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd>
+ <dt><code>dialog</code></dt>
+ <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd>
+</dl>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3>
+
+<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p>
+
+<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p>
+
+<dl>
+ <dt><code>_self</code></dt>
+ <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd>
+ <dt><code>_blank</code></dt>
+ <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd>
+ <dt><code>_parent</code></dt>
+ <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>_self</code>.</dd>
+ <dt><code>_top</code></dt>
+ <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>_self</code>.</dd>
+</dl>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3>
+
+<p>Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p>
+
+<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3>
+
+<p>Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton <code>&lt;input&gt;</code>.</p>
+
+<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3>
+
+<p>Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p>
+
+<h2 id="Attributs_obsolètes">Attributs obsolètes</h2>
+
+<p>L'attribut suivant a été défini en HTML4 pour les champs de type <code>image</code> mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("usemap")}}</code></td>
+   <td>Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3>
+
+<p>Lorsque l'attribut <code>usemap</code> est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.</p>
+
+<h2 id="Utiliser_les_contrôles_&lt;input_typeimage>">Utiliser les contrôles <code>&lt;input type="image"&gt;</code></h2>
+
+<p>Un élément <code>&lt;input type="image"&gt;</code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant <a href="/fr/docs/Web/HTML/Element/Input/submit">d'envoyer un formulaire (comme un élément <code>&lt;input type="submit"&gt;</code>)</a>.</p>
+
+<h3 id="Les_fonctionnalités_essentielles">Les fonctionnalités essentielles</h3>
+
+<p>Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <code>&lt;img&gt;</code>) :</p>
+
+<pre class="brush: html notranslate">&lt;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"&gt;</pre>
+
+<p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p>
+
+<ul>
+ <li>L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.</li>
+ <li>L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément &lt;input type="<code>submit"&gt;</code>.</li>
+ <li>Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.</li>
+</ul>
+
+<h3 id="Surcharger_le_comportement_par_défaut">Surcharger le comportement par défaut</h3>
+
+<p>Les éléments <code>&lt;input type="image"&gt;</code> — comme les boutons <a href="/fr/docs/Web/HTML/Element/input/submit"><code>&lt;input type="submit"&gt;</code></a> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :</p>
+
+<dl>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <code>&lt;input&gt;</code>. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code> : la valur par défaut si l'attribut n'est pas utilisé.</li>
+  <li><code>text/plain</code>.</li>
+ </ul>
+
+ <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :
+ <ul>
+  <li><code>post</code> : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.</li>
+  <li><code>get</code> : les données du formulaire sont ajoutées après l'URI de l'attribut <code><strong>form</strong></code> avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.</li>
+ </ul>
+
+ <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une <em>iframe</em>). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières :
+ <ul>
+  <li>_<code>self</code> : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.</li>
+  <li><code>_blank</code> : la réponse est chargée dans un nouveau contexte de navigation anonyme.</li>
+  <li><code>_parent</code> : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur <code>_self</code>.</li>
+  <li><code>_top</code> : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme <code>_self</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Utiliser_les_coordonnées_x_et_y">Utiliser les coordonnées <code>x</code> et <code>y</code></h3>
+
+<p>Lorsqu'on envoie un formulaire avec un bouton <code>&lt;input type="image"&gt;</code>, les coordonnées (<code>x</code> et <code>y</code>) du clic sur l'image sont également envoyées au serveur (<a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">voir cet exemple</a>).</p>
+
+<p>Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple <code>"?x=52&amp;y=55"</code>). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si <code>name</code> vaut <code>"position"</code>, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : <code>"?position.x=52&amp;position.y=55"</code>. Ce préfixe est également appliqué aux autres attributs.</p>
+
+<p>Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).</p>
+
+<h3 id="Ajuster_la_position_et_léchelle_de_limage">Ajuster la position et l'échelle de l'image</h3>
+
+<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <code>&lt;input&gt;</code>. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs <code>width</code> et <code>height</code> afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_formulaire_de_connexion">Un formulaire de connexion</h3>
+
+<p>Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.</p>
+
+<p>{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}</p>
+
+<p>Voici le fragment de code HTML utilisé :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Connectez-vous&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="userId"&gt;Identifiant&lt;/label&gt;
+    &lt;input type="text" id="userId" name="userId"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Mot de passe&lt;/label&gt;
+    &lt;input type="password" id="pwd" name="pwd"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+}</pre>
+
+<h3 id="Ajuster_la_position_et_l’échelle_de_l’image">Ajuster la position et l’échelle de l’image</h3>
+
+<p>Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.</p>
+
+<p>{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Connectez-vous&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="userId"&gt;Identifiant&lt;/label&gt;
+    &lt;input type="text" id="userId" name="userId"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Mot de passe&lt;/label&gt;
+    &lt;input type="password" id="pwd" name="pwd"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+#image {
+  object-position: right top;
+  object-fit: contain;
+  background-color: #ddd;
+}
+</pre>
+
+<p>On voit ici <code>object-position</code> qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et <code>object-fit</code> qui vaut <code>contain</code> : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Aucune, l'attribut <code>value</code> ne devrait pas être utilisé.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>Aucune.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-image")}}</p>
+
+<h2 id="Voir_ausi">Voir ausi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.</li>
+</ul>