Build a Survey Form

Hey does anyone know how to fix the “#survey-form” and “#email-label

Without seeing your current HTML I don’t think we can help you.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

Thanks for the instruction!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title"> Cat.com Survey Form</h1>
    <p id="description"> Thank you for your time</p>
    <form id="survey-form" class="survey-form" method="post" action="https://freecatphotoapp.com/submit-cat-photo"></form>
      <fieldset>
        <label for="name">Enter Your Name: <input id="name" class="personal" type="text" placeholder="John Wick" required></label>
        <label for="email">Enter Your Email: <input id="email" class="personal" type="email" placeholder="johnwick@gmail.com" required></label>
        <label for="number">Enter Your Phone Number: <input id="number" class="personal" type="number" min="10" max="12" placeholder="0211234567" required></label>
        <label for="dropdown"> Age: 
          <select id="dropdown" name="dropdown">
            <option value="">(selection one)</option>
            <option value="1">Less than 20</option>
            <option value="2">20-40</option>
            <option value="3">40-60</option>
            <option value=="4">60+</option>
          </select>
      </fieldset>
      <fieldset>
        <p> How Many Cats Do You Have? </p>
        <label><input id="radio" type="radio"> 0</label>
        <label><input id="radio" type="radio"> 1</label>
        <label><input id="radio" type="radio"> 2</label>
        <label><input id="radio" type="radio"> 3+</label> 
      </fieldset>
      <fieldset>
        <p> What Color Is Your Cat? (multiples allowed) </p>
        <label><input id="checkbox" type="checkbox"> Orange/Ginger</label>
        <label><input id="checkbox" type="checkbox"> Black</label>
        <label><input id="checkbox" type="checkbox"> White</label>
        <label><input id="checkbox" type="checkbox"> Gray</label>
        <label><input id="checkbox" type="checkbox"> Blue</label>
        <label><input id="checkbox" type="checkbox"> Other</label>
      </fieldset>
      <fieldset>
        <label for="textarea"> What is your cat's favorite toy? <input id="textarea" class="textarea" type="textarea" placeholder="My cat's favorite toy is a white ball..."> </label>
      </fieldset>
        <input id="submit" type="submit" value="Submit"/>
    </form>
  </body>
</html>

Excellent. Now can you explain which test you are trying to fix, because when I check your code I get a lot of fails.

Pretty much anything related to the “descendant of #survey-form”. I feel that they are all within the form? :smiling_face_with_tear:

OK, let’s look at the first one:

“Your #name should be a descendant of #survey-form.”

This means that the element with an id of name should be nested withing the element with an id of survey-form.

I see you have a form element with the id of survey-form. And I see you have an input element with the id of name. Is the input element nested within the form element? You might want to look at these elements with your browser’s dev tools inspector to verify.

AHHH! I removed the /form and it worked!

Another question. for the " You should have a label element with an id of name-label". Do I have to use id=(x) Because I thought for=(x) does the same thing? Many thanks

You have to do what the user stories tell you to do. So yes, the label for the name input needs to have an id of name-label. It should also have a for attribute that points to the id of the input.

The for attribute is the most important part here. The id on the label is meaningless unless you want to use it for styling purposes. I’m not sure why the user stories require it? But they do and so you must add it.

1 Like

Thanks for the help! All completed now :muscle:
Have a nice day :grin:

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