Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS The Selectors Solution

Amandeep Pasricha
Amandeep Pasricha
14,932 Points

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?

Thanks

1 Answer

Steven Parker
Steven Parker
216,083 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.