SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 41
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    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,761
    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,761
    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
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    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.
    http://reference.sitepoint.com/html/...ibilitysection



    Debbie

  9. #9
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that link they are talking only about IE up to IE8.

    They are also talking about the situation where there could be problems if you have multiple submit <button>'s in a form and you want to send the value to see which button was clicked. If you have only 1 submit button per form then it is not an issue.

    As I said, I use <button> quite a bit and I don't have any problems with it.

    Like a lot of aspects of building a web site, there will be limitations with all sorts of things and as long as you know how things work and the workarounds then you shouldn't have any major problems.

    But to answer your question, use whichever type of button you are most comfortable with. All the buttons will do what you want.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    In that link they are talking only about IE up to IE8.

    They are also talking about the situation where there could be problems if you have multiple submit <button>'s in a form and you want to send the value to see which button was clicked. If you have only 1 submit button per form then it is not an issue.

    As I said, I use <button> quite a bit and I don't have any problems with it.

    Like a lot of aspects of building a web site, there will be limitations with all sorts of things and as long as you know how things work and the workarounds then you shouldn't have any major problems.

    But to answer your question, use whichever type of button you are most comfortable with. All the buttons will do what you want.
    Does anyone else agree with what webdev1958 is saying?

    Paul O'? Rayzur? Stomme? DeathShadow?


    Debbie

  11. #11
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works in at least IE7+
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #btn1 {
                    width: 200px;
                    height: 300px;
                    background-image: url('btn0.jpg');
                    border: none;
                }
                #btn1:hover {
                    background-image: url('btn1.jpg');
                }
            </style>
        </head>
        <body>
            <form action="formProcessor.php" method="post">
                <input type="text" name="txt1" />
                <button id="btn1" type="submit"></button>
            </form>
        </body>
    </html>
    but as I said, use whichever type of button you are most comfortable with

  12. #12
    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
    Does anyone else agree with what webdev1958 is saying?
    Have a read of the link you posted.

    An extract from it:

    In IE versions 6 and earlier, if you have several buttons with the same name but with three different values and text displayed inside the button to the user (see code sample below), it does not matter which button is pressed, data from all three are passed through, rather than just the button that is pressed (IE7, IE8 only submit the data from the button pressed).
    IE7+ submits data just from just the pressed submit button which is the way it should be.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    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.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    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

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    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.

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    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

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    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.

  18. #18
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a single button per form and/or multiple buttons per form but don't have to support IE6- then you can do the same thing with less html and css using a <button>

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    If you have a single button per form and/or multiple buttons per form but don't have to support IE6- then you can do the same thing with less html and css using a <button>
    Yes but what happens when images are not loaded or missing if you are using an image for the button? I see no advantage at all when using an image for a submit button as the input type=submit is perfect for the job. The only use I see for the button element is for multi line text content.

  20. #20
    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
    Yes but what happens when images are not loaded or missing if you are using an image for the button?
    Obviously no bg image would appear but the text in the button still would and the button would still work.

    The point I was originally making was that <button> is a valid option and that DD's statement

    Quote Originally Posted by DoubleDee View Post
    According to SitePoint, <button> is "buggy" for all versions of Internet Explorer....
    is simply not true (as shown in post 11).

    And like I said earlier, DD should use whichever button type she is most comfortable with.

  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)
    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.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    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?

  23. #23
    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.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    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 ).

  25. #25
    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.


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
  •