SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Using Image for Submit Button

    Is it okay to use an image for a "Submit" button on a form?

    If so, how do I do it so this code still works...

    Code HTML4Strict:
    // *****************************************************
    // HANDLE FORM.
    // *****************************************************
    if (isset($_POST['submitted'])){

    Thanks,



    Debbie

  2. #2
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Does this look correct...

    Code:
    <!-- Submit Form -->
    <fieldset id="submit">
    	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" value="Place Order" />
    	<input name="submitted" type="hidden" value="true" />
    </fieldset>
    If so, do I need the last part...

    Code HTML4Strict:
     value="Place Order" />

    Thanks,


    Debbie

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The text of an input type="image" is actually an alt, like an image.

    <input type="image" src="path/to/image.png" alt="Place Order" />


    Value would be correct for a type="submit", but not type="image".

    You do need the alt: you have no guarantees that any particular user has loaded that image, or can see it (the usual).

    http://www.w3.org/TR/html401/interact/forms.html#h-17.4

  4. #4
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Does this look correct...

    Code:
    <!-- Submit Form -->
    <fieldset id="submit">
    	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" value="Place Order" />
    	<input name="submitted" type="hidden" value="true" />
    </fieldset>
    What's the purpose of the hidden input? In your example it will always be "true" so I'm not sure what you were trying to accomplish.

    The image submit button is a bit weird in that it doesn't need the "value" attribute. You can use it but its support in browsers is inconsistent. In your example Firefox would send the "submit" variable with the value "Place Order" but IE would not so you can't rely on that.

    However, every browser will send mouse position for the clicked image button. If your button's name is "submit" then browsers will send these variables to the server:

    submit.x = 0
    submit.y = 0

    Of course, the zeroes will be substituted with actual coordinates. What you need to bear in mind is that php will convert . to _ in $_POST keys so in fact you will get these:

    submit_x = 0
    submit_y = 0

    So using this information you can use many image submit buttons with different names and create php code that will recognize which button was pressed. It's a bit convoluted but can be done - you have to loop over all $_POST variables with foreach() and detect the presence of keys having the names of your input elements suffixed by either _x or _y.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Not everyone selects submit buttons with a mouse.

  6. #6
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Not everyone selects submit buttons with a mouse.
    Doesn't matter. You still get mouse coordinates of x=0 and y=0.

  7. #7
    SitePoint Enthusiast Acmeous's Avatar
    Join Date
    Oct 2008
    Location
    Kolkata, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Does this look correct...

    Code:
    <!-- Submit Form -->
    <fieldset id="submit">
    	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" value="Place Order" />
    	<input name="submitted" type="hidden" value="true" />
    </fieldset>
    If so, do I need the last part...

    Code HTML4Strict:
     value="Place Order" />

    Thanks,


    Debbie
    Yes, absolutely. This helps you show proper elements when pages are rendered with images or css.
    You can get around this by putting the following in the css -

    HTML Code:
    text-indent: -9999px;

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Uhm... minor nitpick -- input[image] doesn't use value for images off degradation, it uses ALT just like IMG does. Using 'value' doesn't do anything useful -- well, except for submitting that value under the 'name' (if any).

    INPUT - Form Input

    ... and I quote:

    VALUE=CDATA (value of input)

    ALT=CDATA (alternate text for image input)

    Generally unless there are going to be multiple submits, there is no reason to put value on one. Just like there's no legitimate reason to put NAME on a FORM or TITLE on a IMG.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Am I only coming through in waves? My lips move, but you can't hear what I'm saying?

    there is no pain, I am receding... a distant ship-smoke on the horizon...

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Am I only coming through in waves? My lips move, but you can't hear what I'm saying?
    I think I glossed over your post for two reasons...

    1) TSDR -- too short didn't read. I've got a NASTY case of that lately. (the opposite of 99% of the world)

    2) You posted an img tag, instead of code actually related to the solution.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    2) You posted an img tag, instead of code actually related to the solution.
    wut?
    Quote Originally Posted by stupid
    The text of an input type="image" is actually an alt, like an image.

    <input type="image" src="path/to/image.png" alt="Place Order" />


    Value would be correct for a type="submit", but not type="image".

    You do need the alt: you have no guarantees that any particular user has loaded that image, or can see it (the usual).

    Forms in HTML documents
    I dun't see no images there. Teh Debster's definitely got an input type=image right??

    TSDR -- too short didn't read.
    I can add some obfuscatory loquacious bloat to my posts if you want: that's always fun, esp after some whisky.

  12. #12
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I can add some obfuscatory loquacious bloat to my posts if you want....
    Why not just cut and paste portions of someone else's posts? It could become the sitepoint equivalent of "lorem ipsum...."

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Cause that's not cool, that's plagarism. I can bloat with the best of them. Esp when I'm full of alcohol. Just exploded some keyboard diahrrea over at design-something.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could also use a normal submit button and then use an image replacement technique so that images/off/on css off/on still works.

    (I think Jason also had a similar version of this when we discussed this before.)

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Lots of opinions and directions...

    Sounds like this is a good mix??

    Code HTML4Strict:
    <!-- Submit Form -->
    <fieldset id="submit">
    	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" alt="Place Order" />
    	<input name="submitted" type="hidden" value="true" />
    </fieldset>

    BTW, thanks for the code Paul, but I like to avoid JavaScript and also prefer my JPEG button.

    Thanks,


    Debbie

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    (I think Jason also had a similar version of this when we discussed this before.)
    I was using a wrapper, overflow:hidden on the wrapper, and a double-tall input[image] I was sliding around. The approach you posted uses text-indent on the input, something I would never do.

    I thought when we were talking hovers on inputs before we had come up with a technique that used input's tendency to behave as if it's on top regardless of how it's rendering to our advantage, but for the life of me I can't remember how that worked.

  17. #17
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Sounds like this is a good mix??

    Code HTML4Strict:
    <!-- Submit Form -->
    <fieldset id="submit">
    	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" alt="Place Order" />
    	<input name="submitted" type="hidden" value="true" />
    </fieldset>
    This mix will work very well. The only thing is that no mix is necessary because:

    1. The hidden field is redundant.
    2. Unless you plan to have multiple submit buttons, the name attribute on the button is also redundant.
    3. I would suggest not using the same "submit" value for the id on fieldset and name on the input. It's not technically wrong but I've had cases when IE had problems with it. You may not experience them in your case but it's better to stay away from such solutions just to be safe.

    BTW, thanks for the code Paul, but I like to avoid JavaScript and also prefer my JPEG button.
    Paul's solution doesn't use javascript and you can use your JPEG for the button.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    . The approach you posted uses text-indent on the input, something I would never do.
    Yes but it doesn't really matter as the input lies on top of the text in the label so the text is always available even when images are missing. It works with images off and/or css off etc. Not the neatest of methods I agree

    Quote Originally Posted by debbie
    BTW, thanks for the code Paul, but I like to avoid JavaScript and also prefer my JPEG button.
    As Lemon Juice said it works without javascript and you can use the same image. The js in that demo was for a hover effect in ie6 and not needed for the image replacement.

    However, I will admit it is a bit of a convoluted method but useful if you already have things set up for submit buttons etc.

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Lemon Juice said it works without javascript and you can use the same image.

    However, I will admit it is a bit of a convoluted method but useful if you already have things set up for submit buttons etc.
    I looked at your code but am not getting where the image comes in and what you mean by "over/under-technique"...


    Debbie

  20. #20
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul's method works well (with/without JS) in allowing the user to see the submit button even with images/CSS off, but one of the requirements of the technique is to make sure the actual CSS sprite/image being used is larger than the label hidden behind it.

    Having a small 20x20px window with a transparent GIF (eg. a magnifying glass icon used for a search field submit button) and a label of "Search" wouldn't look good as the label would show through on a normal CSS/images-enabled browser.

    Inside Vancouver Blog | a blog about Vancouver, by Vancouverites

    The "go" button in the top right is an example of where I used Paul's method for a client, but had to change the label text from "Search" to "go" and push it a bit to the right so it wouldn't peek through.
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes as mentioned above (thanks ) the technique is not really suitable for transparent images much in the same way that the gilder/levin image replacement suffers also. As usual with CSS you have to make choices


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
  •