<input type="image">

Les éléments <input> dont l'attribut type vaut image 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.

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 é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.

En complément des attributs pris en charge par l'ensemble des éléments <input>, les boutons image permettent d'utiliser les attributs suivants :

L'attribut alt 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.

Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte Se connecter. Le texte alternatif porté par alt devrait être proche de "Se connecter".

D'un point de vue fonctionnel, l'attribut alt pour <input type="image"> fonctionne de la même façon que l'attribut alt associé aux éléments <img>.

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 action du formulaire (<form>) propriétaire du champ <input>.

Cet attribut est également disponible pour les éléments <input type="submit"> et <button>.

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 :

application/x-www-form-urlencoded

Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de encodeURI(). Cette valeur est la valeur par défaut.

multipart/form-data

Cette valeur utilise l'API FormData pour gérer les données et permet d'uploaderdes fichiers. Cet encodage doit être utilisé s'il y a des éléments  <input> de type "file" (<input type="file">).

text/plain

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.

Si cet attribut est défini, sa valeur prend la priorité sur l'attribut action du formulaire.

Cet attribut est également disponible pour les éléments <input type="submit"> et <button>.

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 method du formulaire. Les valeurs autorisées sont :

get

Une URL est construite en commençant avec l'URL fournie par l'attribut formaction ou action, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec formenctype ou enctype. Cette URL est ensuite envoyée au serveur avec une requête HTTP get. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. C'est la valeur par défaut.

post

Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut formaction ou action en utilisant une requête push. Cette méthode prend en charge les données plus complexes (que celles pour get) et les pièces jointes sous forme de fichiers.

dialog

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.

Cet attribut est également disponible pour les éléments <input type="submit"> et <button>.

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 novalidate du formulaire parent.

Cet attribut est également disponible pour les éléments <input type="submit"> et <button>.

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 d'un contexte de navigation (un onglet, une fenêtre ou une <iframe>). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut target du formulaire (<form>) parent.

En complément des noms des onglets, fenêtres, iframes, quelques mots-clés spéciaux peuvent être utilisés :

_self

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. Cette valeur est la valeur par défaut.

_blank

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.

_parent

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 _self.

_top

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 _self.

Cet attribut est également disponible pour les éléments <input type="submit"> et <button>.

Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut src.

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 <input>.

Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut src.

L'attribut suivant a été défini en HTML4 pour les champs de type image mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :

Lorsque l'attribut usemap est utilisé, sa valeur doit être le nom d'un élément <map> qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément <img> devrait être utilisé pour les images avec des zones cliquables.

Un élément <input type="image"> est un élément remplacé (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 <img> tout en permettant d'envoyer un formulaire (comme un élément <input type="submit">).

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"
       src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

• L'attribut src indique le chemin de l'image qu'on souhaite afficher sur le bouton.
• L'attribut alt 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 <input type="submit">.
• Les attributs width et height 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é padding). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.

Les éléments <input type="image"> — comme les boutons <input type="submit"> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :

formaction HTML5

Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <input>. Cet attribut surcharge l'attribut action du formulaire associé.

formenctype HTML5

Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :

• application/x-www-form-urlencoded : la valur par défaut si l'attribut n'est pas utilisé.
• text/plain.

Si cet attribut est utilisé, il surcharge l'attribut enctype du formulaire associé.

formmethod HTML5

Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :

• post : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.
• get : les données du formulaire sont ajoutées après l'URI de l'attribut form 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.

Si cet attribut est utilisé, il surcharge l'attribut method du formulaire associé.

formnovalidate HTML5

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 novalidate du formulaire associé.

formtarget HTML5

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 iframe). Si cet attribut est indiqué, il surcharge l'attribut target du formulaire associé. Les mots-clés suivants ont des significations particulières :

• _self : 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é.
• _blank : la réponse est chargée dans un nouveau contexte de navigation anonyme.
• _parent : 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 _self.
• _top : 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 _self.

Lorsqu'on envoie un formulaire avec un bouton <input type="image">, les coordonnées (x et y) du clic sur l'image sont également envoyées au serveur (voir cet exemple).

Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple "?x=52&y=55"). Si le contrôle possède un attribut name, ce nom sera utilisé comme préfixe. Ainsi, si name vaut "position", les coordonnées du clic seront envoyées dans l'URL avec le format suivant : "?position.x=52&position.y=55". Ce préfixe est également appliqué aux autres attributs.

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).

Il est possible d'utiliser la propriété CSS object-position afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <input>. La propriété CSS 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 width et height afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.

Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.

Voici le fragment de code HTML utilisé :

<form>
  <p>Connectez-vous</p>
  <div>
    <label for="userId">Identifiant</label>
    <input type="text" id="userId" name="userId">
  </div>
  <div>
    <label for="pwd">Mot de passe</label>
    <input type="password" id="pwd" name="pwd">
  </div>
  <div>
    <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">
  </div>
</form>

Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

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 à object-fit et object-position.

HTML

<form>
  <p>Connectez-vous</p>
  <div>
    <label for="userId">Identifiant</label>
    <input type="text" id="userId" name="userId">
  </div>
  <div>
    <label for="pwd">Mot de passe</label>
    <input type="password" id="pwd" name="pwd">
  </div>
  <div>
    <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">
  </div>
</form>

CSS

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;
}

On voit ici object-position qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et object-fit qui vaut contain : 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.

• L'élément <input> et l'interface DOM HTMLInputElement qu'il implémente.