My input element with submit id is not working properly

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
   
  <header id="header">
  
      <img id="header-img" src="https://media.licdn.com/dms/image/v2/C4E0BAQGeXcFAaYBKag/company-logo_200_200/company-logo_200_200/0/1630594346049/elegant_strand_logo?e=1734566400&v=beta&t=HdJ2o1NSW3mgNxUUYVQTfJkW2ic2lBJ00spU2IqwncY" alt="logo">
    <nav id="nav-bar">   
        <a
class="nav-link"
href="#specification">
Specifications</a>

        <a class="nav-link" href="#bedding">Bedding</a>
        <a class="nav-link" href="#pillows">Pillows</a>
        <a class="nav-link" href="#towels">Towels</a>
      </nav>
      </header>
 <section class="img-1">
    <img src="https://www.elegantstrand.com/cdn/shop/files/Bedding_Dropdown_Placeholder_Image_02ebcb75-cd5a-4deb-bca8-20975dc76ef5_370x230@2x.png?v=1668669839" alt="bed-design" class="image">
    <img src="https://www.elegantstrand.com/cdn/shop/products/T2_Pure-Cashmere_1500px-wide-851493_600x.jpg?v=1713887959" alt="towel" class="designs">
  </section>  
    
<p class="sub" id="specification">
Luxury Bedding and Bath from Elegant Strand</p>
<p class=" description">From resort-quality bedding sets to plush bath towels, explore our collections and find the perfect addition to your elegant lifestyle.</p>

<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/0JfSbK4NKJI?si=Ozw7lR4DLnlqE4Ei" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  <section class="best">
    <img class="bed" src="https://www.elegantstrand.com/cdn/shop/files/Screen_Shot_2022-12-06_at_2.06.45_PM_600x.progressive.png.jpg?v=1670364413" alt="design">
    <p class="image-title">Saint Tropez <br>700 Thread Count Sateen Sheets
Hand-Guided Embroidery</p>
<button class="product" id="submit"><a href="https://www.elegantstrand.com/products/saint-tropez-slate-platinum">View This Product</a></button>
</section>
<section class="bedding" id="bedding">
  <h3>Bedding</h3>
  <ul>
    <li><a href="https://www.elegantstrand.com/collections/elegant-bedding">Sheet Collections</a></li>
    <li><a href="https://www.elegantstrand.com/collections/duvet-covers">Duvet Covers</a></li>
    <li><a href="https://www.elegantstrand.com/products/quilted-collection-atlantico-mil">Quilted Collections</a></li>
    <li><a href="https://www.elegantstrand.com/collections/decorative-shams">Decorative Shams</a></li>
    </ul>
    </section>
    <div class="img-show">
    <section class="pillows" id="pillows">
<h3>Pillows</h3>
<img src="https://www.elegantstrand.com/cdn/shop/products/Untitled-1_01761cf8-3361-4df2-8ad3-90388c87c99d-190459_600x.jpg?v=1694119481" alt="towels" class="pic-of-towels">
<img src="https://www.elegantstrand.com/cdn/shop/files/pillow-front_57f68f7f-93bd-41c2-8461-4b55dee5af22_600x.jpg?v=1692905333" alt="towels" class="pic-of-towels">
<img src="https://www.elegantstrand.com/cdn/shop/files/pillow-side_027eb98c-4078-4c93-a239-d2a924e88a30_600x.jpg?v=1692905332" alt="towels" class="pic-of-towels">
<h5>European Goose Down Pillows</h5>
<p class="details">Proprietary Pillow within a Pillow Design
Ultimate Comfort & Support
Handcrafted in Italy</p>
   <a href="https://www.elegantstrand.com/products/pillow-within-a-pillow"></a>
   <button class="product"><a href="https://www.elegantstrand.com/products/pillow-within-a-pillow">See More</a></button>
    </section>
      <section class="towels" id="towels">
<h3>Towels</h3>
<img src="https://www.elegantstrand.com/cdn/shop/products/T1_Pure-Cashmere_1500px-wide2-756377_600x.jpg?v=1713887959" alt="towels" class="pic-of-towels">
<img src="https://www.elegantstrand.com/cdn/shop/products/T5_Pure-Cashmere_1500px-wide2-266837_600x.jpg?v=1694119502" alt="towels" class="pic-of-towels">
<img src="https://www.elegantstrand.com/cdn/shop/products/T2_Pure-Cashmere_1500px-wide-851493_600x.jpg?v=1713887959" alt="towels" class="pic-of-towels">
<h5>Riviera Towels</h5>
<p class="details">Garment Dyed, Soft & Plush
Hand Cut and Sewn Edging
Towel Weight 735 GSM</p>
    <a href="https://www.elegantstrand.com/products/riviera-towels-pure-cashmere"></a>
  <button class="product"><a href="https://www.elegantstrand.com/products/riviera-towels-pure-cashmere">See More</a></button>
    </section>  
    </div>
  
     <form id="form" action="https://www.freecodecamp.com/email-submit">
       <input id="email" placeholder="xyz@gmail.com" type="email" name="email">
   <input type="submit" id="submit">
      </form>
      </body>
      </html>
2

Hi there!

If that is about the FCC curriculum challenge. Post a link to the challenge project.

1 Like
3

Hello @marwazah2006 !

Keep up the good progress!

There are two cases of id listed as submit. Each id can only be used once.

and

Here is a link to verify our codes.

https://validator.w3.org/nu/#textarea

I use it most of the time for checking both my html and my css codes.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
4

Thank you for assisting me.

1 Like
5

You are very welcome!

Wishing you more good progress on your coding journey @marwazah2006 !