HTML5 input type does not submit name for images

I had some very simple code that worked well in the Chrome web browser, but it did not however work with Internet Explorer or Firefox and didn’t generate any errors. The functionality was simply to pass a parameter (in this case ‘auth’) to a PHP page; once on the page I am simply checking that it is set. I was attempting to do this by attaching the parameter to the image input type but was having no joy. Rather than look at alternative options, this made me curious so I went searching.

After a bit of digging, I found that the HTML5 spec requires just the x and y coordinates clicked on for the image to be appended to the form data submitted. After realising this, I changed from using the name/value attributes on on the image input type to using a hidden field and all browsers were happy.

In terms of my very simple HTML code, to make it work.

Before:

      <form action="index.php" method="post">
          <input type="image" src="img/sign-in-with-twitter-l.png"
                 alt="Connect to Twitter" name="auth" value="1">
      </form>

After:

      <form action="index.php" method="post">
          <input type="image" src="img/sign-in-with-twitter-l.png"
                 alt="Connect to Twitter">
          <input type="hidden" name="auth">
      </form>

For completeness, in terms of how I check the field is being passed through:

if(isset($_POST['auth'])) {…}

Thanks to http://www.onenaught.com/posts/382/firefox-4-change-input-type-image-only-submits-x-and-y-not-name for pointing me in the right direction.