Attribut src de input type image – Bouton d'envoi personnalisé en HTML5

À quoi sert l'attribut src sur un input ?

LES BALISES HTML

Par défaut, un bouton de soumission de formulaire affiche le texte « Envoyer » — fonctionnel, mais visuellement limité. L'attribut src permet de le remplacer par une image de votre choix, en l'associant à <input type="image">.

L'attribut src reçoit l'URL de l'image à afficher. Il se comporte exactement comme le src d'une balise <img> — chemin relatif ou URL absolue, les deux fonctionnent.

Important : L'attribut src n'a de sens que sur <input type="image">. Sur tout autre type d'input, il est ignoré par le navigateur. Pensez également à toujours ajouter un attribut alt pour l'accessibilité.

Syntaxe :

Valeurs acceptées par src

Valeur	Description
URL absolue	Pointe vers une image hébergée sur un autre domaine. Exemple : `src="https://www.example.com/envoyer.png"`
URL relative	Pointe vers un fichier dans le dossier du projet. Exemple : `src="images/envoyer.png"`

Exemple : remplacer le bouton Envoyer par une image

Dans cet exemple, au lieu d'un bouton classique, le formulaire affiche une image cliquable. Quand l'utilisateur clique dessus, le formulaire s'envoie — comme avec un type="submit" ordinaire.

📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Bouton image HTML5</title>
</head>
<body>

<form action="traitement.php" method="post">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom"><br><br>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email"><br><br>

  <!-- src indique l'image à afficher à la place du bouton Envoyer -->
  <input type="image"
         src="images/envoyer.png"
         alt="Envoyer le formulaire"
         width="48"
         height="48">
</form>

</body>
</html>

Exemple : URL absolue vers une image externe

Si l'image est hébergée sur un autre serveur, utilisez son adresse complète :

📋 Copier le code

<!-- URL absolue : l'image est chargée depuis un domaine externe -->
<input type="image"
       src="https://www.example.com/images/envoyer.png"
       alt="Soumettre"
       width="48"
       height="48">

Support navigateur

L'attribut src sur <input type="image"> est pris en charge par tous les navigateurs modernes sans exception : Chrome, Firefox, Edge et Safari. Aucune précaution de compatibilité n'est nécessaire en 2026.

HTML 4.01 vs HTML5

L'attribut src existait déjà en HTML 4.01. HTML5 n'y a apporté aucune modification — le comportement est identique dans les deux versions.

Retour à l'accueil du site