Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Shafeeq Ahmed
Shafeeq Ahmed
6,058 Points

HTML Forms Submit Button

I learned two methods to add a submit button.

First method, adding a button element and setting it's type attributes value to "submit".

The second method, adding an input element and setting it's type attributes value to "submit".

What is the difference between these methods. Which one is the best practice?

2 Answers

Max Kutner
Max Kutner
7,595 Points
Max Kutner
Max Kutner
7,595 Points

They are essentially the same except using the first method (button) will allow you to add content whereas the second (input) will not.

However, the button method is not supported in some of the older browsers.

Hope this helps! Max

Rich Bagley
Rich Bagley
25,869 Points

Just to add to what Max has said you can find more information over at w3schools.

-Rich

Stephen Gheysens
Stephen Gheysens
11,935 Points

Max has a good point, compatibility is something I wasn't even thinking about!

http://caniuse.com/#search=button

Stephen Gheysens
Stephen Gheysens
11,935 Points
Stephen Gheysens
Stephen Gheysens
11,935 Points

Hi Shafeeq! I have to admit, I've been doing web development for a couple years now and had to really think about this.

Functionally: they're interchangeable (as long as both have the type='submit'). According to some old W3 specifications, there is "more you can do with buttons [visually]", but I honestly think this is out of date. These days, with the right CSS/Javascript, you can probably make an input field with type submit do anything a button element can do visually. Here's a small Codepen so that you can see how similar they really are: http://codepen.io/segheysens/pen/VebemG?editors=110

One difference you can note is that the button element has a closing tag, whereas the input element is self closing, and I had to add the descriptive text as the value of the element.