Aug 24

Using the HTML <button /> element in place of <input type="submit" />

The benefits of using the HTML BUTTON element

The HTML <button/> element is a rarely used but very "styleable" substitute to the <input type="submit"/>, the standard button for submitting a form.

17.5 The BUTTON Element (W3C Recommendation - Forms)
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Allowing child html elements (div's, span's, img's) creates a lot more possiblities for styling using CSS. For example, the Sliding Doors of CSS technique to create round buttons that were only possible before by using the <input type="image" /> element or using links that triggered the form submission via JavaScript.

The HTML:

<button type="submit" title="Search">
    <div class="o"><div class="i">
        Search
    </div></div>
</button>
<button type="submit" title="Click Here">
    <div class="o"><div class="i">
        Click Here
    </div></div>
</button>
<button type="submit" title="Go">
    <div class="o"><div class="i">
        Go
    </div></div>
</button>

The CSS:

button{
    background:none;
    border:none;
    color:#ffffff;
    font-weight:bold;
    text-align:left;
}
button div.o{
    padding-left:20px;
    background:transparent url(button.gif) no-repeat left top;
}
button div.i{
    padding-right:20px;
    background:transparent url(button.gif) no-repeat right -36px;
    height:36px;
    line-height:36px;
    white-space:nowrap;
}

The Result:

Buttons

As you can see above, the BUTTON is inline but it contains block elements within it, which is way cool. This doesn't work in any other case I know of. Try putting a div inside of a span... First of all, it is not valid markup. And second, the rendered result will vary by browser and will not be what you would expect.

BEWARE IE6!

The BUTTON element works in IE6, BUT as usual there are some bugs. If there are multiple BUTTON element in a form, the form gets submitted with the name/value's of all of them instead of just the one clicked. This issue got me good in a project but I was able to work around it with some JavaScript (using jQuery):

if ($.browser.msie && $.browser.version == '6.0') {
    $('button').click(function(){
        // disable all the buttons on the page
        $('button').attr('disabled', 'disabled');

        // reenable the button just clicked
        $(this).removeAttr('disabled');
    });
}

If you need to support IE6 without JavaScript enabled AND will have a form with multiple buttons, then the BUTTON element is probably not for you. Otherwise, there is no reason not to use it.

Tags:

Powered by my hackings on Django-Mingus a Django project, PostgreSQL, memcached, nginx, Apache + mod_wsgi, Ubuntu, Rackspace Cloud,...

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

html5 | top