1

I want to use an image as a submit button for a form:

<!DOCTYPE html>
<html>
<body>
  <form action="/cgi-bin/script.cgi" method="GET">
    <input type="hidden" name="status" value="ok">
    <input type="image" src="/images/button.png">
  </form> 
</body>
</html>

The HTML above will result in a clickable image, but also a regular submit button right next to the image with the text http://127.0.0.1:80/cgi-bin/script.cgi.

I only want the image the be shown. What am I doing wrong?

EDIT:

This will work if CSS is enabled: https://stackoverflow.com/a/1193338/5185801

Community
  • 1
  • 1
user5185801
  • 13
  • 3

1 Answers1

-2

Close <input> tags properly like 

<form action="/cgi-bin/script.cgi" method="GET">
    <input type="hidden" name="status" value="ok" />
    <input type="image" src="/images/button.png" />
</form>

I don't see any problem.

Check out this fiddle.

Here is the snippet.

<body>
  <form action="/cgi-bin/script.cgi" method="GET">
    <input type="hidden" name="status" value="ok" />
    <input type="image" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6" />
  </form>
</body>
Shrinivas Shukla
  • 4,325
  • 2
  • 21
  • 33
  • That's weird. If i just save the HTML in a file and open it directly in the browser it works fine like your example, but if the same HTML it is transferred to the web server and the page is loaded, then the extra button shows up. – user5185801 Aug 03 '15 at 13:42
  • could it be you have some "prettifier" plugin loaded? Is it WP or such? – mplungjan Aug 03 '15 at 13:46
  • @mplungjan I'm using the Busybox httpd server, it's a very simple web server for embedded devices. It's has no support for plugins, so that should not be the problem. – user5185801 Aug 03 '15 at 13:52
  • If you are able to see an extra button, then there must be `HTML` code for that button. See if you can find any extra code than what you typed. – Shrinivas Shukla Aug 03 '15 at 13:56
  • The screenshot shows the `source-code` of the page. That is obviously not going to change.What I meant is use developer options provided by the browser to see whether any extra code is added. It might also be the problem of that version of Firefox on the OS you are working on. `` also works as a submit button, may be that's why Firefox is adding the extra button by itself. – Shrinivas Shukla Aug 03 '15 at 14:44
  • @Shrinivas Shukla Ah sorry. I'm normally not working with web development. You are right, this is added by Firefox ``. I found out that the button will not show up if Javascript is enabled, but the app should work without, so I'm developing with JS disabled. Do you think that it's possible to avoid the extra button without enabling JS? – user5185801 Aug 03 '15 at 14:58
  • 1
    As of HTML5 (which is being used, according to the doctype) `` and other single-tag elements need not be self-closed. – SeinopSys Aug 03 '15 at 15:02
  • If the browser doesn't allow, then it won't be possible to avoid the extra button without enabling JS. – Shrinivas Shukla Aug 03 '15 at 15:02
  • @DJDavid98 A lot of IDEs don't format the code properly if the tags are **NOT** closed. That's why I prefer closing **ALL** tags. Also, there's nothing bad in closing the tags even if there's NO need. – Shrinivas Shukla Aug 03 '15 at 15:06