SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Submit Button

    Hi to all members,

    I have a question about an image submit button. I use an input class using CSS..<input class="formButton" type="submit" name="submit" value="submit" />
    and when I checked to see on my browser..it displayed the word submit over my image button.. so then I tried to omit the value as.. value="" ..now it shown the word "Submit Query" instead...what should I do to get rid of the word Submit on my Image Submit Button..

    Thank you so much in advance..

  2. #2
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, try value=" " (with a space)
    or do input type="image"

  3. #3
    Non-Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    Standard Submit Button has TYPE="image", TYPE="submit"
    You can see another example of this of CodeToad. Take a look at the GO Button in search box.

  4. #4
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can leave the button value with some reasonable text and style it as follows:
    Code:
    theButtonSelector {
    text-indent:-9999em;
    overflow:hidden;
    background:url(pathToImage) no-repeat center center;
    }
    On other hand if you use type="image" (not recommended ), you can empty the value attribute and add "alt" so those with no images loaded would understand button's purpose.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    text-indent fails the CSS on and images off scenario. I use type="image". It's nothing but a fancy submit button.

  6. #6
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find using type a bit annoying as I have to emulate the "press effect". Otherwise user has no clue that he successfully press the button leading him to submit the form multiple times.
    So you have to attach some light shifting through position relative.
    Personally I'm having <button> with a span inside to trigger the browser to move it itself when pressed.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Usually when I'm using image it's not something that has that "pressable" look (like a magnifying glass on a search bar). But once I had a tomato button and I could use sprite-image-replacement to slide a new form of tomato on hover/focus, and a third form on :active. Though if it's a square image you usually can get away with adding a right and bottom border on :active, depending on design.
    Moving it with relative positioning is a good idea, I hadn't thought of that.

    Otherwise user has no clue that he successfully press the button leading him to submit the form multiple times.
    I agree the user generally should get some visual feedback, though I also believe if someone is clicking submit on something, then the page should change somewhere as well. If a form was submitted, redirect them (post-redirect-get) to a "thanks, it worked" page or some such thing, or replace the area where the form was with some sort of message (I'm sure you do something similar).
    I know of at least one person (yes, older) who doesn't notice/see the more subtle things like the press effect, and she has gotten confused when no results showed (or there was only a small change in a top header box).

  8. #8
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing I occasionally do is after submitting once to cover the form with semi-transparent div, unfocus the elements and set their tab index to "-1" so you can't reach them as I can't assure that everything will be valid and processed correctly so in the very moment of submitting to show "Thank you".
    But truth is 90&#37; percent of "fancy" design (whether minimalistic or colossal images and fonts) completely ingnore the feedback.
    I've seen so much forms with styled buttons and while doing this they've set custom padding, which firstly ruins the "pressable" button, and secondly they don't reintroduce it.
    The results is flat one-colour buttons which don't ever change in either of phases or the better case of of at least button shaped but again does not change in any particular moment of mouse or keyboard action.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I've seen so much forms with styled buttons and while doing this they've set custom padding, which firstly ruins the "pressable" button, and secondly they don't reintroduce it.
    Yeah, I've seen something similar, due to Eric Meyer's reset being so popular: people let the reset remove outline, but then don't heed the warning to reintroduce it or something similar when necessary. Which is why I feel it dangerous to remove them globally... better to have outlines removed by hand when it's too ugly on any particular element, and replace it right then and there with something else.


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
  •