SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    HTML Buttons, and how to use them?

    I have been looking a little at the <button> tag.

    I am confused on how to properly use it. It seams that they are used within forms, whilst others use it outside forms. I also wanted to place a hyperlink inside this, but it is not liked very much from my validator. My question is how would you use them properly outside a form, or would you be forced to use an a tag instead.

    Awesome CSS Buttons used both buttons and a tags for their buttons. They both used them outside a form, not entirely sure if this is for presentational purposes, rather than functional.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I wouldn't be using the <button> outside a form. (The linked examples probably show them out of content because it is just focusing on them rather than forms, as such.)

    Buttons offer more options that submit <inputs>, which make them kind of handy. But they are still just meant for forms, I'm pretty sure. Outside of a form, I would just use a nicely styled <a>.

    If you want a hyperlinked button, just use <a> without the button.

    The word "button" and the <button> element tend to get a bit confused these days.

  3. #3
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Thanks @ralph.m ;

    It certainly explains things.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph
    But they are still just meant for forms, I'm pretty sure. Outside of a form, I would just use a nicely styled <a>.
    Hm, they were created specifically to allow scripting on something that accepted more styling. When I read about them I believed they meant "thingies put on the page to run some script when clicked", as well as having a form input that could accept more styling (and elements inside).

    In fact I would argue an anchor is not as good as a button on a page to run a script if you wanted to be more semantic: a button is activated by hitting the spacebar (usually) and runs some script. An anchor supposedly means "hyperlink" and should take you somewhere, and is activated by hitting enter (usually). So if you want something to run when the user activates it, and not take them somewhere, a button should be better.

    We use anchors though because IE made life hard for buttons, like giving them big black ugly borders we had to hack around to get rid of. Wha!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    a button is activated by hitting the spacebar (usually) and runs some script. An anchor supposedly means "hyperlink" and should take you somewhere
    Sounds like, with scripting off, a button in that case would do nothing, which sounds like a bit of a #fail to me ... unless it's hidden or not there with scripting off, I guess.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    True.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Using a <button> inside a form it will do something even without JavaScript since the default type for a button inside a form is type="submit"
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Addict bronze trophy vectorialpx's Avatar
    Join Date
    Dec 2012
    Location
    Bucharest
    Posts
    247
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Using a <button> inside a form it will do something even without JavaScript since the default type for a button inside a form is type="submit"
    True, but the problem with the button element is that it's a bit deprecated in my opinion. Now we have CSS3 and those buttons that have tables inside should remain in the past. Just my opinion...


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
  •