Jon Tan / silo / html / HTML <button> Test

This test was prompted by Chris Shiflett who happened to mention that the Google Web Accelerator will pre–fetch links to pages like /logout that perform an action. Therefore a form that will not be fetched may be a better way to proceed. Chris also covers Cross Site Request Forgeries (CSRF) and other issues around pre–fetching in his article about the Google Web Accelerator.

The button element was introduced in HTML 4. It persists in HTML 4.01 and XHTML. See the W3C recommendation for further detail.

The Default <button> Tag Within a <form> Element.

The HTML looks like this:


<form action="http://jontangerine.com" method="post">
    <div>
    <button type="submit">Post</button>
    </div>
</form>

Out With Buttons, In With Links

What if we want it to look like a regular link? Say for a ‘Logout’ feature to avoid automatic logout when someone is using the Google Web Accelerator that pre–fetches links. We add a class to the form element (class="link") to allow us to select the form:


<form class="link" action="http://jontangerine.com" method="post">
    <div>
    <button type="submit">Post</button>
    </div>
</form>

Of course you could always use CSS specificity if you wish.

Then we apply a little CSS to strip default styles on the <form> and <button> elements and add some styling to mimic a plain text link:


form.link{
    margin:0;
    padding:0;
    }
.link button{
    margin:0;
    padding:0;
    border:0;
    background:0;
    font-size:1em;
    color:#00f;
    text-decoration:underline;
    cursor:pointer;
    }

Now we need to do something with the text link on hover or focus so we add a little more CSS (in this example to purely change the text colour):


.link button:hover,
.link button:focus{
    color:#c00;
    }

Then we get this:

It looks like a link. It is a link. It acts like a link in all good browsers. Firefox will only underline the link in quirks mode.

Note: Users expect that form controls will look like form controls. Therefore, it is not recommended to alter a form button (or any other form control) in this way unless you deem it absolutely necessary. This is a proof of concept only as the use of links for user controls is currently so prevalent.

Testing and Issues

Windows XP Pro:
Firefox 2.0 (Firefox will only underline the link in quirks mode)
Opera 9
IE6 / 7 (As usual IE6 does not recognise the :hover or :focus pseudo selectors)
Mac OSX:
Safari 1.3.2 / 2.0
Firefox 1.5 / 2.0 (Firefox will only underline the link in quirks mode)

Please feel free to test yourself and let me know so this may be updated.

Sharing

  1. Tweet this or follow Jon on Twitter
  2. Del.ici.ious logoAdd to del.icio.us
  3. Digg iconPost to Digg
  4. Feed iconRSS / Atom feed (log)

This is the archive of jontangerine.com version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There's a holding page before the new site arrives.