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.

<input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

Valeur Aucune, l'attribut value ne devrait pas être utilisé.
Évènements Aucun.
Attributs pris en charge alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
Attributs IDL Aucun.
Méthodes Aucune.

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.

Utiliser les contrôles <input type="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 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">).

Les fonctionnalités essentielles

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.

Surcharger le comportement par défaut

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.

Utiliser les coordonnées x et y

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

Exemples

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

Spécifications

Spécification État
HTML Living Standard
La définition de '<input type="image">' dans cette spécification.
Standard évolutif
HTML5
La définition de '<input type="image">' dans cette spécification.
Recommendation

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) (Oui) (Oui)

Voir ausi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,