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 :

HTML submit utilisant une image comme bouton


Sujet :

HTML

  1. #1
    Membre régulier
    Homme Profil pro
    Responsable Applicatif / Développeur
    Inscrit en
    Mai 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Responsable Applicatif / Développeur

    Informations forums :
    Inscription : Mai 2007
    Messages : 495
    Points : 110
    Points
    110
    Par défaut HTML submit utilisant une image comme bouton
    Bonjour, je dois récupérer la variable entrer dans un champs et l'envoyer dans une page php.
    jusque là tout est normal j'utilise :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <div id="newsletter"> 
    <br>l'actualité
     <form method="post" action="./wanewsletter/subscribe.php"> 
       <input type="text" name="email" maxlength="100" />			
       <input type="hidden" name="format" value="1" /> 	
       <input type="hidden" name="liste" value="1" /> 		
       <input type="submit" name="wanewsletter" value="OK" /> 
      </form> 
    </div>


    Le problème est qu'au départ il y a des images pour le champs de saisie et le boutton ok.
    Comment puis je faire pour mettre ces images dans mes input??

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="newsletter">
     
    		<p>L'actualit&eacute;</p>
    		<span id="champ-mail" type="hidden" ><span>n1</span></span>
    		<a id="ok-btn"><span>n2</span></a>
    		<span id="refletnews"><span>n3</span></span>
     
    	</div>



    J'ai essayé le code suivant pour le bouton oki, mais c'est tourjours un bouton de type submit qui apparait et non l'image:

    <input type="submit" id="ok-btn" class="btn-more-2" value="">

    <input type="submit" id="ok-bt">

  2. #2
    Membre confirmé Avatar de defcon_suny
    Homme Profil pro
    Non pas trop...
    Inscrit en
    Décembre 2006
    Messages
    441
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Non pas trop...
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Décembre 2006
    Messages : 441
    Points : 547
    Points
    547

  3. #3
    Membre régulier
    Homme Profil pro
    Responsable Applicatif / Développeur
    Inscrit en
    Mai 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Responsable Applicatif / Développeur

    Informations forums :
    Inscription : Mai 2007
    Messages : 495
    Points : 110
    Points
    110
    Par défaut
    J'avais déjà fait la recherche sur google, mais je trouve comment mettre une image (ex .jpg dans un input submit).

    Mais là je veux le faire avec l'image qui est dans le span (je veux garder le span).

  4. #4
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Points : 2 589
    Points
    2 589
    Par défaut
    Salut,

    Comment puis je faire pour mettre ces images dans mes input??
    J'ai essayé le code suivant pour le bouton oki, mais c'est tourjours un bouton de type submit qui apparait et non l'image :

    <input type="submit" id="ok-btn" class="btn-more-2" value="">
    <input type="submit" id="ok-bt">
    Si le but est de personnaliser ton bouton, avoir ton code CSS pourrait aider...
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  5. #5
    Inactif   Avatar de Deallyra
    Profil pro
    Étudiant
    Inscrit en
    Février 2007
    Messages
    1 997
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2007
    Messages : 1 997
    Points : 1 769
    Points
    1 769
    Par défaut
    Bonsoir,

    Un input en type image équivaut à un type submit.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="image" src="./monImage.jpg"  name="monImage" alt="validation" />
    *Si la réponse vous convient, n'oubliez pas le tag
    *Exprimez vous dans un français correct; on prend le temps de vous lire, prenez le temps de bien écrire.
    *Et comment on interprète votre code? N'oubliez pas la balise!

    *Pour une mise en page simple avec des divs.
    *Pour faire des formulaires xHTML CSS.

  6. #6
    Membre régulier
    Homme Profil pro
    Responsable Applicatif / Développeur
    Inscrit en
    Mai 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Responsable Applicatif / Développeur

    Informations forums :
    Inscription : Mai 2007
    Messages : 495
    Points : 110
    Points
    110
    Par défaut
    Merci.

    Par contre je voudrais utiliser le CSS.

    mon bouton est ici dans le CSS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    div#sidebar div#newsletter a#ok-btn{
    display: block;
    float: left;
    background: transparent url(img/ok.gif) no-repeat left top;
    margin: 0 0 6px 16px; 
    padding: 5px 0 5px 8px;
    Comment je fais pour le mettre dans mon input en utilisant le css et sans mettre le chemin du gif absolu?

  7. #7
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Citation Envoyé par diabli73 Voir le message
    Par contre je voudrais utiliser le CSS.
    Y a-t-il un intérêt particulier de détourner l'utilisation d'un bouton plutôt que d'utiliser un élément qui existe et dont c'est la fonction, comme le souligne Deallyra ?

  8. #8
    Membre émérite Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Points : 2 953
    Points
    2 953
    Les Cours et tutoriels JavaScript
    Penser à la recherche et au bouton

  9. #9
    Membre régulier
    Homme Profil pro
    Responsable Applicatif / Développeur
    Inscrit en
    Mai 2007
    Messages
    495
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Responsable Applicatif / Développeur

    Informations forums :
    Inscription : Mai 2007
    Messages : 495
    Points : 110
    Points
    110
    Par défaut
    J'ai mis le chemin absolu de l'image, mais évidemmant la présentation est décalé vu que je n'utilise pas le css.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="newsletter">
     
    		<p>L'actualit&eacute; </p>
    		<form method="post" action="./wanewsletter/subscribe.php">
    			<span id="champ-mail" type="text" ><span>n1</span></span>
    				<input type="image" src="http://cheminabsolu.gif"  name="sidebar-btn-ok" alt="ok" /><span>n2</span>
     
    			<span id="refletnews"><span>n3</span></span>
    		</form>
     
    	</div>
    Avant j'avais <a id="ok-btn" ><span>n2</span></a> et la présentation était parfaite mais maintenant que j'utilise le input type="image" tout est décalé.
    donc je voudrais si possible utiliser le <a id="ok-btn" > dans mon input.

  10. #10
    Membre actif
    Inscrit en
    Mars 2004
    Messages
    290
    Détails du profil
    Informations forums :
    Inscription : Mars 2004
    Messages : 290
    Points : 217
    Points
    217
    Par défaut
    Bonsoir,

    tu peux mettre <<<onClick="javascript:this.submit()">>> sur l'élément que tu désires, enfin du moment que cet élément se situe dans ton form.

    Dis nous si c'est ce que tu voulais réellement.

  11. #11
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Points : 3 747
    Points
    3 747
    Par défaut
    Citation Envoyé par diabli73 Voir le message
    Avant j'avais <a id="ok-btn" ><span>n2</span></a> et la présentation était parfaite mais maintenant que j'utilise le input type="image" tout est décalé.
    donc je voudrais si possible utiliser le <a id="ok-btn" > dans mon input.
    Rien de compliquer, dans ton css tu remplace a#ok-btn par input#ok-btn et tu enlève le background: transparent url(img/ok.gif) no-repeat left top; et display:block ...

    [EDIT] : Mais pourquoi autant d'héritage : div#sidebar div#newsletter a#ok-btn ???
    Une Id est sensé être unique !
    Je ne réponds pas aux questions techniques par MP.

Discussions similaires

  1. [AC-2007] Utiliser une image comme bouton dans un USF
    Par c.piette dans le forum VBA Access
    Réponses: 7
    Dernier message: 07/03/2015, 08h22
  2. utiliser une image comme fond d'une interface graphique
    Par élève_ingénieur dans le forum Interfaces Graphiques en Java
    Réponses: 3
    Dernier message: 01/12/2009, 21h28
  3. Réponses: 2
    Dernier message: 26/07/2007, 14h43
  4. comment utiliser une icone comme bouton
    Par othmane126 dans le forum VB 6 et antérieur
    Réponses: 1
    Dernier message: 04/10/2006, 19h14
  5. Utiliser une Etiquette comme bouton
    Par pschmidtke dans le forum IHM
    Réponses: 6
    Dernier message: 07/06/2006, 14h48

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