I don't understand why this isn't considered correct (fixed, I doubled up on ID's)

HTML-CSS
1

Tell us what’s happening:
in the ‘product landing page’ test, I dont understand why this input isnt working correctly when it works correctly for the other inputs that I make.
Here are the parts it says im getting wrong:

1.You should have an input element with an id of email`

2.Your #email should have the placeholder attribute with placeholder text

3.Your #email should use HTML5 validation by setting its type to email

meanwhile the ‘submit’ portions are considered correct, despite being written exactly the same:

1.You should have an input element with an id of submit
2.Your #submit should have a type of submit

Your code so far

<!DOCTYPE html>
<html lang="en-us">
<link src="stylesheets" href="styles.css">

<body> 

<header id="header">
  <img id="header-img" src="https://www.logolynx.com/images/logolynx/91/91725dbd13a49e3485f494b679120ae5.png">

  <nav id="nav-bar">
   <a class="nav-link"id="home" href="#home">home</a>
 <a class="nav-link"id="gallery" href="#gallery">gallery</a>
  <a class="nav-link"id="email" href="#email">email</a>
   <a class="nav-link"id="faq" href="#faq">faq</a>
    </nav>
  </header>




<div id="container">

<div id="home" class="gridItem viewWide">
  <h1 style="font-size:70px"> Things inc. </h1>
</div>

 <div class="gridItem viewWide" >
<h3 style="height:180"> <i>"Where we bring things to life"</i> <h3>
   </div>

<div class="gridItem viewWide">
  <h4> What can we do for you?</h4>
  <div class="gridItem"> <p> <b>we can do a multitide of things if you allow us to work with you</b></p> </div>
   </div>

<div class="gridItem">
  <img src="sdfsd" href="gallery">
   </div>
  
<div class="gridItem">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/LtTFaVxxeAw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
</video>
</div>
  
<div>

  <form class="gridItem" action="https://www.freecodecamp.com/email-submit" id="form">
  <input type="email" id="email" name="email" placeholder="email@example.com">



<input id="submit" type="submit">

    </form>

  











</div>
</body>

<footer id="faq"> 

</footer>
  </html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

Hi @bwattswhs !

Welcome to the forum!

Can you provide more information?
What do you mean by it doesn’t work?

Are you referring to your styles not showing up on the page?
Or are you failing tests like the media query test but it passed on codepen?

3

No the free code camp test itself is counting it wrong but i dont understand how.

4

It looks like you are missing the end tag for the form element

</form>

try that and see what happens

5

there is a end tag but i missed it when i was copying and pasting. I’ve tried removing and re-making the entire content and it still isnt going through. is there a way I could link a screenshot to better explain?

6

Could you post your full html?

Then I can throw it in the editor and get an idea of what is happening.

7

yeah let me edit the post real quick and ill throw the entire HTML into it. sorry if its a mess lol

8

Let me try to rebuild it section by section to better locate the issue

9

Found the issue.

You have duplicate ids.

In the navbar you have id=“email”

and then later on in the page you have id=“email”

Ids have to be unique.

You need to get rid of the one in the navbar.

1 Like
10

that was it. I feel bad for making such a simple mistake. It makes sense now that the submit portion was working but the email wasnt.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.