IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Placer une image dans value de input type submit


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2016
    Messages
    45
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : Guinée

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

    Informations forums :
    Inscription : Janvier 2016
    Messages : 45
    Points : 36
    Points
    36
    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
    10 235
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 235
    Points : 15 532
    Points
    15 532
    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
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

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

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    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

    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
    Invité
    Invité(e)
    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.

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

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

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    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 : 10577
Taille : 43,3 Ko

    Blog

    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, 12h20
  2. Placer une image dans une Table
    Par faressam dans le forum VBA Access
    Réponses: 6
    Dernier message: 30/04/2008, 18h04
  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, 04h05
  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, 20h23
  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, 21h22

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