<input type="image">

Les éléments <input type="image"> n'acceptent pas l'attribut value. Le chemin vers le fichier de l'image à afficher est indiqué via l'attribut src.

En complément des attributs partagés par l'ensemble des éléments <input>, les boutons image prennent en charge les attributs suivants.

L'attribut alt fournit une chaîne de caractères alternative à utiliser si l'image du bouton ne peut être affichée (suite à une erreur, à un agent utilisateur qui ne peut pas ou n'est pas configuré pour afficher les images, ou si la personne utilise un outil de lecture d'écran). Si cet attribut est fourni, il doit être une chaîne de caractères non-vide qui est un libellé pertinent pour le bouton.

Ainsi, si un bouton graphique affiche une image avec une icône ou une image avec un texte "Se connecter", l'attribut alt devrait être renseigné avec une valeur comme Se connecter.

D'un point de vue fonctionnel, l'attribut alt de <input type="image"> alt se comporte de façon analogue à l'attribut alt des éléments <img>.

Une chaîne de caractères qui indique l'URL vers laquelle envoyer les données du formulaire. La valeur de cet attribut surcharge celle de l'attribut action de l'élément <form> propriétaire de cet élément <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 lors de l'envoi des données du formulaire au serveur. Trois valeurs sont possibles :

application/x-www-form-urlencoded

La valeur par défaut. Les données sont envoyées sous forme d'une chaîne de caractères après l'URL en encodant le texte avec un algorithme comme celui de encodeURI().

multipart/form-data

Utilise l'API FormData pour gérer les données et permet d'envoyer des fichiers au serveur. Ce type d'encodage doit être utilisé si le formulaire contient des éléments <input type="file">.

text/plain

Du texte simple. Ce type d'encodage est principalement utilisé pour le débogage afin de voir facilement les données envoyées.

La valeur de cet attribut surcharge celle de l'attribut enctype de l'élément <form> propriétaire de cet élément <input>.

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. Les valeurs possibles sont :

get

La valeur par défaut. Une URL est construite en commençant par l'URL fournie par l'attribut formaction ou l'attribut action du formulaire, puis en ajoutant un point d'interrogation, puis en ajoutant les données du formulaire en respectant l'encodage décrit par l'attribut formenctype ou l'attribut enctype du formulaire. L'URL est alors envoyée au serveur en utilisant une requête HTTP GET. Cette méthode fonctionne pour les formulaires simples qui ne contiennent que des caractères ASCII et qui n'ont pas d'effets de bord.

post

Les données du formulaire sont incluses dans le corps de la requête qui est envoyée à l'URL fournie par l'attribut formaction ou l'attribut action du formulaire en utilisant une requête HTTP POST. Cette méthode permet d'envoyer des données complexes et des fichiers.

dialog

Cette méthode est utilisée afin d'indiquer que le bouton ferme la boîte de dialogue à laquelle le champ est associé, aucune donnée du formulaire n'est envoyée.

La valeur de cet attribut surcharge celle de l'attribut method de l'élément <form> propriétaire de cet élément <input>.

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

Un attribut booléen qui, s'il est présent, indique que le formulaire ne devrait pas être validé avant envoi au serveur.

La valeur de cet attribut surcharge celle de l'attribut novalidate de l'élément <form> propriétaire de cet élément <input>.

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é indiquant où afficher la réponse reçue après l'envoi du formulaire. Cette chaîne de caractères doit être le nom d'un contexte de navigation (autrement dit, un onglet, une fenêtre ou une <iframe>.

En plus des noms variables qui peuvent être donnés aux onglets, fenêtres et iframes, il existe certains mots-clés spéciaux qui peuvent être utilisés :

_self

La valeur par défaut. La réponse est chargée dans le même contexte de navigation que celui qui contient le formulaire. Le document courant est alors remplacé par les données reçues.

_blank

La réponse est chargée dans un nouveau contexte de navigation anonyme. Il s'agit généralement d'un nouvel onglet dans la même fenêtre que le document courant (ce comportement 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 tel contexte parent, le comportement obtenu est le même qu'avec _self.

_top

La réponse est chargée dans le contexte de navigation de plus haut niveau. Il s'agit du contexte de navigation qui est l'ancêtre de plus haut niveau du contexte courant. Si le contexte courant est déjà le contexte de plus haut niveau, le comportement obtenu est le même qu'avec _self.

La valeur de cet attribut surcharge celle de l'attribut target de l'élément <form> propriétaire de cet élément <input>.

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

Un nombre qui indique la hauteur, exprimée en pixels CSS, selon laquelle dessiner l'image indiquée par l'attribut src.

Une chaîne de caractères qui indique l'URL du fichier contenant l'image à afficher sur le bouton graphique. Lorsque la personne interagit avec l'image, le contrôle réagit comme un bouton d'envoi (<input type="submit">).

Un nombre qui indique la largeur, exprimée en pixels CSS, selon laquelle dessiner l'image indiquée par l'attribut src.

L'attribut qui suit a été défini en HTML 4 pour les contrôles de type image, mais n'a pas été implémenté par tous les navigateurs et est désormais déprécié.

Lorsque cet attribut est indiqué, sa valeur doit être le nom d'un élément de carte d'images <map>, qui définit une carte d'image à utiliser sur le bouton. Cet usage est obsolète et il faut remplacer cet attribut par une utilisation de l'élément <img> si on veut utiliser des cartes d'image.

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 directement géré par la couche CSS), et se comporte principalement comme un élément <img> classique, avec les fonctionnalités d'un bouton d'envoi.

Prenons un exemple simple qui utilise les différentes fonctionnalités essentielles d'un tel bouton (et 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 est utilisé afin d'indiquer le chemin vers l'image à afficher sur le bouton.
• L'attribut alt permet de fournir un texte alternatif afin que les personnes qui utilisent un outil de lecture d'écran puissent avoir une meilleure idée du rôle du bouton. Ce texte sera également affiché si l'image ne peut être affichée pour quelque raison que ce soit (par exemple si le chemin contient une coquille). Si possible, on utilisera un texte qui correspond au libellé qui aurait été choisi si le bouton avait été un bouton d'envoi texte classique.
• Les attributs width et height indiquent respectivement la largeur et la hauteur, exprimées en pixels, selon lesquelles afficher l'image. Le bouton aura la même taille que l'image. S'il faut que la zone couverte par le bouton soit plus grande que l'image, on utilisera du CSS (par exemple la propriété padding). Si une seule dimension est indiquée, la seconde est automatiquement ajustée pour que l'image conserve ses proportions originales.

Les éléments <input type="image">, comme les boutons d'envoi classiques, acceptent certains attributs qui surchargent le comportement indiqué par le formulaire :

• La valeur de formaction surcharge celle fournie par le formulaire avec action
• La valeur de formenctype surcharge celle fournie par le formulaire avec enctype
• La valeur de formmethod surcharge celle fournie par le formulaire avec method
• La valeur de formnovalidate surcharge celle fournie par le formulaire avec novalidate
• La valeur de formtarget surcharge celle fournie par le formulaire avec target

Voir les paragraphes précédents pour le rôle détaillé de chacun de ces attributs.

Lors de l'envoi d'un formulaire avec un bouton graphique <input type="image">, deux données supplémentaires sont automatiquement envoyées au serveur par le navigateur : les coordonnées x et y de l'emplacement du clic sur l'image. Vous pouvez voir ceci à l'œuvre dans l'exemple sur les coordonnées X Y.

Lorsqu'on clique sur l'image pour envoyer le formulaire, des données sont ajoutées aux paramètres de l'URL, comme ?x=52&y=55. Attention, si le bouton utilise un attribut name, sa valeur sera utilisée comme préfixe pour chaque attribut, par exemple si name vaut position, les coordonnées envoyées dans l'URL seraient transmises sous la forme ?position.x=52&position.y=55. Cela vaut également pour les autres attributs.

Ces coordonnées correspondent à l'abscisse et à l'ordonnée du point où le clic a eu lieu, relatifs à une origine (0, 0) située dans le coin supérieur gauche de l'image. On peut utiliser ces valeurs si l'emplacement du clic a une quelconque importance, par exemple s'il s'agit d'une carte sur laquelle on clique. Le code côté serveur pourra alors déterminer l'emplacement du clic et renvoyer des informations correspondantes au lieu visé.

Dans l'exemple qui précède, on pourrait implémenter, coté serveur, une logique qui détermine la couleur sur laquelle le clic a eu lieu pour créer un classement des couleurs en fonction du nombre de votes pour chacune.

La propriété CSS object-position permet d'ajuster la position de l'image au sein du cadre fourni par l'élément <input> et la propriété object-fit contrôle la façon dont la taille de l'image est ajustée afin de tenir dans le cadre. On peut donc définir un cadre pour l'image avec les attributs width et height afin de réserver de l'espace sur la page puis ajuster l'emplacement de l'image et son éventuel redimensionnement au sein de cet espace.

L'exemple suivant affiche le même bouton qu'auparavant, cette fois-ci inclus dans un formulaire de connexion classique.

HTML

<form>
  <p>Connectez-vous à votre compte</p>
  <div>
    <label for="userId">Identifiant utilisateur</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

Voici quelques règles CSS pour améliorer l'apparence des éléments de base :

div {
  margin-bottom: 10px;
}

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

Résultat

Dans ce nouvel exemple, on adapte l'exemple précédent afin d'avoir plus de place pour l'image et on ajuste la taille et la position de l'image à l'aide des propriétés object-fit et object-position.

HTML

<form>
  <p>Connectez-vous à votre compte</p>
  <div>
    <label for="userId">Identifiant utilisateur</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="200"
      height="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;
}

Résultat

Ici, object-position est configuré afin que l'image soit dessinée au coin supérieur droit de l'élément et object-fit est paramétré avec la valeur contain, qui indique que l'image doit être dessinée avec la taille la plus grande possible qui puisse tenir dans la boîte de l'élément, sans modifier ses proportions. On notera que l'arrière-plan gris de l'élément est toujours visible sur la zone qui n'est pas couverte par l'image.

• L'élément <input> et l'interface DOM qu'il implémente : HTMLInputElement
• Les propriétés CSS pour le positionnement et le dimensionnement de l'image dans le cadre de l'élément <input> : object-position et object-fit
• Compatibilité des propriétés CSS pour les contrôles de formulaire