web-dev-qa-db-fra.com

HTML: Comment créer un bouton d'envoi avec du texte + une image?

Je voudrais avoir un bouton de soumission qui contient du texte et une image. Est-ce possible?

Je peux obtenir le look exact que je veux avec un code qui ressemble à:

<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

... mais je n'ai pas trouvé le moyen d'en avoir un pour mes formulaires ... 

<input type="submit" ...>

élément? Ou est-ce que je suis obligé d'aller à la image ou texte façon? Merci de votre aide!

htmlimagebuttoninputsubmit
33
David

input type="submit" est le meilleur moyen d’avoir un bouton de soumission dans un formulaire. L'inconvénient est que vous ne pouvez pas utiliser autre chose que du texte. L'élément button peut contenir d'autres éléments HTML et du contenu.

Essayez de mettre type="submit" au lieu de type="button" dans votre élément button ( source ).

Portez une attention particulière aux éléments suivants de cette page:

Si vous utilisez l'élément button dans un formulaire HTML, différents navigateurs soumettront des valeurs différentes. Internet Explorer soumettra le texte entre les balises <button> et </button> tandis que les autres navigateurs soumettront le contenu de l'attribut value. Utilisez l'élément input pour créer des boutons dans un formulaire HTML.

27
adrianbanks

Supposons que votre image est une icône 16x16 .png appelée icon.png Utilisez la puissance de CSS!

CSS:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

HTML:

<input type="submit" id="image-button" value="Text"></input>

Cela mettra l'image à gauche du texte.

57
Adam Bard

Dans le cas où dingbats/icon fonts sont une option, vous pouvez les utiliser à la place des images.

Ce qui suit utilise une combinaison de

En HTML: 

<link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<form name="signin" action="#" method="POST">
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>

En CSS: 

.stylish {
    font-family: georgia, FontAwesome;
}

jsFiddle

Notez la spécification font-family: tous les caractères/points de code utiliseront georgia, retombant à FontAwesome pour tous les points de code que georgia ne fournit pas de caractères. georgia ne fournit aucun caractère dans le usage privé range , exactement où FontAwesome a placé ses icônes .

11
Abdull

Vous êtes très proche de la réponse vous-même

<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

Ou, vous pouvez simplement supprimer l'attribut type

<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
8
elzapp

J'ai trouvé une solution très facile! Si vous avez un formulaire et que vous voulez avoir un bouton de soumission personnalisé, vous pouvez utiliser un code comme celui-ci:

<button type="submit">
    <img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>

Ou simplement dirigez-le vers un lien d'une page.

4
LucaSpeedStack

S'il vous plaît se référer à ce lien. Vous pouvez avoir n'importe quel bouton que vous utilisez simplement javascript pour soumettre le formulaire

http://www.w3schools.com/jsref/met_form_submit.asp

2
user1363516

<input type="button" id="btnTexWrapped" style="background:url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />

Modifiez les éléments de style de saisie à l’aide du bouton dont vous avez besoin.

J'espère que c'était utile.

2
Abdallah Barghouti

Très intéressant ... j'ai pu faire fonctionner mon formulaire, mais le courrier électronique résultant s'affiche:

imageField_x: 80 imageField_y: 17

au bas de l'email que je reçois.

Voici mon code pour les boutons.

    <tr>
      <td><input type="image" src="images/sendmessage.gif" / ></td>
      <td colspan="2"><input type="image" src="images/printmessage.gif"onclick="window.print()"></td>
    </tr>

Peut-être que cela va vous aider et moi aussi.

:-)

1
MoJo

Tu peux le faire:

Code HTML:

    <form action="submit.php" method="get" id="form">        
    <a href="javascript: submitForm()">        
    <img src="save.gif" alt="Save icon"/>        
    <br/>        
    save        
    </a>        
    </form>

remarque: vous pouvez utiliser l'action et la méthode de votre choix, ainsi que tout texte commençant par href = "javascript: et se terminant par ()" remplacement aux mêmes endroits (script Java et code HTML).

Code de script Java:

    var form=document.getElementById("form");        
    function submitForm()        
    {        
    form.submit();       
    }
1
user2921779

Voici un autre exemple:

<button type="submit" name="submit" style="border: none; background-color: white">

0
Abdi