Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Les éléments <input> de type image sont utilisés pour créer des boutons d'envoi de formulaire graphiques. Autrement dit, il s'agit de boutons d'envoi qui affichent une image plutôt qu'un texte.
Les éléments <input type="image"> n'acceptent pas l'attribut value. Le chemin vers le fichier de l'image à afficher est indiqué dans 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.
Note : Bien que l'attribut alt soit optionnel sur le plan technique, il devrait en pratique toujours être inclus afin de maximiser l'utilisabilité du contenu.
D'un point de vue fonctionnel, l'attribut alt de <input type="image"> 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-urlencodedC'est la valeur par défaut, qui envoie les données du formulaire sous forme de chaîne de caractères après avoir encodée en pourcent le texte en utilisant un algorithme tel que encodeURI().
multipart/form-dataUtilise 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> de type file (<input type="file">).
text/plainDu texte simple ; 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 :
getLa 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.
postLes 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.
dialogCette 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.
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. Cette valeur surcharge la valeur de l'attribut novalidate sur le formulaire propriaitaire de l'élément.
Cet attribut est également disponible pour les éléments <input type="submit"> et <button>.
Une chaîne de caractères qui définit 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 (c'est-à-dire un onglet, une fenêtre ou un <iframe>). Une valeur définie ici remplace toute cible donnée par l'attribut target sur le <form> propriétaire de cet élément <input>.
En plus des noms variables qui peuvent être donnés aux onglets, fenêtres et cadres, il existe certains mots-clés spéciaux qui peuvent être utilisés :
_selfLa 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.
_blankLa 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.
_parentLa 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.
_topLa 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.
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 n'importe quel bouton.
Un nombre qui indique la largeur selon lequelle dessiner l'image, exprimée en pixels CSS.
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 obsolète.
Si usemap est défini, 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>) :
Les éléments <input type="image">, comme les boutons d'envoi classiques, acceptent certains attributs qui surchargent le comportement indiqué par le formulaire :
formactionL'URI d'un programme qui traite les informations soumises par l'élément d'entrée de formulaire ; remplace l'attribut action du formulaire propriétaire de l'élément.
formenctypeDéfinit le type de contenu utilisé pour soumettre le formulaire au serveur. Les valeurs possibles sont :
Si cet attribut est défini, il remplace l'attribut enctype du formulaire propriétaire de l'élément.
formmethodDéfinit la méthode HTTP que le navigateur utilise pour soumettre le formulaire. Les valeurs possibles sont :
Si défini, cet attribut remplace l'attribut method du formulaire propriétaire de l'élément.
formnovalidateUn attribut booléen définissant que le formulaire ne doit pas être validé lorsqu'il est soumis. Si cet attribut est défini, il remplace l'attribut novalidate du formulaire propriétaire de l'élément.
formtargetUn nom ou un mot-clé indiquant où afficher la réponse reçue après la soumission du formulaire. Il s'agit d'un nom ou d'un mot-clé pour un contexte de navigation (par exemple, un onglet, une fenêtre ou un cadre en ligne). Si cet attribut est défini, il remplace l'attribut target du formulaire propriétaire de l'élément. Les mots-clés suivants ont des significations particulières :
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 (angl.).
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.
Il s'agit des coordonnées X et Y de l'image sur laquelle la souris a cliqué pour envoyer le formulaire, où (0,0) correspond au coin supérieur gauche de l'image et constitue la valeur par défaut si l'envoi a lieu sans clic sur l'image. Ces coordonnées peuvent être utilisées lorsque l'emplacement où l'on a cliqué sur l'image est important, par exemple si vous disposez d'une carte qui, lorsqu'on clique dessus, envoie les coordonnées de l'emplacement cliqué au serveur. Le code côté serveur détermine alors l'emplacement sur lequel l'utilisateur·ice a cliqué et renvoie des informations sur les lieux à proximité.
Dans l'exemple ci-dessus, nous pourrions écrire du code côté serveur qui détermine la couleur sur laquelle l'utilisateur·ice a cliqué à partir des coordonnées transmises, et qui comptabilise les couleurs préférées pour lesquelles les utilisateur·ice·s ont voté.
Vous pouvez utiliser la propriété object-position pour 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.
Voici quelques règles CSS pour améliorer l'apparence des éléments de base :
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.
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.
| Valeur | Aucune — l'attribut value ne devrait pas être renseigné. |
| Évènements | Aucun. |
| Attributs communs pris en charge | alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget |
| Attributs IDL | Aucun. |
| Interface DOM | HTMLInputElement |
| Méthodes | Aucune. |
| Rôle ARIA implicite | button |
| HTML # image-button-state-(type=image) |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 22 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.