SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)

    Is there a case where <button> is the best tag to use?

    ?

  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)
    That's a bit of a short question Mark, an "?" are you a spambot?

    For those whom did get the question posed: Is there a case where <button> is the best tag to use?

    It depends upon what you are wanting it for but they have more scope. 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. Technically if the text does go over two lines then the 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 is EMPTY. Does that help any?

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    If the button has more flexibility, why use an <input type="submit"> ?

    Another question, why doesn't anyone use the <button> element?

  4. #4
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    If the button has more flexibility, why use an <input type="submit"> ?
    It's more compatible with browsers.

    Another question, why doesn't anyone use the <button> element?
    Some do. I actually use it on my web forms. However, some older browsers don't quite know how to handle it and don't pass the value of it it in a POST request back to the server. IE6 is especially notorious for this.

    Here's a couple of posts that go more in depth:
    http://www.sitepoint.com/forums/show...ot-button-quot

    http://stackoverflow.com/questions/4...n-which-to-use

    http://stackoverflow.com/questions/1...are-quite-a-fe
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Interesting, thanks gents.

    Maybe now that IE6 is dead more people will start using <button>, but then again if <input type="submit"> is sufficient there's no reason to change.

  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button isn't just for forms

    Correct me if I'm wrong but the html button isn't just for forms? If I had a button on a page that if the user clicked it, it would open a popup layer with additional content. The html button tag would be the correct use and semantic markup correct?. I don't think a link tag is appropriate, what do you think?

    I don't really see button used that way much and don't know why. I see a like with either # or javascript:void(0) in the href and that just seems wrong.

    Quote Originally Posted by Force Flow View Post
    It's more compatible with browsers.


    Some do. I actually use it on my web forms. However, some older browsers don't quite know how to handle it and don't pass the value of it it in a POST request back to the server. IE6 is especially notorious for this.

    Here's a couple of posts that go more in depth:
    http://www.sitepoint.com/forums/show...ot-button-quot

    http://stackoverflow.com/questions/4...n-which-to-use

    http://stackoverflow.com/questions/1...are-quite-a-fe

  7. #7
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Another question, why doesn't anyone use the <button> element?
    What makes you think no-one uses <button>?. I use it all the time except for a submit button in a form.

  8. #8
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show examples

    I tried looking at a few popular sites and between google, facebook and yahoo's home page I found 1 html button being use outside forms. Everyone else uses a span with the attr role=button.

    Quote Originally Posted by kennard View Post
    What makes you think no-one uses <button>?. I use it all the time except for a submit button in a form.

  9. #9
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pjdicke View Post
    Correct me if I'm wrong but the html button isn't just for forms? If I had a button on a page that if the user clicked it, it would open a popup layer with additional content. The html button tag would be the correct use and semantic markup correct?. I don't think a link tag is appropriate, what do you think?

    I don't really see button used that way much and don't know why. I see a like with either # or javascript:void(0) in the href and that just seems wrong.
    Not all input elements need to be submitted back to the server, so they don't always need to be inside a form element. You could still use either the button or the input element if you just wanted a stand-alone button to use for a javascript function.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  10. #10
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pjdicke View Post
    I tried looking at a few popular sites and between google, facebook and yahoo's home page I found 1 html button being use outside forms. Everyone else uses a span with the attr role=button.
    I don't know how many developers use <button> but the point I was making is that it is not no-one as markbrown4 was implying.

    For me it's a question of semantics. If I need a button (apart from a form submit button) to provide some sort of functionality/enhancement then I use the button element. Sure, there are other options to create a button but to me they are not as correct semantically as using the button element.

  11. #11
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    That's a bit of a short question Mark, an "?" are you a spambot?
    A mentor spam bot

    I've used <button> several times. I've also used <input> as well. I did find a problem with <button> in that it creating a different action for the button whilst pressed, it somewhat shifted the button a little, which in many cases was undesired. I did manage to fix this somehow by removing the margins and paddings, but was still a little puzzling at the time.

    Personally I don't think it's a big deal in using button or input. I did happen to use <button> for buttons outside the form element also. It does look much better, however <a href="#" class="button">Button</a> in many cases would do exactly the same thing, so in many cases I use an a tag.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  12. #12
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've just changed most of my inputs to buttons recently, after realizing that all new browsers, and most recently old browsers, all send the value of the button (some used to send textNode I think), so unlike an input type submit it can have a different textNode and value.
    They are better than input type images too, when used as buttons, as you do not have to loop through all the possible input type images to get a possible x or y value.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pjdicke
    Everyone else uses a span with the attr role=button.
    How awful. Sad to see that kind of crap on major websites. Like Amazon's famous <i role="checkbox"></i>. Arg. Incompetent boobs.

    When deciding what element to use for something, keep in mind how that element is and can be activated by default. Elements with a role of "button" (which HTML inputs type=radio,submit,button, etc have by default) can be activated with the spacebar as well as the enter key. Anchors don't get activated by spacebars unless you hijax that in.


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
  •