<form action="/foo" method="post">
    <!-- other form fields -->
    <input type="submit" value="Send data" />
</form>

…and…

<form action="/foo" method="post">
    <!-- other form fields -->
    <button type="submit">
        Send data
    </button>
</form>

Apparently none. Both snippets look and act exactly the same way. And yet, there is a more subtle difference. The difference lies in the semantics and in the meaning of the two types of buttons. A <button> tag displays a button, that you can click with your mouse and can be placed almost anywhere on a page. That’s all. It doesn’t have a purpose.

An <input type=”submit” > on the other hand does a lot more. It’s a form element – can only appear in a form – and it has meaning attached to it. When you submit a form by clicking on such an button, the value of the button is being sent along with the values of all the other form elements to the server.

<form action="/foo" method="post">
    <input type="checkbox" name="item[]" value="1" id="item_1" /> <label for="item_1">First item</label>
    <input type="checkbox" name="item[]" value="2" id="item_2" /> <label for="item_2">Second item</label>
    <input type="checkbox" name="item[]" value="3" id="item_3" /> <label for="item_3">Third item</label>
    With selected: <input type="submit" name="delete" value="Delete" /> <input type="submit" name="archive" value="Move to archive" />
</form>

In this case it matters on which button the user clicks, so an input type=”submit” tag is the best choice. But when you have something like:

<form action="/foo" method="post">
    <input type="text" name="email" />
    <button type="submit">
        Subscribe to newsletter
    </button>
</form>

…it doesn’t! So here the button tag is best suited.

There’s also a third player in the debate, the World Wide Web Consortium. According to the XHTML Strict specifications, the usage of the target attribute has been banned. This happens because the XHTML Strict standard focuses entirely on the content of the document while sending all the presentation data to the stylesheet. The target attribute is a presentational one, because it specifies how the data from the hypertext reference should be presented to the user (in a new window, in a frame and so on). The XHTML Strict standard is meant to be used with all kinds of user agents – not just browsers – even with those that don’t support data presentation in the traditional way, in a browser’s window. This category of user agents includes, but is not limited to, screen readers for visually impaired persons, text-based browser such as links, web crawlers and so on. How could a text-based browser open a link in a new window? It doesn’t even have the “new window” concept.

Javascript to the rescue

If you want a well formatted XHTML document with target="_blank" links, go for the Transitional doctype. If you’re stubborn and want to use the Strict doctype, simply mark all external links with a special class, let’s say “outgoing”. If a link has this class than it should open in a new window. A good idea is to use this class in your CSS file and mark all external links with an easy to spot icon, just like Wikipedia does. It’s very user friendly. After all the links in the document are marked this way, simply use one of the javascript snippets below – depending on which framework you use – to make them open in a new window.

First the prototype version…

Event.observe(
    window,
    'load',
    function() {
        $$( 'outgoing' ).each(
            function( item ) {
                item.target = '_blank';
            }
        );
    },
    true
);

…and now the jQuery version…

$( function() {
        $( '.outgoing' ).each(
            function() {
                this.target = '_blank';
            }
        );
    }
);

Isn’t this just cheating the standard? Well…ummm…kind of. But it keeps everybody happy. Because if the target attribute is not supported by the user agent – not a GUI browser – it will still receive the well formatted XHTML document and will be able to parse it and use the information within without breaking a sweat. And if the user agent does support the target attribute – usually this means that it’s a GUI based web browser – then all the links will pop up in new, extremely annoying, windows and the folks in the sales department will be very, very happy.