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!
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.
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.
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

)
pour le logo connexion) ,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=" your username" class="stylish"/><br/>
<input type="submit" value=" sign in" class="stylish"/>
</form>
En CSS:
.stylish {
font-family: georgia, FontAwesome;
}
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 .
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>
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.
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
<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.
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.
:-)
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();
}
Voici un autre exemple:
<button type="submit" name="submit" style="border: none; background-color: white">