Jump to content

How can I change the submit button to an image?


Recommended Posts


I have this basic form submit button on my page, like to register on the db, how do I change the submit button to an image as an alternative?

<form action="index.php" method="post">
<p>First Name: <input type="text" name="first_name" size="20" value="<?php if (isset($_POST['first_name'])) echo $_POST['first_name']; ?>"> 
Last Name: <input type="text" name="last_name" size="20" value="<?php if (isset($_POST['last_name'])) echo $_POST['last_name']; ?>"></p>
<p>Email Address: <input type="text" name="email" size="50" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>"></p>
<p>Password: <input type="password" name="pass1" size="20" value="<?php if (isset($_POST['pass1'])) echo $_POST['pass1']; ?>" >
Confirm Password: <input type="password" name="pass2" size="20" value="<?php if (isset($_POST['pass2'])) echo $_POST['pass2']; ?>"></p>
<p><input type="submit" value="Register"></p>
<a href="login.php"><img src="login.jpg"></a>

So <input type and so on, so like below is a login page and has the image button, I want that for registration.

Thank you.

Link to comment
Share on other sites

The W3Schools description of the <input type="image"> field is incorrect. While it can be used as a submit button that's a very old way of achieving the task. The main purpose of the image field is to send the XY coordinates of the image pixel that was clicked to the server, so it adds additional data to the form's request.

The best way to have an image as a submit button is to use <button type="submit"> and either put an image inside of it or use CSS to set its background image.

<button type="submit"><img src="#" alt=""></button>


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...