Placer une image dans value de input type submit

Version imprimable

10/01/2018, 22h47
mohamed lamine 1996

Placer une image dans value de input type submit

Bonjour,
j'ai un petit code:

Code:

<input type="submit" value='envoyer' alt='' >

Que je veux remplacer par:

Code:

<input type="submit" value='<img src="25.gif" alt="" />' />

Dans ce code je veux mettre une image à la place de 'envoyer' sur laquelle on doit cliquer pour soumettre le formulaire.
Mais ça fonctionne pas et l'image ne sort pas.
Je sais pas si c'est possible ou si j'ai pas bien fait, je sais pas.

Vous pouvez m'aider à placer une image comme valeur de la proprété value ?

Merci.
10/01/2018, 23h14
mathieu

un bouton avec une image peut se faire avec ce code :

Code:

<input type="image" src="fichier.png" name="clicImage"/>

:salut:

Il faut du code CSS :

Code:

1
2
3
4
5
6
7
8
		#monForm > input[type="submit"] {
			width: 10rem;
			height: 10rem;
			background-image: url(https://i.imgur.com/CeJU3mO.png);
			background-repeat: no-repeat;
			color: red;
			font-size: 2rem;
		}

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                #monForm > input[type="submit"] {
                        width: 10rem;
                        height: 10rem;
                        background-image: url(https://i.imgur.com/CeJU3mO.png);
                        background-repeat: no-repeat;
                        color: red;
                        font-size: 2rem;
                }
 
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        document.querySelector( "#monForm" ).addEventListener( "submit", ev => {
                                ev.stopPropagation();
                                ev.preventDefault();
                                
                                console.log( "La soumission du formulaire est bloquée" );
                        }, false );
 
                        // fin code du test
                        
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<form id="monForm">
			<input type="submit">
		</form>
 
	</main>
</body>
</html>

11/01/2018, 08h30
Invité

Bonjour,

:roll: Les button sont fait pour ça :

Code:

<button type="submit" name="btnEnvoiForm" title="Envoyer"><img src="25.gif" alt="" /></button>

L'image peut aussi être mise en background (c'est même mieux si ce n'est qu'une "icône illustrative")

@danielhagnoul
En quoi les scripts et code JS de ton exemple sont pertinents ici ? :koi:
Le code CSS suffit pour comprendre.
15/01/2018, 21h34
danielhagnoul

1 pièce(s) jointe(s)

@jreaux62 : À mon humble avis, un exemple fonctionnel est toujours plus parlant. Les codes HTML, CSS, JS, l'interaction entre ces codes et l'aspect de la page web sont des informations complémentaires utiles, surtout pour un débutant.

Pièce jointe 342808