HTML How to make a submit button with text image in it

Question

I would like to have a submit button which contains text and an image  Is this possible   I can get the exact look I want with code that looks like    lt button type  button  gt   lt img src  save gif  alt  Save icon   gt   lt br  gt  Save  lt  button gt        but I haven t found a way to have one of those for my forms  Is there a way to do that with an    lt input type  submit      gt     element  Or am I forced to go the image or text way   Thanks for your help

User · Accepted Answer

input type  submit  is the best way to have a submit button in a form  The downside of this is that you cannot put anything other than text as its value  The button element can contain other HTML elements and content   Try putting type  submit  instead of type  button  in your button element  source    Pay particular attention however to the following from that page      If you use the button element in an HTML form  different browsers will submit different values  Internet Explorer will submit the text between the  lt button gt  and  lt  button gt  tags  while other browsers will submit the content of the value attribute  Use the input element to create buttons in an HTML form

User · Answer

I have found a very easy solution  If you have a form and you want to have a custom submit button you can use some code like this    lt button type  submit  gt       lt img src  login png  onmouseover  this src  login2 png    onmouseout  this src  login png      gt   lt  button gt    Or just direct it to a link of a page

User · Answer

Here is an other example    lt button type  submit  name  submit  style  border  none  background-color  white  gt

User · Answer

You can do this   HTML code        lt form action  submit php  method  get  id  form  gt               lt a href  javascript  submitForm    gt               lt img src  save gif  alt  Save icon   gt               lt br  gt              save              lt  a gt               lt  form gt            note  you can use and action and method of your choice and Id and any text starting from href  javascript  and ending to     but make sure that when I type the same things such as id and some text you type in your replacement in the same places java script and HTML code    java script code       var form document getElementById  form                function submitForm                             form submit

User · Answer

Very interesting  I have been able to get my form to work but the resulting email displays   imageField x  80 imageField y  17  at the bottom of the email that I get   Here s my code for the buttons        lt tr gt         lt td gt  lt input type  image  src  images sendmessage gif     gt  lt  td gt         lt td colspan  2  gt  lt input type  image  src  images printmessage gif onclick  window print    gt  lt  td gt       lt  tr gt    Maybe this will help you and me as well    -

User · Answer

In case dingbats icon fonts are an option  you can use them instead of images   The following uses a combination of   an icon font  e g  Font Awesome     character encodings in HTML  e g   amp  xf090  the Unicode code point of the icon you want to use  e g   amp  xf090 for the sign in logo   CSS    In HTML      lt link href    netdna bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined no-icons min css  rel  stylesheet  gt   lt link href    netdna bootstrapcdn com font-awesome 3 2 1 css font-awesome css  rel  stylesheet  gt    lt form name  signin  action     method  POST  gt       lt input type  text  name  text-input  placeholder   amp  xf183  your username  class  stylish   gt  lt br  gt       lt input type  submit  value   amp  xf090  sign in  class  stylish   gt   lt  form gt    In CSS      stylish       font-family  georgia  FontAwesome      jsFiddle  Notice the font-family specification  all characters code points will use georgia  falling back to FontAwesome for any code points georgia doesn t provide characters for  georgia doesn t provide  any characters in the private use range  exactly where FontAwesome has placed its icons

User · Answer

Please refer to this link  You can have any button you want just use javascript to submit the form  http   www w3schools com jsref met form submit asp

User · Answer

Let s say your image is a 16x16  png icon called icon png  Use the power of CSS   CSS   input image-button      background   ccc url  icon png   no-repeat top left      padding-left  16px      height  16px      HTML    lt input type  submit  id  image-button  value  Text  gt  lt  input gt    This will put the image to the left of the text

User · Answer

lt 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     gt   Change input style elements as you want to get the button you need   I hope it was helpful

User · Answer

You re really close to the answer yourself   lt button type  submit  gt   lt img src  save gif  alt  Save icon   gt   lt br  gt  Save  lt  button gt    Or  you can just remove the type-attribute   lt button gt   lt img src  save gif  alt  Save icon   gt   lt br  gt  Save  lt  button gt

[html] HTML: How to make a submit button with text + image in it?

Examples related to html

Examples related to image

Examples related to button

Examples related to input

Examples related to submit