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 CSS Foundations Selectors Basic Attribute Selectors

Posted by Alex Friant
Alex Friant
6,444 Points

The Project Files "index.html" is slightly different than what's in the video, rendering the instructions not to work.

In the video, the input element's 'type' attribute is "text", but in the Project File download the value is "email". If you follow the video instructions of using "text" as the value, then the html doesn't render the same. You have to either change the CSS to "email" or the HTML to "text" to make it work.

7 Answers

Alex Friant
Alex Friant
6,444 Points

Hi Sreng,

I'm pointing out a discrepancy between the video "Basic Attribute Selectors" and its associated "Project Files" you download for the video, specifically concerning the index.html file. The video's index.html shows type="text", and the project file index.html you download shows type="email".

The problem occurs because the video tutorial tells the student to type input[type="text"] {...}, but since the student's index.html has type="email", the student's CSS selector doesn't work. The result is the web page doesn't render the way it should, it looks different from the video web page.

To fix this, the project file index.html you download should have the attribute changed to type="text", to match the video.

Logan Sroufe
Logan Sroufe
3,363 Points
Logan Sroufe
Logan Sroufe
3,363 Points

If you are following along with the video and downloaded the course files I am still seeing this issue. Since the instructor doesn't mention that you will have to change the following code from:

<input type="email" name="email">

to

<input type="text" name="email">

When I was attempting to preview the files provided it was not rendering the yellow box.

The course files should be updated.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Sreng Hong, the issue isn't that people don't understand what the "email" type is, nor is it an issue of whether or not types with the value of "text" or "email" function in the same way. The issue is that if you ask us to target a type with the value of "text" rather than "email" in the video, when the HTML document we have downloaded does not have a type value with the value of "text", then nothing happens on our end. The files should be corrected, or the instructional video should be changed so that you don't leave your students troubleshooting for themselves.

Anya Coleman
Anya Coleman
2,995 Points
Anya Coleman
Anya Coleman
2,995 Points

As a beginner I lost almost a whole day trying to figure this out. They should match period. You apparently have forgotten what it's like to be learning a new subject. 12 months this has been reported and still it's not fixed...really?

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

Hi Alex. I think there are no different between using input type text and email. The render html on the browser is still the same. If in the html you use input type="text", in the css you have to use selector input[type="text"] { }. It's the same as input type="email".

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

About the difference of type text and email, email is a new type of input that include in the html5 to Defines a field for an e-mail address.

Here's a link: http://www.w3schools.com/tags/att_input_type.asp