1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : Guinée

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2016
    Messages : 28
    Points : 17
    Points
    17

    Par défaut Placer une image dans value de input type submit

    Bonjour,
    j'ai un petit code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    	<input type="submit" value='envoyer'  alt='' >
    Que je veux remplacer par:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 6 582
    Points : 10 519
    Points
    10 519

    Par défaut

    un bouton avec une image peut se faire avec ce code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="image" src="fichier.png" name="clicImage"/>

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 764
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 764
    Points : 21 170
    Points
    21 170
    Billets dans le blog
    39

    Par défaut



    Il faut du code CSS :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 798
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 798
    Points : 21 668
    Points
    21 668

    Par défaut

    Bonjour,

    Les button sont fait pour ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <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 ?
    Le code CSS suffit pour comprendre.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 764
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 764
    Points : 21 170
    Points
    21 170
    Billets dans le blog
    39

    Par défaut

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

    Nom : Valider.PNG
Affichages : 11
Taille : 43,3 Ko

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Placer une image dans une colonne
    Par demcoul dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 5
    Dernier message: 28/06/2010, 13h20
  2. Placer une image dans une Table
    Par faressam dans le forum VBA Access
    Réponses: 6
    Dernier message: 30/04/2008, 19h04
  3. Placer une Image dans une Form
    Par MarcVB6 dans le forum VB 6 et antérieur
    Réponses: 14
    Dernier message: 28/11/2007, 05h05
  4. Placer une image dans une info bulle
    Par koKoTis dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 07/09/2006, 21h23
  5. Placer une image dans un dossier où qu'elle soit
    Par st0nky dans le forum Langage
    Réponses: 2
    Dernier message: 04/12/2005, 22h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo