Product Landing Page Email Input

HTML-CSS
1

Hi there,

My product landing page is failing these four steps:

You should have an input element with an id of email .
Your #email should have the placeholder attribute with placeholder text.
Your #email should use HTML5 validation by setting its type to email .
Your #email should have a name attribute of email .

It passes this step:
Your #email should be a descendant of the #form .

So why is it not passing the others?

Here is my code:

      <div class="h2">
      <h2>Handcrafted, tried and tested powerbuilding programs</h2>
      </div>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" placeholder="Enter your email address" required>
        <div class="submit">
        <input id="submit" id="submit" type="submit" value="Send me a free template">
        </div>
      </form>
      </section>

Why is it not seeing the email input field I have added? Many thanks.

2

Hi and welcome to the forum!
Right now, you’re missing the name attribute. But you’re right, the other parts should pass. Try adding the name attribute and then see if it passes. If not, then you can share your full code so we can see where the issue is.
Good luck!

1 Like
3

Hi there,

Thanks - I’ve added the name attribute, but none of the input tests pass still. Here is my full HTML code:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Powerbuilding Programs">
  <title id="title">Powerbuilding Programs</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>

<body>
 
  <div class="header">
    <header id="header">

      <div class="logo">
      <img id="header-img" src="https://i.ibb.co/k244Vbv3/logo.png">
      </div>


      <div class="nav-bar">
      <nav id="nav-bar">
        <ul>

          <li>
            <a class="nav-link" href="#programfeatures">Program Features</a>
          </li>

          <li>
            <a class="nav-link" href="#video">Video</a>
          </li>

          <li>
            <a class="nav-link" href="#pricing">Pricing</a>
          </li>
      </nav>
      </div>
    </header>
  </div>

  <div class="main">
    <main id="main-doc">

      <section class="email" id="email">
      <div class="h2">
      <h2>Handcrafted, tried and tested powerbuilding programs</h2>
      </div>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input name="email" id="email" type="email" placeholder="Enter your email address" required>
        <div class="submit">
        <input id="submit" id="submit" type="submit" value="Send me a free template">
        </div>
      </form>
      </section>

      <div class="container">

      <section id="programfeatures">
        <div class="grid">
          <div class="icon">
            <img class="icon" src="https://i.ibb.co/Mk1D1zy9/calendar.png">
          </div>
          <div class="text">
          <h3>PROGRAM FEATURES</h3>
          <p>Our programs can be used over 3, 4, 5 or 6 days per week in the gym. This means that you have absolute flexibility over how you choose to follow our program.</p>
          </div>
        </div>
      

        <div class="grid">
          <div class="icon">
            <img class="icon" src="https://cdn-icons-png.flaticon.com/512/4744/4744822.png">
          </div>
          <div class="text">
          <h3>HOW IT WORKS</h3>
          <p>Our programs are designed with a focus on the big three lifts - squat, bench and deadlift. This means you will progress those lifts whilst also making size gains!</p>
          </div>
        </div>
      

      
        <div class="grid">
          <div class="icon">
            <img class="icon" src="https://i.ibb.co/cSNcy4rS/money-bag-128.png">
          </div>
          <div class="text">
          <h3>30-DAY MONEY BACK GUARANTEE</h3>
          <p>If you're not totally satisfied with the program, you can contact us within 30 days and get a no-questions-asked refund - giving you absolute peace of mind.</p>
          </div>
        </div>

      </section>

      <section id="video">
        <div class="video">
          <iframe id="video" width="750" height="500" src="https://www.youtube.com/embed/OPEDjl88P-4" title="How To Get Bigger &amp; Stronger At The Same Time (Powerbuilding Science Explained)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
      </section>

      <section id="pricing">
      </section>
        
    
    </main>

  </div>
4

Worth noting that my video is also failing these two tests, despite the element, src and id being present:

You should have a video or iframe element with an id of video .
Your #video should have a src attribute.

I assume it’s something to do with how I’ve formatted my HTML code, but I cannot work it out at all.

5

And we found the problem!
You already have an element with id="email", so the system ignores your input element. That’s why those steps are not passing.
You still have some steps left to complete, so good luck!

1 Like
6

You are a legend. Lesson learned - don’t use the same ID’s for inputs and sections!! That has also fixed my video issue. Thank you so much!!

1 Like
7

This can also be due to the fact that you have other elements with the same id as your video or iframe. id is supposed to be unique to an element.
Happy coding!

1 Like
8

Thanks, I will make sure id is unique in future. Have a great day.

1 Like