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

CSS The Selectors Solution

What is the meaning of the <input> tag and class type in this case?

In this video:

1) Why did they put the submit button under the <input> tag? I can guess why the text-field would be related to class=text by intuition, but why though? 2) What are these attributes, that are new to me, (placeholder, value, and type) implying in this example?

So essentially, looking at the code, it looks as if the type of type of input is text and type is submit...? lol

Can anyone just briefly explain the concept in relation to this example?


1 Answer

Steven Parker
Steven Parker
229,005 Points

An <input> tag with a type of "submit" is rendered by the browser as a button. So it looks the same as <button> tag but has the added functionality of submitting the form when pressed.

The text field has a type of "text" but it would not have any class unless you set one. The "type" attribute determines the appearance and function of the <input> element.

The "value" attribute is what is sent back to the browser when the form is submitted, and the the "placeholder" is what is shown in a text field before the user types anything. For more details see this MDN reference page on input element.

In the example, the input that appears as a box you can fill in has a type of "text", and the one that appears as a button has a type of "submit". There are many other possible types, all described on the MDN page.