Semantics – input type=”submit” vs. button

Posted on Friday, March 6th, 2009 under , , ,

What’s the difference between:

<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.

Target blank links

Posted on Monday, February 9th, 2009 under , ,

One never ending debate on the web is on whether external links should open in new windows. Some say Yes! they should open in new windows because we need to keep the users on our site as long as possible. Usually these are the sales/marketing people. The other group says No! They shouldn’t open in new windows, because they’re extremely annoying and we should always let the user decide. These are the programmers, the group I’m in.

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. Keep reading»