CODEWITHSUNDEEP
htmlimagebuttoninputsubmit
David
David

Reputation: 551

How to make a submit button with text + image in it?

I would like to have a submit button that contains text and an image. Is this possible?

I can get the exact look I want with code that looks like:

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

... but I haven't found a way to have one of those for my forms. Is there a way to do that with an

<input type="submit" ...>

element? Or am I forced to go the image or text way?

Upvotes: 40

Views: 256478

Answers (10)

Igor Lebedev
Igor Lebedev

Reputation: 33

With svg:

input#image-button {
  background: url( "data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M10 10h123v123H10z'/%3E%3C/svg%3E" ) no-repeat  5px /* image padding */;
padding-left: 16px; /* select the indentation to the text */
}

Image position adjustment

SVG-encoder

Upvotes: 0

Abdi
Abdi

Reputation: 294

Here is an other example:

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

Upvotes: 1

Supermath101
Supermath101

Reputation: 427

You can do this:

HTML code:

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

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();       
    }

Upvotes: 1

Abdull
Abdull

Reputation: 27862

In case dingbats/icon fonts are an option, you can use them instead of images.

The following uses a combination of

In 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>

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.

Upvotes: 11

Adam Bard
Adam Bard

Reputation: 1713

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:

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

This will put the image to the left of the text.

Upvotes: 63

LucaSpeedStack
LucaSpeedStack

Reputation: 511

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:

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

Or just direct it to a link of a page.

Upvotes: 5

Abdallah Barghouti
Abdallah Barghouti

Reputation: 93

<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;" />

Change input style elements as you want to get the button you need.

I hope it was helpful.

Upvotes: 2

MoJo
MoJo

Reputation: 19

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.

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

Maybe this will help you and me as well.

:-)

Upvotes: 1

elzapp
elzapp

Reputation: 1991

You're really close to the answer yourself

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

Or, you can just remove the type-attribute

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

Upvotes: 11

adrianbanks
adrianbanks

Reputation: 83004

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 <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

Upvotes: 30

Related Questions