SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    proper use of <button>

    Hallo monks and gurus,

    I'm about to use <button> for the first time as I need some JS to do some stuff on a page when it's clicked. I read the specs but some things aren't clear.

    I know you CAN set a type (submit, reset, image) but do I HAVE to? Spec says nothing in the column where it says "%IMPLIED" for everything else. If I don't specify a type (and if this is okay) then do I just basically have a Javascript button?

    It's in a form, form controls get a name, but does "button" need a name?

    Lastly, am I using button for the right job? Problem is I'm changing how a page works. Currently, there's a table with 2 places for Javascript to add dates (based on stuff people click on outside this table), and an "add" button (a submit). The submit was wrapped in a form, and then there was another submit outside the form (!) basically to set off a Javascript. Er, it was this:
    Code:
    <div id='something' name='something'>
    <center>
    <h1>Something</h1>
    <form action="something" method="post"/>
    <table>
      <tr>
        <td>Begindatum:</td>
         <td id='something'></td>
      </tr>
      <tr>
        <td>Eindatum:</td>
        <td id='something'></td>
      </tr>
      <tr>
        <td>Seizoen</td>
        <td><select name="something">
    		<option value='#FF8080'>Something</option>
    		<option value='orange'>Something</option>
    		<option value='#FFFF80'>Something</option>
                    <option value='lightgreen'>Something</option>
    		<option value='red'>Something</option>
    		<option value='#81BFFF'>Something</option>
    		<option value=''>Nothing</option>
    	      </select>
        </td>
      </tr>
    </table>
    <input type='hidden' name='begindatum' />
    <input type='hidden' name='einddatum' />
    <input type='submit' value='Add'/><br/>
    </form>
    <input type='submit' value='Cancel' onclick='clearSomething()'/><br/>
    </center>
    </div>
    Yeah the Somethings are replacing text. The last submit affects another part of the page using JS.

    So, I've changed this to a normal form with selects choosing dates, no JS, and the regular add button...
    however, the option to click other stuff on the page will remain, using JS for those who have it, so I still need this "Cancel" button, so I'm thinking of a button because it's sole purpose is to cancel some Javascript (it would clear the form too, but you can't really clear a select drop-down, maybe only go back to the first values or something).

    So, does this button belong in this form? Does is need a type? Does it need a name (this is XHTML and while it's not real XML I do try to go along as if it were as much as reasonably possible)?
    I currently have:
    Code:
          <form action="something" method="post" id="something">
    	<fieldset>
    	<legend>Keuzemenu</legend>
    	  <div>
    	    <label for="something">Begindatum:</label>
    	      <div class="matchingdiv" id="something">
    		<select id="something" name="something">
    		    <option value="1">1</option>
                        ...
    		    <option value="31">31</option>
    		  </select>
    			
    		  <select id="something" name="something">
    		    <option value="1">jan</option>
                        ...
    		    <option value="12">dec</option>
    		  </select>
    			
    		  <select id="something" name="something">
    		    <option value="2008">2008</option>
    		    <option value="2007">2007</option>
    		</select>
    	      </div>
    	  </div>
    	  <div>
    	    <label for="something">Eindatum:</label>
    	      <div class="matchingdiv" id="something">
    		<select id="something" name="something">
    		    <option value="1">1</option>
                         ..........
    		    <option value="31">31</option>
    		  </select>
    			
    		  <select id="something" name="something">
    		    <option value="1">jan</option>
                        .....
    		    <option value="12">dec</option>
    		  </select>
    			
    		  <select id="something" name="something">
    		    <option value="2008">2008</option>
    		    <option value="2007">2007</option>
    		</select>
    	      </div>
    	  </div>
    	  <div>
    	    <label for="something">Something:</label>
    	      <select id="something" name="something">
    	        <option value="">Nothing</option>
    		<option value="top">Something</option>
    		<option value="hoog">Something</option>
    		<option value="midden">Something</option>
    		<option value="laag">Something</option>
    		<option value="bezet">Something</option>
    		<option value="lastminute">Something</option>
    	      </select>
    	  </div>
    	  <div>
    	    <input type="hidden" name="something" value="???" />
                <input type="submit" value="Add" />
                <button onclick="clearSomething()">Cancel</button>
    	  </div>
    	</fieldset>
          </form>
    Thnx.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I know you CAN set a type (submit, reset, image) but do I HAVE to?
    If you omit the type attribute in a <button> tag it will default to submit.

    Quote Originally Posted by Stomme poes View Post
    If I don't specify a type (and if this is okay) then do I just basically have a Javascript button?
    No, you'll have a submit button.

    Quote Originally Posted by Stomme poes View Post
    It's in a form, form controls get a name, but does "button" need a name?
    Not unless you want it to send a value to the server upon form submission (in which case you should also specify the value attribute).

    Quote Originally Posted by Stomme poes View Post
    Lastly, am I using button for the right job?
    It looks to me as if it's overkill. If you're only going to have a simple text string as the content, you could do with a simple button:
    Code:
    <input type="button" value="Cancel" onclick="clearSomething(); return false" />
    (I think the return false bit is necessary to prevent Safari from submitting the form – contrary to the spec.)
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ok, thanks a lot. Did I just miss this default to submit, or is it not on the inputs page? (I know I still have trouble reading that little box.) This is good to know... initially I was calling it type="reset" which wouldn't really do anything because the form's a dropdown.

    I read on a thread here somewhere about IE sending button info with the form while other browsers didn't but I wasn't sure if that was <button></button> or input type="button" (someone posted a link but it was adead). I'll ask my colleague too, but do you know of any adverse effects of return false? It'll be able to still clear stuff all over the page etc?

    What then exaclty is the difference between <button></button> and <input type="button"... />?? What I read in the spec was that "Button is more flexible than other inputs/has more rich applications" or something like that.

    Again, thanks a lot!

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Did I just miss this default to submit, or is it not on the inputs page?
    It's not an input element, so you need to look under [url=http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON]button[/samp]
    type = submit|button|reset [CI]
    This attribute declares the type of the button. Possible values:
    • submit: Creates a submit button. This is the default value.
    Quote Originally Posted by Stomme poes View Post
    I'll ask my colleague too, but do you know of any adverse effects of return false? It'll be able to still clear stuff all over the page etc?
    There should be no adverse effects at all.

    Quote Originally Posted by Stomme poes View Post
    What then exaclty is the difference between <button></button> and <input type="button"... />?? What I read in the spec was that "Button is more flexible than other inputs/has more rich applications" or something like that.
    Yes, that's it. An <input type="button"> element can only contain text, which you specify in the value attribute.

    A <button> element, on the other hand, can contain markup – virtually anything except other form controls. It's an inline element, but it can contain even block-level elements. If you ever need a button with a table in it …

    Code:
    <button>Submit <em>now!</em></button>
    Birnam wood is come to Dunsinane

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,824
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    <input type="button"> goes inside a form and interacts with the form that it is a part of.

    <button></button> goes outside a form and stands alone all by itself with no form.
    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="^$">

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    <button></button> goes outside a form and stands alone all by itself with no form.
    Pardon?
    Birnam wood is come to Dunsinane

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,824
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Pardon?
    Apart from the fact that browsers may (or may not) render <button> tags differently from <input type="button"> tags, the biggest difference between them is that <button tags are also valid outside of <form> tags while <input> tags are not.

    At least that is my understanding based on what I have read about it and I've never seen the validator complain about button tags used to provide buttons outside of forms.
    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 Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The DTD syntax doesn't make it possible to express this. Since forms can contain block-level elements like DIV, the syntax rules say that a DIV may contain form controls. There's no way to state that this only applies if the DIV is a descendant of a FORM.

    Thus, the validator will not complain about FIELDSET, LABEL, INPUT, TEXTAREA, SELECT or BUTTON elements outside a form. However, those elements are only meant to be used within forms. They don't make sense outside of a form.

    There's no difference between <input type="button"> and <button> in that respect. They are both meant to be used only inside forms, but the validator won't complain if they're not. That's due to the limitations of DTD syntax, not because it's somehow okay to do it.
    Birnam wood is come to Dunsinane

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,824
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Okay, I misunderstood it because the only times I have ever seen <button> used on web pages is to provide a singleton button without there being a form. This appears to be the most popular use for it that I have seen, I have never seen a page where it was used in a form. Guess there are lots of people who don't understand its correct use.

    So effectively the button tag is completely redundant in so far as semantic HTML is concerned.
    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="^$">

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Guess there are lots of people who don't understand its correct use.
    As you know, the vast majority of people who create websites have very little understanding of semantics or what HTML is actually meant for. Even fewer have ever read the specifications.

    Quote Originally Posted by felgall View Post
    So effectively the button tag is completely redundant in so far as semantic HTML is concerned.
    No, it's for buttons where you need something more than simple text or a single image in a button. You could compare <input type="button"> vs <button> with <img> vs <object>. An <img> tag can only include an image, whereas <object> can include any external content.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    My Google fu must have been low-- I just came back to this thread, did more searchng and ran across this where a nice picture illustrates what can be done with buttons. I guess my first thought about "richness of application" or whatever had to do with scripting. I've never thought of having an image and text-- I've always used input type="image" with a transparent gif in the HTML and sliders in the back, with only "value" and "alt" so save my butt.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sigh! Another one who believes there are only three browsers.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Why, does Opera or Konqueror have problems with <button>? Or do you just mean that they're not even mentioned in the article?

    I test in Opera, but according to our stats (which I know are never 100% correct), The number of people visiting our sites with Opera are... 0.04%. Right down there with Mosiac users (0.03%). It'll be nice if that changes.

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Why, does Opera or Konqueror have problems with <button>? Or do you just mean that they're not even mentioned in the article?
    I meant it's ignored. As usual.

    Quote Originally Posted by Stomme poes View Post
    I test in Opera, but according to our stats (which I know are never 100% correct), The number of people visiting our sites with Opera are... 0.04%. Right down there with Mosiac users (0.03%). It'll be nice if that changes.
    One reason might be that Opera is consistently ignored, so that people never get to hear about it.
    Birnam wood is come to Dunsinane

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,824
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    With Opera having claimed the dominant position in the handheld market the only way that their usage figures can go is up.
    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="^$">

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah, it's one reason why (even though Dan and others have told me not to waste my time or screen real estate) I've got footers on a few sites asking people to try out some other browsers (with links to Dutch-language download pages)... except Opera's download page is all in English (or Japanese or other non-western character languages). So for anyone interested enough to try another browser will be least likely to try Opera as the older population visiting our sites with these footers are not as comfortable with English as the younger crowd.

    Also, I'm thinking the ONLY reason Safari is even mentioned in the article is because it's known for making proper forms look like pink-feather-boa candy. I think otherwise there'd only be FF and IE presented.

    I have to say though, internetting with your mobile is popular here and getting moreso, and the Windows browser and OS for mobiles seems to be at the top here. : ( When I see people, like on the trein, and they're internetting with their mobiles, I often ask them which browser/OS they're using. Most people just look at me strangely though : )

    Aaannd.... just yesterday I commited an abusive sin with <button> : ) While I ended up not using it in the original problem, I then ran across this in another page:
    Code:
    <table...>
      <form action='https://eol.nameofsite.nl/paxc/otherstuff.do' method='post' name=eol><input type=hidden name=specialnumber value=0000><a href='javascript:document.eol.submit()'><img src='../../oursitename.com/banner_foo.gif'/></a>
    </form>
    Basically it was a banner which when clicked didn't just go to another insurance site but also sent along this special number which was actually needed to get to this page (to show the other company that the visitor came through our site and should receive the appropriate rates/discounts).

    As I'm allergic to JS sitting in an anchor like that, I first tried a modified version of the open-new-window Javascript I found here at SitePoint. It worked, but the "normal" link address didn't when JS was off. So we tried a "get" version which worked but left the hidden input's info in the link and the URL. Didn't look like a good idea. We needed a submit button, but we had a banner...

    Then I though about the Wufoo guy sticking images in his <button>s and thought, hey...
    Code:
    <form action="https://eol.nameofsite.nl/paxc/otherstuff.do" method="post" id="eol">
      <div>
        <input type="hidden" name="specialnumber" value="0000" />
        <button type="submit"><img src="banner_foo.gif" width="200" height="450" alt="Buy your travel insurance insurance here" /></button>
      </div>
    </form>
    Likely a real abuse of <button>, but it does work and seems valid. A small grey border goes around the banner, no big deal, and with images off there's a big button and the alt text is acting like "value". I'm glad I'd accidentally heard of <button> somewhere, they're damn useful!
    Hope this helps another person struggling with site building... and thanks to everyone for your answers.


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
  •