SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)

    Browsers dropping support for input type="image"?

    I was making a form today with a submit input of type="image". But rather than submit the form, the page just kept refreshing in Firefox, though it would submit in Safari and Chrome.

    Then I read (here, for example), the FF version 4 and up, as well as Opera and IE, don't submit forms with this any more. Huh? Why?

    do not send name/value for input type=”image”; only .x and .y coordinates are sent.
    And what are x and y coordinates?

    I don't get why they'd drop support for such a straightforward form submit option. Won't that break a lot of forms?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That quote isn't saying that the support is dropped - it is identifying what gets passed to the server when the image is clicked - the x and y coordinates of the spot within the image where the mouse was clicked or 0,0 if the enter key was pressed.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,067
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    I've never understood that x and y options for image buttons; and if I'm not mistaken firefox 3 (or 4) doesn't send x and y at all (and breaking all sites that relied on it); making the behavior even less predictable.

    Since then I always use a submit button instead of an image button

    Code css:
    input[type="submit"] { 
      border: 0;
      background: url(../img/path/to/my/image.png) no-repeat;
      height: 20px;
      width: 100px;
      text-indent: -999em;
      text-transform: capitalize; /* fix text-indent for IE7 */
    }

    Something like that. Has the added benefit that there is actual text on the button as well (think screen readers and SEs).
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    I've never understood that x and y options for image buttons.
    I suspect that the original intended purpose for image buttons whas something that no one actually uses - presumably they are intended for use in situations where it supposedly makes a difference where you click on the image - perhaps they were intended as a replacement for imagemaps.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I had never actually used input type="image" until yesterday, but it seemed to work best for the situation. I was disappointed that it didn't send the form in some browsers. Anyhow, I used a button instead, but it was harder to style.

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,067
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Yes, <button> has it's own problems ...
    Don't forget to set it's type to "submit", otherwise legacy IE won't submit the form when you click it

    HTML Code:
    <button></button> <!-- submits correctly in modern browser, not in legacy IE -->
    <button type="submit"><button> <!-- submits correctly in all browsers -->
    See button (HTML element)
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Don't forget to set it's type to "submit"
    Yes, thanks, I'm using that. I've used <button> before with no probs, although I had to do a bit more styling to make it work nicely with an image than was needed with input type="image", so I was disappointed to see that type="image" is basically off the shelf (from what I can gather).

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    They were supposed to send those X, Y coordinates to a server (similar to a server-side image map) but obviously the major problem would be; it relied upon a pointing device, so it goes out of the window, hence why BUTTON should be used. Plus the idiotic fact it [type=image] doesn't have a mandatory ALT attribute!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    They were supposed to send those X, Y coordinates to a server ...
    What coordinates, though, and to what end?

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Pixel coordinates obviously, as with an server-side imagemap and it's up to the server-side program to choose the function for those values. "http://www.example.com/cgi-bin/form?10,20" Obviously with a keyboard it's going to be; 0,0 anyway totally defeating the whole object in most cases hence use BUTTON.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •