How to Make My <Input Type="Submit" /> an Image

How can I make my input type=submit / an image?

input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}

How do I use an image as a submit button?

Use an image type input:

<input type="image" src="/Button1.jpg" border="0" alt="Submit" />

---

The full HTML:

<form id='formName' name='formName' onsubmit='redirect();return false;'>  <div class="style7">    <input type='text' id='userInput' name='userInput' value=''>    <input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />  </div></form> 

Input Type image submit form value?

An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.

button image as form input submit button?

You could use an image submit button:

<input type="image" src="images/login.jpg" alt="Submit Form" />

How to change an input button image using CSS

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

How to edit the size of the submit button on a form?

Using CSS you can set a style for that specific button using the id (#) selector:

#search {
    width: 20em;  height: 2em;
}

or if you want all submit buttons to be a particular size:

input[type=submit] {
    width: 20em;  height: 2em;
}

or if you want certain classes of button to be a particular style you can use CSS classes:

<input type="submit" id="search" value="Search" class="search" />

and

input.search {
    width: 20em;  height: 2em;
}

I use ems as the measurement unit because they tend to scale better.

Input type image doesn't submit the form when you hit enter

Your form needs an action attribute, referring to the script which will process the results - for example:

<form id="myform" action="./myform.php">
    <!-- the rest of your form -->
</form>

Without an action attribute, the form cannot be submitted as the browser doesn't know where to submit it to.

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

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.

---

Related Topics