Press "Enter" to skip to content

HTML button is not useful

Sometimes things seem so obvious once you learn them the hard way that you wonder why there aren’t big signs everywhere making it clear from the start. The HTML button element is useless when used with a server side controller. I got my information on the button element from the HTML specification and was happily using it with Firefox as my client. (I have found Firefox with key extensions to be an indispensable tool in developing web applications.) When I tried my app with IE 6 I quickly found that my servlets couldn’t distinguish which button was pressed.

My testing shows that in IE 6 all <button type=”submit”> values are submitted any time the form is submitted. In addition the content is used as the value rather than the value attribute. I searched for more information to see if I was missing something. I wondered how could IE get it so wrong and if it was wrong how could I have not heard about this problem before. Most of the articles I found about button talked about how great it was because it gave so much control over the content and style of the button. The best evidence I found that button was indeed broken in IE came from comments to the article “Push my button”. Standard vs. quirks mode makes no difference. I have not tested IE 7 yet. I did notice that some articles say that the button element is just for use with JavaScript but they don’t say it is because of the IE bug.

The thing that originally attracted me to the button element is that it allowed specifying the value of the button independent of the button label. The input element of type button has the problem that the label can’t easily be used to distinguish which button was pressed when the button label is localized. You could have the controller test the button value using the localized label string but yuck! In general internal tokens and display text should be kept separate.

The general requirements for using buttons are:

  • Multiple submit buttons on a form and it must be possible to distinguish which was pressed.
  • The button text must be localizable so you can’t rely on the button label to distinguish the button.
  • The solution must not require JavaScript. This would break the principal of progressive enhancement.

I can’t use <button name=”submit” type=”submit” value=”v1″>Label</button> because IE returns the content “Label” rather than the value “v1″ and because all buttons of type submit are returned so you can’t tell which button was pressed. I also can’t use <input name=”submit” type=”submit” value=”Label” /> (where multiple buttons use the same name) because the buttons cannot be reliably distinguish. The value is “Label” in English but may be different when localized.

I see two options and both use the input element of type button. One is to use a different name for each submit button. The draw back is slightly messy code on the back end where you have to check for the presence of different parameters. The second option and the one I use is to encode the intended value of the button in the name.

For example: rather than
<button name=”submit” type=”submit” value=”v1″>Label</button>
I would use
<input name=”submit_v1″ type=”submit” value=”Label” />

In the controller servlet I have common code to look at the parameter prefix “submit_” and extract the button value.

The main thing you loose out on is the styling ability of the button element. Progressive enhancement can be used to swap input for button and add the needed JavaScript to submit the correct parameters. This will give correct behavior for clients without JavaScript and provide a nicer look for clients with JavaScript

Both approaches have their problems. To implement the first in a common controller servlet would require that the controller know about all the names that could be used on submit buttons. With the second approach the controller pollutes the namespace of form properties.

