#1
  1. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,281
    Rep Power
    13

    Question Adding an image within a sumbit element?


    Hello,

    how can i add an image to an HTML Sumbit Input Type?

    <input type="submit" name="mailform" value="Αποστολή!">

    and tis is the image:

    <img src="/data/images/submit.jpg">
    What is now proved was once only imagined!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    using an image as a submit button in a form


    this LINK gives some basic examples.
  4. #3
  5. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,281
    Rep Power
    13
    Please help i have managed to switch the grey default image to a gif i want

    Code:
    <input type="image" src="/data/images/submit.gif" name="seek" value="Βρές!">
    but somehow when i click it just doesnt work as a normal button, meaning liek this:

    <input type="submit" name="mailform" value="Αποστολή!">
    What is now proved was once only imagined!
  6. #4
  7. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,281
    Rep Power
    13
    Is there something wrong with this code and the image button doesn't work as the input submit type grey button did?

    Code:
    	<form method="post" action="/cgi-bin/pelatologio.py">
    		<tr>
    				<td> <center>	<input type="text"	name="task"		size=50>			</td>
    				<td> <center>	<input type="text"	name="price"	size=5>				</td>
    				<td> <center>	<input type="text"	name="lastvisit">					</td>
    			</table><br>
    			<td>	<input type="image" src="/data/images/submit.gif" name="update">	</td>
    			<td>	<input type="hidden" name="name" value="%s">						</td>
    		</tr>
    	</form>
    What is now proved was once only imagined!
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    You can't use
    Code:
    <input type="image">
    unless you assign a click event to that input field using javascript/jquery (in which case you would need to add an id or class to the input field to reference from your click event handler).

    If you want to replace the normal submit button with an image, your best way is to use CSS (which you should be using for all layout and styling in your web pages anyway), something like
    HTML:
    Code:
    <input type="submit" name="mailform" value="Αποστολή!" class="mailform-button">
    CSS
    Code:
    .mailform-button {
        background-image:url(/data/images/submit.jpg);
        width: /* Replace this with required width to match image */;
        height: /* Replace this with required height to match image */;
    }

IMN logo majestic logo threadwatch logo seochat tools logo