I don't exactly need help here. I'm just looking to start a discussion on the use of these two elements.

 

First off, these two work essentially the same (correct me if i'm wrong).

 

I can submit a form with

 

<input type="submit" />

or

<button type="submit"></button>

 

And they can be styled to essentially look the same. (With the use of :hover & :active)

 

I'm currently in the process of redesigning one of our old sites and i've noticed in th previous developers code he has used <input> in one place & <button> in others.

 

Normally i've always stuck to <input> and have never bothered to use <button>, because I just like the look of my code when creating forms all showing <input>. :v

 

So I just wanted to know if there was any REAL difference - apart from the default browser styles - from a semantic POV and if there are if somebody could point out when i'm really supposed to use <button> and when i'm supposed to use <input>.

 

Also pros/cons if any.

 

Thanks!

Semantically they're identical and both an equal pain in the neck to style.

 

The one advantage that <button> has over <input> is that you can put other inline elements inside <button>. This makes it remarkably handy for stylised buttons using the sliding-doors technique.