12 Comments

  1. […] why our application completely refused to work using Internet Explorer 6.  Turns out that IE 6 is totally flummoxed by the HTML <button> tag.  If you have more than one a page, IE submits all the buttons – so […]

  2. Robert
    Robert Friday, August 22, 2008

    Thanks a lot for this article. I have been fighting with this for a couple of hours and thought there was something wrong with my html understanding. I’ll have a look through all the workarounds now to find a solution.

  3. x
    x Thursday, September 13, 2007

    Hint #3

    function antiMilitaryTime() {
    if (hr == 12) { ampm = “Noon” }
    if (hr == 0 || hr == 24) { ampm = “Midnight”; hr = 12 }
    if (hr 12) { ampm = “P.M.”; hr -= 12 }
    }

  4. Infovore » links for 2007-07-25
    Infovore » links for 2007-07-25 Thursday, July 26, 2007

    […] HTML button is not useful | HardLikeSoftware Confirms some things I discovered the hard way. (tags: html button ie6 bug) […]

  5. f
    f Thursday, June 14, 2007

    Hint #1:
    function antiMilitaryTime() {
    if (hr – 12 >= 0) {
    hr -= 12
    if (hr != 12) {
    ampm = “P.M.”
    }
    if (hr == 0)
    {
    hr = 12
    }
    }
    }

    Hint #2:
    Don’t use Microsoft FrontPage.

  6. John Snyders
    John Snyders Wednesday, May 16, 2007

    I have no idea what to make of that code other than the antiMilitaryTime is silly. I hope it was not created by a human.
    I don’t know frontpage at all. The problem I was describing is a browser problem. It can be worked around on the server side or client side. I have no idea how it interacts with frontpage.

  7. z850310
    z850310 Wednesday, May 16, 2007

    i am currently workin on a pop up and it has say 12 buttons on it but those buttons are for some special function. im going to paste the code here: please tell me on how the buttons should copy the value onto the text box, i used the advanced button function on micorsoft frontpage and it is copying the html code instead not the value on the textbox. please tell me what are the correction or the codes.

    code is

    self.moveTo(0,0)
    var isOpener = opener;
    var refurl = !isOpener ? “none” : “yes”;
    var winurl = document.location;
    if(refurl == “none”){
    window.open(winurl,”,’height=921,width=291,resizable=0,scrollbars=1,menubar=0,toolbar=0, titlebar=no,location=0,status=0′);
    window.opener = this;
    window.close();
    }

    TMGv2:

    if (document.all){

    actualtitle=document.title;

    var scroller; //scroll down to set it

    var ampm;

    function antiMilitaryTime()

    {

    if (hr == “12”){

    ampm=”P.M.”

    }

    else if (hr == “13”){

    hr=”1″

    ampm=”P.M.”

    }

    else if (hr == “14”){

    hr=”2″

    ampm=”P.M.”

    }

    else if (hr == “15”){

    hr =”3″

    ampm=”P.M.”

    }

    else if (hr == “16”){

    hr = “4”

    ampm=”P.M.”

    }

    else if (hr == “17”){

    hr = “5”

    ampm=”P.M.”

    }

    else if (hr == “18”){

    hr = “6”

    ampm=”P.M.”

    }

    else if (hr == “19”){

    hr = “7”

    ampm=”P.M.”

    }

    else if (hr == “20”){

    hr = “8”

    ampm=”P.M.”

    }

    else if (hr == “21”){

    hr = “9”

    ampm=”P.M.”

    }

    else if (hr == “22”){

    hr = “10”

    ampm=”P.M.”

    }

    else if (hr == “23”){

    hr = “11”

    ampm=”P.M.”

    }

    else if (hr == “24”){

    hr = “12”

    }

    }

    function addZero(){

    if (min

    function copy(TAG)
    {
    document.getElementById(“txtArea”).value=TAG

    document.Form1.txtArea.focus();

    document.Form1.txtArea.select();

    CopiedTxt = document.selection.createRange();

    CopiedTxt.execCommand(“Copy”);

    }

    Dispatch Out
    : |  

    Left Active in Error : |  

    Ticket Failed V repair : |  

    Netway Closed IR : |  

    Netway Closed Modem : |  

    Netway Closed NA : |  

    Central Office : Frame : |  

    Service Orders : |  

    CFA : Recap : |  

    Engineering : Cable : |  

    MCO Outage : |  

    Manual Ticket Creation : |  

    GAT Error : |  

    Mentor Edit : |  

    function CopyToClipboard()

    {

    document.Form1.txtArea.focus();

    document.Form1.txtArea.select();

    CopiedTxt = document.selection.createRange();

    CopiedTxt.execCommand(“Copy”);

    }

     

     

     

     

     

     

     

     

     
     
     
     
     

  8. Peter
    Peter Thursday, March 15, 2007

    oops, not auto-escaping?

    <button onclick=”this.name=’myButtonName’” type=”submit” value=”v1″>Label</button>

  9. Peter
    Peter Thursday, March 15, 2007

    Just run into this same problem, what a pain in the …

    the following seems to work

    not elegant but seems to do the job

Comments are closed.