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 Mostafa M.
Mostafa M.
4,862 Points

Button VS Input tags

Hello, in the HTML course we didn't talk about the <button> tag. Well, i want to know more about it, what's the deference between <button> and <input>, and when to use this or that ?

2 Answers

Pepe Grillo
Pepe Grillo
9,305 Points

the imput element is related to the form element, you can use button element as a submit button, if you use button element in a form its the same as the input (the type value is submit by default) you can use the button element for other actions in a form or other places of your app or web (via javascript) and use the input[type=submit] strictly for sending form action.

in few words you can use the button element for, buttons whit random actions or submit a form, YOU SHOULD NOT use the input element outside a form or for other action than submit/validate a form.

Hope thath helps

Thomas Shipley
Thomas Shipley
676 Points
Thomas Shipley
Thomas Shipley
676 Points

Buttons are more flexible. You can put HTML into them to improve your UI - such a tick image on your agree button.

This is why the button tag was originally created:

"Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content."

The Button Element - W3C

There is much richer write up here: Rediscovering the button element

And this is a popular question on stackoverflow so lots of info there as well.