Build a Survey Project

HTML-CSS
1

I am receiving these errors:

  • You should have a label element with an id of name-label.

  • Failed: You should have a label element with an id of email-label.

  • Failed: You should have a label element with an id of number-label.

  • Failed: Your #name-label should contain text that describes the input.

  • Failed: Your #email-label should contain text that describes the input.

Failed: Your #number-label should contain text that describes the input.

My HTML Code is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>SurveyForm</title>
  </head>
  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">Survey Form for freeCodeCamp Required Project</p>
    <form id="survey-form">
      <fieldset>
        <label for="name">What is your first name? <input id="name" type="text" name="name" required placeholder="First Name" /></label>
        <label for="name-label">What is your last name? <input id="name-label" type="text" name="name-label" required placeholder="Last Name" /></label>
        <label for="email">What is your email? <input id="email" type="email" name="email" required placeholder="123abc@domain.com" /></label>
        <label for="email-label">What is a secondary email? <input id="email-label" type="email" name="email-label" required placeholder="123abc@domain.com" required /></label>
        <label for="number">What is your number? <input id="number" name="number" type="number" min="1" max="999999999" pattern="[0-9]{10,}" placeholder="1234567890"  required /></label>
        <label for="number-label">What is a secondary number? <input id="number-label" name="number-label" type="number" min="1" max="999999999" pattern="[0-9]{10,}" placeholder="9876543210" required/></label>
      </fieldset>
      <fieldset>
        <label for="dropdown">What is your reason for learning to code?
          <select id="dropdown" name="dropdown">
            <option value="">(Select One)</option>
            <option value="1">Self-improvement</option>
            <option value="2">Job Oppertunity</option>
            <option value="3">Start Own Business</option>
            <option value="4">It's interesting</option>
            <option value="5">Curious</option>
            <option value="6">Other</option>
          </select>
        </label>
      </fieldset>
      <fieldset>
        <legend>What do you want to learn first from freeCodeCamp?</legend>
        <label for="html"><input type="radio" name="code-type" id="html" checked class="inline" value="10" /> html</label>
        <label for="CSharp"><input type="radio" name="code-type" id="CSharp" class="inline" value="11" /> C#</label>
        <label for="CPP"><input type="radio" name="code-type" id="CPP" class="inline" value=12 /> C++</label>
        <label for="Java"><input type="radio" name="code-type" id="Java" class="inline" value=13 /> Java</label>
      </fieldset>
      <fieldset>
        <legend>What do you want to learn?</legend>
        <label for="ahtml"><input type="checkbox" value="1" id="ahtml" name="ahtml" class="inline" /> html</label>
        <label for="aCSharp"><input type="checkbox" value="2" id="aCSharp" name="aCSharp" class="inline" /> CSharp</label>
        <label for="aCPP"><input type="checkbox" value="3" id="aCPP" name="aCPP" class="inline" /> C++</label>
        <label for="aJava"><input type="checkbox" value="4" id="aJava" name="aJava" class="inline" /> Java</label>
        <label for="aRuby"><input type="checkbox" value="5" id="aRuby" name="aRuby" class="inline" /> Ruby</label>
        <label for="All-Lang"><input type="checkbox" value="6" id="All-Lang" name="All-Lang" class="inline" /> All Computer Languages</label>
        <label for="AddComm">Additional Comments: <textarea id="AddComm" rows="5" cols="40" placeholder="Comments that can help you learn."></textarea></label>
      </fieldset>    
    </form>
    <input type="submit" value="submit" name="submit" />
  </body>
</html>

As you may be able to see, the name-label, email-label, and number-label are a part of the second line of respective (2nd line) part of this code.

I have attempted to remove either name or name-label, email or email-label, and number or number-label respectively. When I remove name, email, and number it gives me an error that those are missing. When I remove name-label, email-label, and number-label it gives me these errors.

What am I doing wrong?

1 Like
2

Hi. Welcome to our forum.
Can you provide your CSS code as well?

1 Like
3

Welcome to the community @mary13 !

There is no need for a separate label for the name-label value, nor the email-label, nor number-label.

These are to be entered with the **id**attribute within the existing labels. They will only be entered in the opening label tags.

If this helps you, please remember to check the Solution by @stephenmutheu as he was providing the first guidance.

He wanted to make sure there was not an issue with the css if you had any css code their may be.

Happy coding! :sun_with_face:

2 Likes
4

Maybe I am confused, but and is in respective fields (first and last name). Do they need to be in a specific place in the HTML code as I have the id as close to the as possible. Or should I be putting this at the end if the ?

I tried to remove name and got an error for that. I removed the name-label and got an error for that. I only attempted both because of the previous errors received.

Thank you for your suggestion.

1 Like
5

The name id attribute with the name-label should only be placed within the opening label tags.
The email id attribute with the email-label should only be placed within the opening label tags.
The number id attribute with the number-label should only be placed within the opening label tags.

example:

<label id="value-label" for="value> text<input with its attributes and values> </label>

Deleted the following from your code, please.

Anything in the above that is to be entered in either the label or the input elements should be entered in what is left above these extra entries.

Try this and see if it helps, please?

Please post the updated code on this post, if you need further assistance, please?

This can be done by using three ``` before and after each complete set of code.

1 Like
6

When I attempted to change it to the <label id=“number-label” for “number-label”> I get the following error.

You should have an input element with an id of name.

1 Like
8

This did the trick. Thank you all for all of your assistance.

2 Likes
9

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