Semantics – input type=”submit” vs. button
Posted on Friday, March 6th, 2009 under semantic web, versus, w3c, xhtmlWhat’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.