Survey Form Project Problems

HTML-CSS
1

Hi, everyone.

I’m having a couple of issues with the Survey Form Project and getting it to pass the tests.

My first issue is the id=“name” test. This is my HTML:

   <form id="survey-form">
<form id="name">
  <label for="name" id="name">Name</label>
     <input type="text" id="name" class="form-control" name="name" placeholder="Enter your Name" required/>
</form>

But this runs the error: “input field with id=“name” should be a text field : expected undefined to equal ‘text’”

Yet, if I remove the closing bracket from the second line the test passes, but then I’m left with an open tag that doesn’t feel right…

This is the HTML that passes:

   <form id="survey-form">
<form id="name"
  <label for="name" id="name">Name</label>
     <input type="text" id="name" class="form-control" name="name" placeholder="Enter your Name" required/>
</form>

I find this a little confusing.

I’m also having similar trouble with the Email section.
I’m getting the following Error: "Email input field should be required : expected undefined to be truthy
AssertionError: Email input field should be required : expected undefined to be truth
"
This is my HTML:

     <form id="email">
       <label for="email" id="email">Email</label>
     <input type="email" id="email" name="email" class="form-control" placeholder="Enter your email" required/>
       </form>

Sorry, this is a lot, just wanted to get it all out in one post as it’s the same project and I’m stumped!

Thanks in Advance!

2

Hello @caffeineandveggies.

Looking at your code, you have the same id for three elements, which is probably causing problems; the id attribute needs to be unique for each element. Based on your description, you probably only need the “name” id on the input element, and you can delete it for the form and label elements.

What I would imagine happening is that when you delete the closing carrot for the form element, the program reads all of those three as a single element, which is why the test passes.

This should also fix the email issue as well.

3

Thanks so much! This was what was contributing to about 10 tests failing! Oops!
I didn’t delete it for the label element, I actually altered it as it was required to pass the test, but it turns out it was supposed to be id="name-label", not just id="name" (and is the same for email and age/number too).

It’s now passing all tests!

Here is the updated HTML I wrote, to help others if they get stuck and come across this post:

    <form id="survey-form">

      <form>
        <label for="name" id="name-label">Name</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required />

        <label for="email" id="email-label">Email</label>
        <input type="email" name="email" class="form-control" id="email" placeholder="Email" required />

        <label for="age" id="number-label">Age</label>
        <input type="number" name="age" class="form-control" id="number" min="3" max="120" placeholder="Age" required />

</form>