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

Question

J'aimerais avoir un bouton d'envoi contenant le texte et une image. Est-ce possible?

Je peux obtenir exactement le look 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. Est-il possible de faire cela avec un

<input type="submit" ...> 

élément? Ou suis-je obligé de suivre la image ou le texte ? Merci pour votre aide!

Answer 1

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 button élément ( 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.

Answer 2

Supposons que votre image est une icône .png au format 16x16 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>

Ceci placera l'image à gauche du texte.

Answer 3

Si les polices dingbats / icon sont une option, vous pouvez les utiliser à la place des images.

Ce qui suit utilise une combinaison de

• une police de caractères (par exemple, Police Awesome) ,
• encodage de caractères en HTML (p. ex. &#xf090)
• le point de code Unicode de l'icône que vous souhaitez utiliser (par exemple font-family pour le signe logo) ,
• CSS:

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 georgia spécification: tous les caractères / points de code utiliseront FontAwesome et retomberont sur <=> pour tous les points de code <=> ne fournissant pas de caractères. <=> ne fournit aucun caractère dans la utilisation privée , exactement là où <=> a placé ses icônes .

Answer 4

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>

Answer 5

J'ai trouvé une solution très simple! 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 dirigez-le simplement vers un lien d'une page.

Answer 6

<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 souhaité.

J'espère que cela vous a été utile.

Answer 7

Veuillez vous 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

Answer 8

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 vous aidera également, vous et moi.

: -)

Answer 9

Vous pouvez faire ceci:

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 les actions et méthodes de votre choix, votre identifiant et tout texte commençant par href = " javascript: et se terminant par () " mais assurez-vous que lorsque je tape les mêmes choses, telles que id et du texte, vous saisissez votre remplacement aux mêmes endroits (script java et code HTML).

code de script Java:

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

Answer 10

Voici un autre exemple:

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