Button vs. input[type="button"]

So, I’ve been bouncing back and forth with this for some time now, so I thought I’d post about it and get some other thoughts.

Which do you use: button or input[type=“button”] for your elements? I’ve bounced back and forth between them. I usually use input for my buttons, but I’ve been wondering if that’s still appropriate.

Should I use one over the other? Are there advantages or disadvantages to one or the other? I know button can be a bit easier to get an image on, but is that about the only difference?

Thanks!

<button> can contain HTML, and is easier to style with CSS, which actually gets applied across browsers. However, there are some drawbacks to using it in IE. IE doesn’t properly detect the value attribute (and uses the tag’s content instead as the value), and all values are sent to the server, whether or not the button is clicked. This makes using it as a <button type=“submit”> a little tricky.

<input type=“submit”> doesn’t have any value or detection issues. However, you can’t add HTML like with <button> and can only use the value tag. It’s also harder to style, and the styling doesn’t always respond well across browsers.

Here’s some relevant links:

http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use

Coping With Internet Explorer's Mishandling of Buttons — All in the head

http://www.esqsoft.com/html/button-vs-input-type-equals-button.htm

button versus input[type=“submit”] in IE and beyond - Ajaxian

Input vs. Button | Trevor Davis

This makes using it as a <button type=“submit”> a little tricky.

Awesome, exactly what I was looking for. Thanks.