<input type="image">
Les éléments <input>
dont l'attribut type
vaut 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.
Exemple interactif
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. |
Valeur
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
.
Attributs supplémentaires
En complément des attributs partagés par l'ensemble des éléments <input>
, les boutons image
prennent en charge les attributs suivants.
alt
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">
alt
se comporte de façon analogue à l'attribut alt
des éléments <img>
.
formaction
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>
.
formenctype
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>
.
formmethod
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'attributaction
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'attributformenctype
ou l'attributenctype
du formulaire. L'URL est alors envoyée au serveur en utilisant une requête HTTPGET
. 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'attributaction
du formulaire en utilisant une requête HTTPPOST
. 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>
.
formnovalidate
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>
.
formtarget
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>
.
height
Un nombre qui indique la hauteur, exprimée en pixels CSS, selon laquelle dessiner l'image indiquée par l'attribut src
.
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">
).
width
Un nombre qui indique la largeur, exprimée en pixels CSS, selon laquelle dessiner l'image indiquée par l'attribut src
.
Attributs obsolètes
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é.
usemap
Utiliser les boutons 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.
Fonctionnalités essentielles des boutons d'image
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
etheight
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.
Surcharger le comportement par défaut du formulaire
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 avecaction
- La valeur de
formenctype
surcharge celle fournie par le formulaire avecenctype
- La valeur de
formmethod
surcharge celle fournie par le formulaire avecmethod
- La valeur de
formnovalidate
surcharge celle fournie par le formulaire avecnovalidate
- La valeur de
formtarget
surcharge celle fournie par le formulaire avectarget
Voir les paragraphes précédents pour le rôle détaillé de chacun de ces attributs.
Utiliser les coordonnées x
et y
du clic sur le bouton
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.
Ajuster la position et l'algorithme de redimensionnement de l'image
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.
Exemples
Un formulaire de connexion
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
Ajuster la position et le redimensionnement de l'image
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.
Spécifications
Specification |
---|
HTML Standard # image-button-state-(type=image) |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- 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
etobject-fit
- Compatibilité des propriétés CSS pour les contrôles de formulaire