SitePoint Sponsor

User Tag List

Results 1 to 25 of 41

Hybrid View

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

    Proper way to use Image Button in Form

    What is the proper/best syntax to use if I want to use an image for my Submit button on a Form?


    Standard Way:
    Code HTML4Strict:
    <input type="submit" name="addComment" id="addComment" value="Add a Comment"/>


    My Way:
    Code HTML4Strict:
    <a href="<?php echo WEB_ROOT . 'add_comment2.php' ?>">
    	<img src="<?php echo WEB_ROOT . 'buttons/AddAComment3.png' ?>" alt="Add a Comment" />
    </a>


    Someone's Suggested Way:
    Code HTML4Strict:
    <input type="image" src="<?php echo WEB_ROOT . 'buttons/AddAComment3.png' ?>" />



    Debbie

  2. #2
    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)
    Certainly not the last way for starters that's inaccessible the second is just a image and the first is a submit button function perhaps you are really after BUTTON?

  3. #3
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Why not this
    Code HTML:
    <a href="<?php echo WEB_ROOT . 'add_comment2.php' ?>">
        <button type="button">Submit</button>
    </a>
    with the appropriate CSS to replace the text with an image?

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Why not this
    Code HTML:
    <a href="<?php echo WEB_ROOT . 'add_comment2.php' ?>">
        <button type="button">Submit</button>
    </a>
    with the appropriate CSS to replace the text with an image?
    And what would the "appropriate CSS" be?

    I thought <button> was some new fangled - read "largely unsupported" - tag?

    Regardless, I want to use an image for my buttons.


    Debbie

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I thought <button> was some new fangled - read "largely unsupported" - tag?
    not at all.

    <button> has been around for ages. You can give it a background image in the css or add an <img> to it, whichever suits your needs.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    not at all.

    <button> has been around for ages. You can give it a background image in the css or add an <img> to it, whichever suits your needs.
    According to SitePoint, <button> is "buggy" for all versions of Internet Explorer, so its use sounds like bad advice...


    Debbie

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use it quite a lot and have no problems with it. I support IE7+ and the other major browsers.

    Can you post some code where you claim it will be buggy.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The most accessible and least problematical would be to use a background image on the input type="submit" with image replacement technique like this.

    That avoids any issues with multiple buttons etc.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The most accessible and least problematical would be to use a background image on the input type="submit" with image replacement technique like this.

    That avoids any issues with multiple buttons etc.
    Does that mean I can use any image I want?


    Is that approach satisfactory to you for someone who wants to use an image?


    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Does that mean I can use any image I want?


    Is that approach satisfactory to you for someone who wants to use an image?


    Debbie
    Yes you can use any image you want.

    The technique above allows for images or css on/off and is still usable while all the time preserving the original input buttons function especially the value field which supplies the text for the input even though you don't see it.

    The downside is the slight complexity in setting it up and that that you need to use the extra label element to hold the visible text content for when images are missing. You could do without the label and then hide the text with text-indent but that would fail in an images off and css on scenario.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I didn't exactly follow your example.

    I just want a simple image button with no JavaScript.

    Can I get by with just this code?

    Code CSS:
    #form1 .submit input{
    	width:150px;
    	height:25px;
    	border:none;
    	background:url(images/input-test.gif) no-repeat 0 0;
    	text-transform: capitalize;	/* IE needs this to hide text */
    	text-indent:-999em;
    	display:block;
    	overflow:hidden;
    	margin:0 auto;
    }

    Code HTML4Strict:
    <form id="form1" method="post" action="">
    	<div>
    		<label for="t1">Name: </label>
    		<input type="text" name="t1" id="t1" />
    	</div>
    	<div class="submit">
    		<label for="submit">Submit </label>
    		<input type="submit" id="submit" name="Submit" value="Submit" />
    	</div>
    </form>


    Debbie

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Paul,

    I didn't exactly follow your example.

    I just want a simple image button with no JavaScript.

    Can I get by with just this code?

    Code CSS:
    #form1 .submit input{
    	width:150px;
    	height:25px;
    	border:none;
    	background:url(images/input-test.gif) no-repeat 0 0;
    	text-transform: capitalize;	/* IE needs this to hide text */
    	text-indent:-999em;
    	display:block;
    	overflow:hidden;
    	margin:0 auto;
    }
    Yes you can just use the above code and it will work unless images have been turned off. In my example the input is placed on top of the label text and so provides a fallback should images be missing.

    It's not really that complicated you just place the input on top of the text as in in the usual gilder/levin image replacement techniques.

  13. #13
    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)
    The BUTTON also allows emphasis unlike submit and has richer rendering but the BUTTON element type allows other content (not just IMG) assuming the image doesn't load the 'alt' attribute would be displayed as text for the button.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    The BUTTON also allows emphasis unlike submit and has richer rendering but the BUTTON element type allows other content (not just IMG) assuming the image doesn't load the 'alt' attribute would be displayed as text for the button.
    I assumed we were talking about background images

    My point was that in normal practice the input type="submit" would be used to send the form which all browsers understand without extra work so why the need to change it if all that is required is an image. Where is the benefit in this case?

  15. #15
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Where is the benefit in this case?
    I don't see any disadvantage in using <button> if you have only a single submit button per form. The submit will still work if the image is missing whether you use <button> or a an <input> with type=submit. If you have multiple submit buttons per form then <button> is only an issue if supporting IE6-.

    If that is the case then there is no difference which type of button is used.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    I don't see any disadvantage in using <button> if you have only a single submit button per form. The submit will still work if the image is missing whether you use <button> or a an <input> with type=submit. If you have multiple submit buttons per form then <button> is only an issue if supporting IE6-.

    If that is the case then there is no difference which type of button is used.
    Which brings me back to my original question then what is the benefit. Why change something that works in any circumstance for something that will break in certain circumstances?

    You only have to read the comments here to see the problems users have had in older IE.

    By all means use the button element when you have no choice but when you are not gaining any benefit then there seems no point to me unless I'm misunderstanding something important (which won't be the first or last time I've got the wrong end of the stick ).

  17. #17
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think we're splitting hairs here

    I'm not trying to tell anyone which type of button they must or should use. I'm just highlighting the fact that unless you are supporting IE6- then there is no major difference between using <button> or <input type="submit />.

    As you alluded to before and as xhtmlcoder said, <button> gives you more flexibility in the buttons content and styling, but other than that it makes no difference which type of button is used unless IE6- needs to be supported and there are multiple submit <button>s per form.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can turn anchors into the same buttons with basically the same routine.

    Here's an example.

    It's more or less the same code with the text-decoration and inline block properties added.

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You can turn anchors into the same buttons with basically the same routine.

    Here's an example.

    It's more or less the same code with the text-decoration and inline block properties added.
    Paul, my Form Submit Buttons and Standalone Buttons look great!

    Thanks!!

    One small annoying thing, though...

    When I tab on to a button, I get this annoying dotted box around the text.

    Is there a way to eliminate that?


    Debbie

  20. #20
    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)
    Quote Originally Posted by Paul O'B View Post
    I assumed we were talking about background images [...]
    Irrelevant background decoration and nothing to do with the control; if you need a image to convey meaning or other content then you'd use BUTTON that is all I was explaining. I know what you were getting at; if you just want to style a button (and the image content doesn't matter one iota) then use CSS, its horses for courses. I've already mentioned the benefits or more correctly the appropriate usage or contextual differences.

  21. #21
    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)
    Technically if the text does go over two lines then yes BUTTON is used. Really BUTTON was created for containing richer content not just wrapping text or using an IMG whereas INPUT cannot contain content as it's EMPTY. However, in 1999, CSS support in some mainstream browsers was let's say very 'iffy'.

  22. #22
    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)
    It's probably the focus; if you want to make is extremely HARD and inaccessible for people who use keyboards to navigate your page then remove it... Otherwise think very carefully and leave it be (yes you can remove it) but like I said, it might be unwise to do so for obvious reasons.

  23. #23
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding focus styles, I like to go bold. Something like:
    Code:
    a:focus, input[type=submit]:focus, etc. { outline: 2px solid #ffaa00 }
    a:focus:active, etc. { outline: 0 }
    The 2nd line is just what I do for browsers (e.g. Ffox) that show focus styles while clicking elements.
    What do these lines do??
    You must be very new to CSS.


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
  •